How do i properly deploy?
I am really stuck at the moment on how to deploy. In the docs there are alot of different pages that say alot. I am not sure what and how to pass through the environment variables i set....
For example the DATABASE_URL i can only set that after i deployed right? also WASP_WEB_CLIENT_URL, this is also known after i deployed right and WASP_SERVER_URL?
My main question is what env vars do I need to set before running any command and what after? And what environment variables do I need to set myself with that
secrets set or --server-secret ?30 Replies
Hi @Sven. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Deploying a Wasp app involves several steps, including generating deployable code, deploying the API server (backend), deploying the web client (frontend), and deploying a PostgreSQL database. Here's a general overview of the process:
1. Generating Deployable Code: Run the command
wasp build to generate deployable code for the whole app in the .wasp/build/ directory. Note that you'll need to switch to PostgreSQL if you're using SQLite as a database (source (https://wasp-lang.dev/docs/advanced/deployment/manually#deploying-a-wasp-app)).
2. Deploying the API Server (backend): Deploy the Docker image defined in the .wasp/build directory to a hosting provider and ensure the required environment variables are correctly set up. The mechanism for setting these up is specific to each provider.
3. Deploying the web client (frontend): This process will depend on your chosen hosting provider.
4. Deploying a PostgreSQL database: This process will also depend on your chosen hosting provider.
Regarding your question about environment variables, here are the ones your server will be looking for:
- DATABASE_URL: The URL of the PostgreSQL database your app will use. This is required and should be set after you've set up your database (source (https://wasp-lang.dev/docs/advanced/deployment/manually#environment-variables)).
- WASP_WEB_CLIENT_URL: The URL where you plan to deploy your frontend app. This is required and should be set after you've deployed your frontend app (source (https://wasp-lang.dev/docs/advanced/deployment/manually#environment-variables)).
- WASP_SERVER_URL: The URL where the server is running. This is required and should be set after you've deployed your server (source (https://wasp-lang.dev/docs/advanced/deployment/manually#environment-variables)).
- JWT_SECRET: You only need this environment variable if you're using Wasp's auth features. Set it to a random string at least 32 characters long (source (https://wasp-lang.dev/docs/advanced/deployment/manually#environment-variables)).
- PORT: The server's HTTP port number. This is where the server listens for requests (default: 3001).
Remember, the way you provide these environment variables depends on where you deploy your Wasp project. For example, if you deploy your project to Fly.io, you can define them using the flyctl CLI tool (source (https://wasp-lang.dev/docs/project/env-vars#defining-env-vars-in-production)).
For more detailed instructions on deploying to specific providers, you can check the deployment section (https://wasp-lang.dev/docs/advanced/deployment/manually) of the Wasp docs.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @Sven, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist:
Perhaps try again in 15mins?How it's going @Sven ?
Still not well
But besides that fine
Where are you stuck? Where are you deploying?
Fly.io is my choice
And im just stuck at not knowing what to do with what env vars
Like for example in the client.env there is a google analytics thing do i need to fill this in? Or?
You should pass them once deployed (server & client vars)
Are you working with the OpenSaaS template?
Yesss
All of them?
and how?
I have all env vars there where initially + 1 server var and + 1 client var <- i defined myseld
Now some optional vars i commented out like plausible and google analytics on server side.
Or do i need to set them?
@kapa.ai Hey! I just deployed my OpenSaaS app on Fly! I need to pass the environment variables (env and server).
My server vars are:
STRIPE_KEY=sk_test_51
STRIPE_WEBHOOK_SECRET=whsec_05
PLAUSIBLE_API_KEY=_lgs-33
And my client vars are:
REACT_APP_STRIPE_CUSTOMER_PORTAL=https://billing.stripe.com/p/login/test_9AQ
REACT_APP_GOOGLE_ANALYTICS_ID=G-SM6
I also want to set my WASP_WEB_CLIENT_URL to: https://thisismydomain.comLet me check the knowledge base for you again. One moment! :books:
----------------------
Great! To set environment variables for your Wasp app deployed on Fly.io, you can use the
flyctl CLI tool.
For your server environment variables, you can set them using the following commands:
For your client environment variables, you should provide them to the build command. However, remember that client environment variables are embedded into the client code during the build and shipping process, making them public and readable by anyone. Therefore, you should never store secrets in them. Here's an example of how you can provide them:
Finally, to set your WASP_WEB_CLIENT_URL, you can use the flyctl CLI tool again:
Remember, these environment variables are read from the server code using process.env.VAR_NAME and from the client code using import.meta.env.VAR_NAME (source (https://wasp-lang.dev/docs/project/env-vars)).
For more details on how to define environment variables for each deployment option, you can check the deployment section (https://wasp-lang.dev/docs/advanced/deployment/manually) of the Wasp docs.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @NEROX, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist:
Perhaps try again in 15mins?Here you have some syntax examples :)
Ah okay thanks for them
Wait
These are my env vars. I dont use Google auth so i left
client_id and client_secret for them as it is. same for this client var REACT_APP_GOOGLE_ANALYTICS_ID
also shouldn't REACT_APP_STRIPE_CUSTOMER_PORTAL be a server var?In this case taking into account your .env.server, the command would look like this:
flyctl secrets set ENCRYPTION_KEY=xxxx STRIPE_API_KEY=xxx STRIPE_WEBHOOK_SECRET=xxxx etc...
Start with flyctl secrets set and start adding the vars to the comand
The Stripe user portal variable is a client variable as it is used to take the user to the payment portal.ah okay and after deployment?
hmm in testing it is a server var? How do you know this?
and is this a problem too? like did i set all neseccary env vars?
Yes
No, just remember that in
main.wasp there should be the Google Auth lines commented outyeah i did thanks
for this you said, in the test section it says it is a server var. Why in deployment does it become a client var? How could i know this?
ok, did you test if the payments, manage subscription, cancel, etc... worked locally? Have you been able to subscribe and then access the Stripe customer portal and test that you can cancel?
Yeah i did
I could access the manage subscription page
Through my app
Then my mistake, passing it also as
flyctl secrets set
STRIPE_CUSTOMER_PORTAL_URL=XXX
I just remembered that was from an earlier version of OpenSaaS:sadboi:Ahh ahah
Thanks alot for your help
Just to he sure the database url and those other things are set by wasp cli if i deploy though there?
Yep, as far as I can see you shouldn't have any problems deploying
Oksy cool
And if i deploy where and what logs to check inorder to debug of somtehing doesnt work
From the Fly panel. You will see after deploying 3 apps (client, sever and db)
And in the left side (inside of any app) you will be able to see both real time logs and a log :)
Thanks alot
how can i properly set cient side variables after i deployed.
i ran
wasp deploy fly launch my-wasp-app mia but i forgot to pass through the 1 client var i have
this command deployed server, db and client for me and set the databuse_url,jwt, port , and wasp_server_url for me. SO now i need to add my own server vars and then this client var i forgot? how could i do the client varRegarding the server env vars, you can pass them via the command of
flyctl secrets set. Regarding that on client env var, it's a very good questionKapa is wrong in this case. Follow the docs instead.
in the docs we have a section about deploying client-side environment variables: https://docs.opensaas.sh/guides/deploying/#deploying-to-flyio
OpenSaaS.sh
Deploying
Open SaaS is a free, open-source, full-stack SaaS starter kit for React + NodeJS.
so in this case you'd run
REACT_APP_EXAMPLE_VAR=xyz-123 wasp deploy fly deployThanks alot