DEV Community

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

Posted on • Edited 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

chintanonweb profile image

Step-by-Step Guide to Using React Components as Props Like a Pro

chintanonweb -

steve8708 profile image

Turn a Figma Dropdown Design Into Working React Code in 1 Minute

Steve Sewell -

eomm profile image

Master Node.js with the 5th Edition Cookbook

Manuel Spigolon -

yeshwanthvarma profile image

My Deloitte Interview Experience: On-Campus Placement Drive 2024 (Product Engineering Analyst Role)

Yeshwanth Valishetti -