DEV Community

Cover image for The best free, open-source SaaS template for React & NodeJS
vincanger for Wasp

Posted on

The best free, open-source SaaS template for React & NodeJS

Presenting Open SaaS 🎉

We’re really excited to present Open SaaS, the totally free, open-source, production-grade SaaS boilerplate for React, NodeJS, and Prisma.

See it in action here:

Open SaaS has got all the features of those paid SaaS starters you’ve been seeing lately, except its entirely free and open-source.

We felt that paying $300-$2,000 for some boilerplate code that you need to manage yourself was crazy. On top of that, many of these boilerplates rely heavily on 3rd-party services. Add on hosting and other fees, and you’re looking at spending quite a bit of money just to get your idea out there into the world.

That’s why with Open SaaS we made a conscious decision to try and use open-source and free services whenever possible. For example, our hosted demo app and its admin dashboard on OpenSaaS.sh are powered by a self-hosted version of Plausible analytics. Want the same features in your SaaS? Well, Open SaaS has got it preconfigured for you!

Also, the Wasp framework, which Open SaaS uses, does the job of building out a number of features for you, like Auth and Cron Jobs, so that you don’t have to pay a 3rd-party service or code it entirely yourself (we’ll explain this in more detail later).

What People Are Already Building With Open SaaS...

Since the official release we've had tons of people building amazing apps and launching super creative businesses with Open SaaS. So we though we'd highlight some of them here to start with.

Below is a curated list of some of the apps people from our community:

  1. Solon: An AI sales agent for instagram/whatsapp sellers to help customers with product exploration. solon
  2. Captn.ai: AI agents working together in teams to automate the creation, monitoring, and optimization of Google Ads campaigns. Captn
  3. Bleepify: Automatically dub or remove certain words from videos instantly, with the help of AI. Super helpful for quickly making YouTube videos compliant with their code of conduct. Image description
  4. Get AI Blog Articles: A high-quality, SEO-focused blog post generator in markdown format Image description

If these examples above don't already get you inspired to build, continue reading below, where we'll discuss why we built an open-source SaaS template, what stack we used, and how it works.

Why we built it… and then gave it away for free

The feedback since our official release has been hugely positive.

Image description

We've had tons of people rave about it, and numerous SaaS apps already built with it, but we’ve also gotten some questions like:

  • “Is it going to stay free?”
  • “What’s your motivation for open-sourcing this?”

So we thought we’d go ahead and answer these to start.

Image description

First, yes it is 100% free and open-source and will stay that way.

Second, we believe that the collective knowledge of a community of developers, indiehackers, and solopreneurs will produce a better boilerplate than an individual or small group. When you buy a SaaS starter from some developer, you’re already getting an opinionated stack, then on top of that you’re also getting an app built the way they think is best — and that may not always be the best for you.

Third, Open SaaS is a project by Wasp, an open-source React + NodeJS + Prisma full-stack framework with superpowers. We, the Wasp team, believe that Wasp is very well suited for creating SaaS apps quickly and efficiently, and we want this template to prove it. Plus, as developers, we’ve learned so much from other open-source projects, and Wasp itself is an open-source project.

Basically, we love the open-source philosophy and we want to pay it forward. 🙏

So it’s our hope that we can provide a seriously valuable asset to the developer community while spreading the word about our open-source, full-stack framework. And we’d love to see the community contribute to it so that it will grow and become the best SaaS boilerplate out there.

What Open SaaS is Made Of

We put a lot of hard work into Open SaaS, including the documentation, so that developers can get a SaaS app launched confidently and easily.

We’ve also spent some time checking out other free, open-source SaaS starters, and wanted to make sure Open SaaS has all the right features of a production-ready starter, without the bloat. And we think we’ve accomplished that for the most part, although we will continue to add features and improve on it with time.

Here are the main features at the moment:

  • 🔐 Authentication (email verified, google, github)
  • 📩 Emailing (sendgrid, emailgun, SMTP)
  • 📈 Admin Dashboard (plausible or google analytics)
  • 🤑 Stripe payments (just add your subscription product IDs)
  • ⌨️ End-to-end Typesafety (no configuration necessary)
  • 🤖 OpenAI integrated (AI-powered example apps)
  • 📖 Blog w/ Astro
  • 🧪 End-to-end tests w/ Playwright
  • 🚀 Deploy anywhere
  • 📄 Full Documentation & Community Support

It’s worth going into some detail about each of these features, so let’s do it.

Auth

Image description

Thanks to Wasp, Open SaaS ships with a number of possible Auth methods:

  • username and password (simplest/easiest for dev testing)
  • email verified w/ password reset
  • Google and/or Github social login

Here’s where Wasp really shines, because all it takes to set up your full-stack Auth and get pre-configured UI components is this:

