When building AI Blog Articles, 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

View development database in Prisma:

wasp db studio

Start development app:

cd app && wasp start

Start development blog:

cd blog && npm install && npm run dev

Run frontend deployment commands

Locate the folder:

cd .wasp/build/web-app

Install dependencies:

npm install && REACT_APP_API_URL={your-server-URL} npm run build

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"

Run backend & db deployment commands

Locate the folder:

cd .wasp/build/

Deploy preview:

flyctl deploy --remote-only --config ../../src/shared/fly-server.toml

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

Build the app:

npm run build

Deploy preview:

netlify deploy

Deploy to production:

netlify deploy --prod

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