wasp-lang / wasp

The fastest way to develop full-stack web apps with React & Node.js.
https://wasp-lang.dev
MIT License
12.79k stars 1.14k forks source link

Implement `wasp build start` command that runs output of `wasp build` #1883

Open Martinsos opened 4 months ago

Martinsos commented 4 months ago

wasp build produces artfeacts like static files for client and Dockerfile for server, but there is no simple way to run then, you have to figure out commands to run that Dockerfile on your own, and also serve those static files correctly, set up env vars, ... .

What most frameworks have is a way to easily try out the code produced by wasp build, and we should have the same thing, it should run it for you, locally, but similarly like it would run for real, so you can that way test the built app.

sodic commented 2 months ago

How to test whether a Wasp app builds and runs correctly

I'll paste my current setup here (as discussed on Discord).

Usage

After the setup, testing a local deployment becomes as simple as:

  1. Run wasp build in the root of your project.
  2. Run srun <instanceName> from the project root to build and start the server in a Docker container. Choose anything you want for hte instanceName
  3. Open a new terminal and run crun from the project root to build and start the client.

Here's a video that shows it in action:

https://github.com/wasp-lang/wasp/assets/22752307/09d0e93d-b623-4e55-864e-84ee39808a17

Setup

Step 1: The database

I recommend you keep a PostgreSQL db running in the backgorund at all times. It's easier than wasp start db because:

You set it once and forget it (until you shut down your computer, but Docker can probably take care of that too). Setting it up is pretty easy:

  1. Make sure you have docker running.
  2. Free up port 5433 (The port is different than 5432 used by wasp start db on purpose so you can keep using that when you want).
  3. Execute the following command in a terminal somewhere and leave it running (you want need sudo if you're on a Mac):
    sudo docker run --rm --publish 5433:5432 -v my-app-data:/var/lib/postgresql/data --env POSTGRES_PASSWORD=devpass1234 postgres

Step 2: The srun script

This is the command we use to build and run the server using Docker. Again, you can remove all the sudos if you're on a Mac.

Put this script somewhere in your path and name it srun (I have all my personal scripts in ~/bin, which I make sure is in my path):

#!/bin/bash
app_name="$1"
sudo docker build -t "$app_name" .wasp/build/ && sudo docker run \
  --env DATABASE_URL="postgresql://postgres:devpass1234@localhost:5433/${app_name}-srun-db" \
  --env WASP_WEB_CLIENT_URL='http://localhost:3000' \
  --env JWT_SECRET='your-goto-jwt-secret' \
  --env GOOGLE_CLIENT_SECRET="your-goto-google-client-secret" \
  --env GOOGLE_CLIENT_ID="your-goto-google-client-id" \
  --env KEYCLOAK_CLIENT_ID="your-keycloak-client-id" \
  --env KEYCLOAK_CLIENT_SECRET="your-keycloak-client-secret" \
  --env KEYCLOAK_REALM_URL="https://your-keycloak-url.com/realms/master" \
  --env GITHUB_CLIENT_ID="your-github-client-id" \
  --env GITHUB_CLIENT_SECRET="your-github-client-secret" \
  --env WASP_SERVER_URL='http://localhost:3001' \
  --env OPENAI_API_KEY="your-open-api-key" \
  --network host \
  "$app_name"

We always set ALL possible env vars to make sure all features in all apps work out of the box (although most apps don't need most of the vars).

Step 3: The crun script

This is the command we use to build the client and serve the static files.

Put this script somewhere in your path and name it crun:

#!/bin/bash
cd .wasp/build/web-app
REACT_APP_API_URL='http://localhost:3001' npm run build
cd build
npx serve --single -p 3000