//main.wasp
app SaaSTemplate {
  auth: {
    userEntity: User,
    methods: {
      usernameAndPassword: {},
      google: {},
      gitHub: {},
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Seriously. That’s it!

Just make sure you’ve set up your social auth and have your API keys, as well as your User and ExternalAuth entities defined, and you’re good to go. And don’t worry, that part is all documented and explained in detail in the Open SaaS Docs.

On top of that, Open SaaS comes preconfigured with some examples on how to customize and create some really powerful auth flows.

Admin Dashboard & Analytics

Image description

By leveraging Wasp’s Jobs feature, Open SaaS pulls data from Plausible’s or Google’s Site Analytics (your choice!) and Stripe’s Data APIs every hour and saves them to our database. This data is then shown on our Admin Dashboard (go to OpenSaaS.sh to see it in action). The nice part is, to get access to this data for your own app, all you have to do is follow our guide on getting your analytics API keys, insert the provided script, and you’re good to go!

Again, Wasp makes this whole process really easy. With the function for querying the APIs and getting the data we need already defined for you, Open SaaS then uses a Wasp Job within the main.wasp config file:

job dailyStatsJob {
  executor: PgBoss,
  perform: {
    fn: import { calculateDailyStats } from "@server/workers/calculateDailyStats.js"
  },
  schedule: {
    cron: "0 * * * *" 
  },
  entities: [User, DailyStats, Logs, PageViewSource]
}
Enter fullscreen mode Exit fullscreen mode

And that’s it! Wasp takes care of setting up and running the cron job for you.

Stripe Payments

Image description

If you’re a developer that’s never built your own SaaS before, then integrating with a payments processor like Stripe is probably one of the few challenges you’ll face.

This was the case for me when I built my first SaaS, CoverLetterGPT.xyz. That was actually one of my main motivators for building it; to learn how to intergrate Stripe payments into an app, as well as the OpenAI API.

And even though Stripe is well known for having great documentation, the process can still be daunting. You have to:

  • create the correct product type
  • set up webhook endpoints
  • tell Stripe to send the correct webhook events to you
  • consume the events correctly
  • deal with recurring and failed payments
  • test it all correctly via the CLI before going live

That’s why having Stripe subscription payments set up for you is such a win.

But even more important than that, is having the whole process conveniently documented for you! Which is why Open SaaS offers you convenient Stripe guides in our documentation 🙂

Image description

End-to-End Typesafety

Open SaaS was built with Typescript, and because it’s a full-stack app, type safety from the back-end to the front-end can be a real lifesaver. I mean, some opinionated stacks have gotten hugely popular on this basis.

Luckily, Wasp gives you end-to-end Typesafety out-of-the-box (nothing to configure!), so it was easy for Open SaaS to take advantage of it.

Here’s an example:

  1. Make Wasp aware of your server action:

    // main.wasp
    
    action getResponse {
      fn: import { getResponse } from "@server/actions.js",
      entities: [Response]
    }
    
  2. Type and Implement your server action.

    // src/srever/actions.ts
    
    type RespArgs = {
      hours: string;
    };
    
    const getResponse: GetResponse<RespArgs, string> = async ({ hours }) => { }
    
  3. Import it and call it on the client.
    Image description
    Client-side types will be inferred correctly!
    Image description

AI-powered Example App (w/ OpenAI API)

Image description

AI is making new app ideas possible, which is partly why we’re seeing a resurgence in developer interest in creating SaaS apps. As I mentioned above, the first SaaS app I built, CoverLetterGPT, is one of those “GPT Wrappers”, and I’m proud to say it makes a nice passive income of ~$350 MRR (monthly recurring revenue).

I personally believe we’re in a sweet spot in software development where there exists a lot of potential to develop new, profitable AI-powered apps, especially by "indiehackers" and "solopreneurs".

This is why Open SaaS features an AI scheduling assistant demo app. You input your tasks for along with their alotted time, and the AI Scheduler creates a detailed plan for your day.

Image description

Under the hood, this is using OpenAI’s API to assign each task a priority, and break them up into detailed sub-tasks, including coffee breaks! It’s also leverages OpenAI’s function calling feature to return the response back in a user-defined JSON object, so that the client can consume it correctly every time. Also, we're planning on adding open-source LLMs in the future, so stay tuned!

The demo AI Scheduler is there to help developers learn how to use the OpenAI API effectively, and to spark some creative SaaS app ideas!

Deploy Anywhere. Easily.

A lot of the popular SaaS starters out there use hosting-dependent frameworks, which means you're stuck relying on one provider for deployments. While these can be easy options, it may not always be the best for your app.

Wasp gives you endless possibilities for deploying your full-stack app:

  • One-command deploy to Fly.io with wasp deploy
  • Use wasp build and deploy the Dockerfiles and client wherever you like!

The great thing about wasp deploy, is that it automatically generates and deploys your database, server, and client, as well as sets up your environment variables for you.

Open SaaS also has built in environment variable and constants validators to make sure that you’ve got everything correctly set up for deployment, as well as deployment guides in the docs

Image description

In the end, you own your code and are free to deploy it wherever, without vendor lock-in.

Help us, help you

Wanna support our free, open-source initiative? Then go show us some support by starring us on GitHub 🙏

https://media1.giphy.com/media/ZfK4cXKJTTay1Ava29/giphy.gif?cid=7941fdc6pmqo30ll0e4rzdiisbtagx97sx5t0znx4lk0auju&ep=v1_gifs_search&rid=giphy.gif&ct=g

⭐️ Give Open SaaS a Star 🙏

Now Go Build your SaaS!

We hope that Open SaaS empowers more developers to ship their ideas and side-projects. And we also hope to get some feedback and input from developers so we can make this the best SaaS boilerplate starter out there.

So, please, if you have any comments or catch any bugs, submit an issue here.

And if you’re finding Open SaaS and/or Wasp useful, the easiest way to support is by throwing us a star:

Top comments (22)

Collapse
 
seahindeniz profile image
Sahin D. • Edited

Are people still considering React for a new project? 😳 It is the new defacto jQuery 🌚

Collapse
 
sourabpramanik profile image
Sourab Pramanik

People building real applications are using React. It looks like NextJS is a powerful full-stack framework but once you get into the details of the implementation and interpretation, you will notice you have no control over the application when it starts growing that you can get in React. It is a bubble

Collapse
 
seahindeniz profile image
Sahin D. • Edited

You can build a real application using SolidJS or any other framework which don't utilize Virtual DOM, not have a messy lifecycle hooks and isolated rendering structure (aka. granular updates).
I see React choosers as jQuery fans who insist (maybe still) that React isn't a real life tech stack over jQuery.
When we start thinking ahead, the philosophy of JS ecosystem is: never settle 😁 Every now and then, we will get faster things than before and SolidJS may become obsolete, considering the fact it is a good replacement for React developers, and most probably other frameworks too (including me)

Thread Thread
 
sourabpramanik profile image
Sourab Pramanik

Yes I agree people tend to lean towards the tools which can solve their problems in a way they understand the best and that is where strong opinions for frameworks come in. But I personally haven't seen any complex applications available in the market built using SolidJS, I can be wrong here.

And talking about VDom, I can't agree more on the drawbacks it has, for which I highly appreciate Svelte for it's dynamic nature and lightness.

There goes another thing that people tend to follow similar approach to solve a problem in different languages/frameworks ignoring the inbuilt features that can provide a better experience

Collapse
 
mezieb profile image
Okoro chimezie bright • Edited

That's the challenge while in real world applications things keep growing as things change via feature addition and functionality.Here comes the nightmare while we have other frameworks that support that growth without breaking your app, Angular,veujs,django restframework,php larvel ,python django .everything is there just focus on what real matters.React and Nextjs is cool but for me i use it for hubby project.

Thread Thread
 
brense profile image
Rense Bakker

I don't understand peole hating on React, coming up with these kinds of examples... Django? PHP/Laravel? I mean no offense, but I don't think you understand what React is...

Thread Thread
 
mezieb profile image
Okoro chimezie bright

Noted you are right thanks.

Collapse
 
vincanger profile image
vincanger

Yea, a lot more than you'd think.

Collapse
 
seahindeniz profile image
Sahin D. • Edited

Well I'll be damned

Collapse
 
djheru profile image
Philip Damra

I remember React fans saying the same about jQuery when React was new. The technical prowess of a framework or library is only one of several considerations when you're running a business. Some of the others might be "How hard will it be for me to find experienced developers to work on this project?", or "What open source libraries/tools will I be able to leverage to build my product?". Developers tend to think only in technical terms, but building a successful product requires additional perspectives.

Collapse
 
martinbaun profile image
Martin Baun

Most underrated comment :)

Collapse
 
skorphil profile image
Philipp Rich

Sure they are, look at statistics and the job market. It's ridiculously popular and for next couple of years will remain the same.

Collapse
 
seahindeniz profile image
Sahin D.

It's simple actually; will you install jQuery on your new project? I mean, a sane and modern developer would not.
Of course React cover most of the market right now but, jQuery does too.
Will developers replace jQuery based web sites in an instant, no of course. Same with React. But eventually React will be replaced or it will evolve to how true reactive libs works by dropping its existing API. It is just matter of time

Collapse
 
infomiho profile image
Mihovil Ilakovac

The "Woah" in the promo video gets me every time! Vinny devrel of the year

Collapse
 
vincanger profile image
vincanger

haha thanks buddy

Collapse
 
ayush2390 profile image
Ayush Thakur

Amazing curation of templates

Collapse
 
miguelrodriguezp99 profile image
Miguel

how cool, thank you

Collapse
 
azeem_shafeeq profile image
Azeem Shafeeq

Amazing Stuff

Collapse
 
litlyx profile image
Antonio | CEO at Litlyx.com

Amizing!! I'm a huge fan of wasp!! I share some love from italy. I would love to let you know our open-source project. You can find more on Our Github Repo.

Love your work.

Have a nice day!!

Collapse
 
nicolab profile image
Nicolas Talle • Edited

Oh thanks man for your hard work. I love OpenSaaS, the choices of the tech stack and its website. You are a genius! Great job, I will use it on a project for my wife :)

Collapse
 
zvone187 profile image
zvone187 • Edited

I love Open SaaS!!

Collapse
 
matijasos profile image
Matija Sosic

Great job on this! It's super cool to see different stuff that people are building.

Some comments may only be visible to logged-in visitors. Sign in to view all comments.