Can't set client environment when deploying to Fly.io
I've followed the docs https://wasp-lang.dev/docs/advanced/deployment/cli#client to set the client environment variable when deploying to fly.io
I run REACT_APP_API_URL=https://api.myapp.com wasp deploy fly deploy
But when it finished deploying to server and starts to deploy to client, it still execute below command
🚀 Deploying your client now...
$ cd /Users/xxxx/xxxx/app/.wasp/build/web-app
🚀 Building web client for production...
$ npm install
up to date, audited 146 packages in 986ms
19 packages are looking for funding
run
npm fund for details
found 0 vulnerabilities
$ REACT_APP_API_URL=https://myproject-server.fly.dev npm run build
And eventually the REACT_APP_API_URL did changed to https://myproject-server.fly.dev instead of my intended value, any clues how to fix this? Appreciate your help!9 Replies
Hi @Ron. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
It seems like you're trying to set a client-side environment variable during the deployment process. However, according to the Wasp documentation (https://wasp-lang.dev/docs/advanced/deployment/manually#3-deploying-the-web-client-frontend) and a support thread (https://discord.com/channels/686873244791210014/1220070515276775516) on Discord, client-side environment variables need to be set during the build process, not during deployment.
Here's how you can do it:
1. First, you need to build your Wasp project with the environment variable set. Navigate to your project directory and run the following command:
2. After the build process is complete, navigate to the
.wasp/build/ directory and run the following command to build the web app:
3. Now, you can deploy your Wasp app to Fly.io. While still in the .wasp/build/ directory, run:
This will deploy your Wasp app to <https://<app-name>.fly.dev.>
4. If you haven't done so already, you can deploy your client and set the client URL by running:
Remember, the environment variable REACT_APP_API_URL should now be available in your client-side code via import.meta.env.REACT_APP_API_URL.
Let me know if this helps!
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @Ron, 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?@Wasp Team I can solve this by deploying manually, just no clue how to fix the wasp deploy fly deploy command
Hey Ron, our team doesn't work on Sunday, but rest assured that as soon as our engineers are back online, you'll hear back from them 🙂
Appreciate it, sorry for the ping, thank you for answering!
Hmmm, this is strange. Thanks for reporting @Ron
What happens if you define your variable in
.env.client: https://wasp-lang.dev/docs/project/env-vars#1-using-env-dotenv-files
Does that solve the issue?Done both adding the envrionment variable to the front and defining in the .env.client, both didn't work, just used the default fly.dev url while building it 😭
Hey @Ron, seems like this is a known issue: https://github.com/wasp-lang/wasp/issues/2233 and it's in the works as we speak. @miho Any known workarounds?
All right, wasn't aware of this! We even have a PR for it open but isn't merged yet
Sounds good, thank you for this!