W
Wasp-langβ€’5w ago
Sven

Do i need to set client env vars every deploy?

when i deploy an update to fly do i need to set the client env vars again? every deploy
9 Replies
kapa.ai
kapa.aiβ€’5w ago
Hi @Sven. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, you need to set client environment variables every time you deploy an update to Fly.io. This is because client environment variables are embedded into the client code during the build process, not at runtime. Here's why and how to do it: 1. Client env vars are embedded during build: As explained in the Wasp docs on env vars (https://wasp-lang.dev/docs/project/env-vars#defining-env-vars-in-production), client environment variables are embedded into the client code during the build and shipping process. 2. Set them before building: You need to provide these variables to the build command. For example:
REACT_APP_SOME_VAR_NAME=somevalue npm run build

REACT_APP_SOME_VAR_NAME=somevalue npm run build

3. For Fly.io deployments: When using wasp deploy fly deploy, you can set the client env vars like this:
REACT_APP_SOME_VAR_NAME=somevalue wasp deploy fly deploy

REACT_APP_SOME_VAR_NAME=somevalue wasp deploy fly deploy

This was confirmed to work in a Discord support thread (https://discord.com/channels/686873244791210014/1220070515276775516). 4. Every deploy: Since these variables are embedded during the build process, you need to set them every time you deploy an update. They are not persisted between deployments in the same way server environment variables are. Remember, client environment variables are public and readable by anyone, so never store secrets in them. For sensitive information, use server environment variables instead. ---------------------- 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?
miho
mihoβ€’5w ago
The short answer is "yes". You can put the deployment commend into the package.json script as deploy so you can run it with npm run deploy and you can then always run the correct command.
Sven
SvenOPβ€’5w ago
Ohh ye
VS
VSβ€’5w ago
Would this github action work?
name: myapp

on:
push:
branches:
- "prod"
jobs:
deploy:
name: Deploy with Wasp
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3

- name: Create .env.client file
run: |
echo "REACT_APP_GOOGLE_ANALYTICS_ID=${{ secrets.GOOGLE_ANALYTICS_ID }}" > .env.client

- uses: wasp-lang/deploy-action@main
with:
fly-token: ${{ secrets.FLY_TOKEN }}
name: myapp

on:
push:
branches:
- "prod"
jobs:
deploy:
name: Deploy with Wasp
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3

- name: Create .env.client file
run: |
echo "REACT_APP_GOOGLE_ANALYTICS_ID=${{ secrets.GOOGLE_ANALYTICS_ID }}" > .env.client

- uses: wasp-lang/deploy-action@main
with:
fly-token: ${{ secrets.FLY_TOKEN }}
Claude says Value: Your Google Analytics ID (e.g., G-1234567890) The workflow will now: Checkout your code Create a .env.client file with your Google Analytics ID from GitHub secrets Deploy using the Wasp deploy action This way, your analytics ID will be securely stored in GitHub secrets and automatically included during each deployment, without being committed to your repository. Make sure to add .env.client to your .gitignore file if you haven't already to prevent any local versions from being committed: (I'll test this a few times and report back) @miho ah would you mind just sanity checking this? I would image this would work, but I only see it working on my localhost (I see analytics on localhost, but not on my website) jk solved! Here's a github action that will work
name: appname

on:
push:
branches:
- "prod"
jobs:
deploy:
name: Deploy with Wasp
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3

- name: Create .env.client file
run: |
echo "REACT_APP_GOOGLE_ANALYTICS_ID=${{ secrets.GOOGLE_ANALYTICS_ID }}" > .env.client

- uses: wasp-lang/deploy-action@main
env:
REACT_APP_GOOGLE_ANALYTICS_ID: ${{ secrets.GOOGLE_ANALYTICS_ID }}
with:
fly-token: ${{ secrets.FLY_TOKEN }}
name: appname

on:
push:
branches:
- "prod"
jobs:
deploy:
name: Deploy with Wasp
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3

- name: Create .env.client file
run: |
echo "REACT_APP_GOOGLE_ANALYTICS_ID=${{ secrets.GOOGLE_ANALYTICS_ID }}" > .env.client

- uses: wasp-lang/deploy-action@main
env:
REACT_APP_GOOGLE_ANALYTICS_ID: ${{ secrets.GOOGLE_ANALYTICS_ID }}
with:
fly-token: ${{ secrets.FLY_TOKEN }}
miho
mihoβ€’5w ago
1. Adding .env.client won't do anything since that file is only used in development and not while building your app 2. The second bit sounds more promising to me
env:
REACT_APP_GOOGLE_ANALYTICS_ID: ${{ secrets.GOOGLE_ANALYTICS_ID }}
env:
REACT_APP_GOOGLE_ANALYTICS_ID: ${{ secrets.GOOGLE_ANALYTICS_ID }}
Have you tested the env approach? Did it work for you? πŸ™‚
VS
VSβ€’5w ago
Yes! This was the issue, I'll remove that part as well from the deployment file, the workflow works and I can see it in Google analytics. I need to adjust the workflow as well so it doesn't download the newest wasp version as well. Thanks for your review, and hope I'm giving some good code for others
miho
mihoβ€’5w ago
You are, thanks for the contribution πŸ™‚ If you want - you can write a step-by-step instructions in a github gist or smth, we can add it to https://github.com/wasp-lang/learning-materials/
GitHub
GitHub - wasp-lang/learning-materials: A place to collect some usef...
A place to collect some useful learning materials for Wasp - wasp-lang/learning-materials
VS
VSβ€’5w ago
Definitely, I'm headed on vacation tomorrow, but I will definitely do this, there's so much I've learned. Wasp is awesome, Where is you all's by you a coffee link?
miho
mihoβ€’5w ago
We appreciate the kind words πŸ™‚ if you want to show your support by buying us a cup of coffee, we have Github Sponsors set up: https://github.com/sponsors/wasp-lang
GitHub
Sponsor @wasp-lang on GitHub Sponsors
Wasp is a Rails-like web app framework for React, Node.js and Prisma. Develop your app in a day and deploy it with a single CLI command.
Want results from more Discord servers?
Add your server