DEV Community

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

Posted on • Edited on

Getting started with Open SaaS

When building Article Generation 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!

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

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!

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay