DEV Community

Cover image for Getting started with Open SaaS
Ricardo Batista
Ricardo Batista

Posted on • Updated on

Getting started with Open SaaS

#wasp #node #react

When building AI Blog Articles and Meeting Reminders, I decided to get started as fast as possible. So I looked for a free boilerplate and stumbled upon Open SaaS, which used YC-backed Wasp. It is a full-stack React + NodeJS + Prisma that takes 8 hours to get started with.

Their documentation is brilliant, and great support over Discord. I decided to list here the full walkthrough on how to set up the development environment so that it is a simple copy-paste for you.

For frontend deployment, I used Netlify (for the generous free package) and the recommended fly.io for server + database (also cheap package).

Run development commands

Start development database:

cd app && wasp start db
Enter fullscreen mode Exit fullscreen mode

View development database in Prisma:

wasp db studio
Enter fullscreen mode Exit fullscreen mode

Start development app:

cd app && wasp start
Enter fullscreen mode Exit fullscreen mode

Start development blog:

cd blog && npm install && npm run dev
Enter fullscreen mode Exit fullscreen mode

Run frontend deployment commands

Locate the folder:

cd .wasp/build/web-app
Enter fullscreen mode Exit fullscreen mode

Install dependencies:

npm install && REACT_APP_API_URL={your-server-URL} npm run build
Enter fullscreen mode Exit fullscreen mode

Deploy preview:

netlify deploy

Deploy to production:

netlify deploy --prod

Every time there is a Wasp app rebuild (with wasp build), it will remove your .wasp/build/ directory. Until the GitHub issue is fixed, you need to update netlify.toml’s publish line to:

  publish = ".wasp/build/web-app/build"
Enter fullscreen mode Exit fullscreen mode

Run backend & db deployment commands

Locate the folder:

cd .wasp/build/
Enter fullscreen mode Exit fullscreen mode

Deploy preview:

flyctl deploy --remote-only --config ../../src/shared/fly-server.toml
Enter fullscreen mode Exit fullscreen mode

Every time there is a Wasp app rebuild (with wasp build), it will remove your .wasp/build/ directory. That’s why there is a copy of the file in app/src/shared/.

Run blog deployment commands

Locate the folder:

cd blog
Enter fullscreen mode Exit fullscreen mode

Build the app:

npm run build
Enter fullscreen mode Exit fullscreen mode

Deploy preview:

netlify deploy
Enter fullscreen mode Exit fullscreen mode

Deploy to production:

netlify deploy --prod
Enter fullscreen mode Exit fullscreen mode

Good luck with building, hopefully it will be faster now!

Top comments (1)

Collapse
 
ramzi_mohammed_c00492c89a profile image
Ramzi Mohammed •

Hello everyone,

I've been experimenting with OpenSaaS to develop a web app for file sharing, but I’ve encountered numerous challenges along the way. As a beginner in web app development, I’ve been relying mostly on ChatGPT for guidance, but I realize I could really benefit from the mentorship of someone experienced in the community.

I’m looking for a mentor who could take me under their wing and help me navigate the complexities of building this app. It would be an amazing opportunity to learn, improve my skills, and create something meaningful with the support of an expert.

I appreciate any guidance or mentorship offered!

Thank you!

Read next

vrinch profile image

State Management in React Native: Context API vs. Redux

Vincent Odukwe -

riyon_sebastian profile image

Building a Robust Frontend Error-Handling System with Axios and Custom Hooks

Riyon Sebastian -

usman_awan_003 profile image

Optimizing React Performance with Concurrent Mode and Key APIs

Usman Awan -

abdulkadir_saloum_770fee4 profile image

Exploring InstantDB: A New Approach to Local-First Databases

Abdulkadir Saloum -