Wasp•2mo ago

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

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•2mo 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.

SvenOP•2mo ago

Ohh ye

VS•2mo 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•2mo 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•2mo 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•2mo 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•2mo 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•2mo 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.

Gaming

Programming

Do i need to set client env vars every deploy?