Wasp•3mo ago

Deploying Client Side Env Variables/Incorrect Useage?

I had client side env variables successfully running in production for a few days before they seemingly "turned off" (are undefined) - I didn't change anything (that I know of) This is how I use the variables

  function isRunningLocally() {
    return window.location.hostname === 'localhost';
  }
  if (!isRunningLocally()) {
    // this isn't running
    posthog.init(import.meta.env.REACT_APP_PUBLIC_POSTHOG_KEY!, {
      api_host: import.meta.env.REACT_APP_PUBLIC_POSTHOG_HOST,
      person_profiles: 'always',
    });
  }

  function isRunningLocally() {
    return window.location.hostname === 'localhost';
  }
  if (!isRunningLocally()) {
    // this isn't running
    posthog.init(import.meta.env.REACT_APP_PUBLIC_POSTHOG_KEY!, {
      api_host: import.meta.env.REACT_APP_PUBLIC_POSTHOG_HOST,
      person_profiles: 'always',
    });
  }

I set them via the REACT_APP_ANOTHER_VAR=somevalue wasp deploy fly deploy syntax as mentioned in the docs here - https://wasp-lang.dev/docs/advanced/deployment/cli#environment-variables-1 Is there anything I might have done wrong here?

Deploying with the Wasp CLI | Wasp

Wasp CLI can deploy your full-stack application with only a single command.

12 Replies

kapa.ai•3mo ago

Hi @CamBlackwood. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided, it seems like you are correctly setting the environment variables for the client side during the build process. However, there are a few things you might want to check: 1. Environment Variable Prefix: Ensure that your environment variables are prefixed with REACT_APP_. This is a requirement for Wasp to pick them up. For example: REACT_APP_SOME_VAR_NAME=... source (https://wasp-lang.dev/docs/project/env-vars). 2. Deployment Process: Make sure you are setting the environment variables during the build process. This is done by prefixing the build command with your environment variables, like so: REACT_APP_SOME_VAR_NAME=somevalue wasp deploy fly deploy. This is because client environment variables are embedded into the client code during the build and shipping process source (https://wasp-lang.dev/docs/project/env-vars#defining-env-vars-in-production). 3. Accessing Environment Variables: Ensure you are accessing the environment variables correctly in your code. In the client code, you should be using import.meta.env.REACT_APP_SOME_VAR_NAME source (https://wasp-lang.dev/docs/project/env-vars). 4. Environment Variable Visibility: Remember that client environment variables are public and readable by anyone. Therefore, you should never store secrets in them source (https://wasp-lang.dev/docs/project/env-vars). If you've checked all of these and your environment variables are still not working, it might be a good idea to reach out to the Wasp community for further assistance. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @CamBlackwood, 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?

CamBlackwoodOP•3mo ago

Sorry @kapa.ai , seems I followed everything right this time! I did notice in the logs fly shut down my client machine a couple of times. Could that be related?

kapa.ai•3mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- It's possible that the shutdowns of your client machine on Fly.io could be related to the issue you're experiencing. However, without more specific information or error messages, it's hard to say for certain. Here are a few things you could check: 1. Logs: Review the logs from Fly.io for any error messages or warnings that might indicate a problem with the environment variables or the build process. 2. Deployment Process: Ensure that the environment variables are being set each time you deploy. If the client machine was shut down and then restarted, it's possible that the environment variables were not set correctly during the restart. 3. Fly.io Configuration: Check your Fly.io configuration to ensure that it's set up correctly for your Wasp app. You might find the Fly.io documentation (https://wasp-lang.dev/docs/advanced/deployment/cli#flyio-regions) helpful for this. If you're still having trouble, you might want to consider reaching out to the Wasp community or Fly.io support for further assistance. They might be able to provide more specific guidance based on the details of your setup and the exact issues you're experiencing. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @CamBlackwood, 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•3mo ago

This is quite interesting 🤔 1. You deployed the proper way I see. 2. You didn't redeploy in the meantime? 3. The alleged current version is live at https://microinfluencer.club right now? 😄

Microinfluencer

Connecting niche creative voices with ambitious brands

CamBlackwoodOP•3mo ago

@miho Yes exactly. I believe I may have done one redeployment in the meantime, but this didn't modify anything to do with the client vars

miho•3mo ago

Looking through the deployed bundle I see the following code:

Cg.init(void 0,{api_host:void 0,person_profiles:"always"})

Cg.init(void 0,{api_host:void 0,person_profiles:"always"})

If I understand Vite correctly, void 0 here means - "I didn't find the env var, I put some empty value"

miho•3mo ago

1. Could you check the Activity bit in the dashboard? When was the latest Activity 2. Could you retry wasp deploy fly deploy one more time with the env vars 🙂

CamBlackwoodOP•3mo ago

will do 🙂 last release was v67 1 hour ago am gonna redeploy now that appeared to fix it @miho - in the future, do I need to specifiy the env variables every deployment?

miho•3mo ago

Now I can see {api_host:"https://eu.i.posthog.com",person_profiles:"always"} yep 😄

in the future, do I need to specifiy the env variables every deployment?

Yes, because the client env vars are build time env vars. Which means, every time the client is built - the vars need to be provided: https://wasp-lang.dev/docs/project/env-vars#client-env-vars-1 I'd recommend create a small script in your app folder smth like:

REACT_APP_VAR=x wasp deploy fly deploy

REACT_APP_VAR=x wasp deploy fly deploy

Name it deploy.sh, run chmod +x deploy.sh and then whenever you redeploy, run that with ./deploy.sh. This way you'll never forget the vars 🙂 Ideally, you'd define the vars somehow for Wasp to know about them and then before building Wasp could validate them for you! 😄 That would be cool @martinsos what do you think?

CamBlackwoodOP•3mo ago

Ahh, I see, that makes sense, thanks mate! I agree, that sounds like a really cool feature

CamBlackwoodOP•3mo ago

I proposed a minor change to the docs on that page to clarify that you need to do it each time, if you think it's a good idea to add it - https://github.com/wasp-lang/wasp/pull/2314

GitHub

Update cli.md by Reikon95 · Pull Request #2314 · wasp-lang/wasp

Update the CLI deployment docs to reflect needing to add client side variables every time you deploy Description Describe your PR! If it fixes specific issue, mention it with "Fixes # (is...

martinsos•3mo ago

Yes, I think that would be the best solution! Adding it here: https://github.com/wasp-lang/wasp/issues/2086 .

GitHub

Provide better error messaging when env vars are missing in product...

Spin off based on this coment: #175 (comment) . Wasp should also be checking for required env vars when deployed to production. It happens sometimes to Wasp users that they forget about an env var ...

Gaming

Programming

Deploying Client Side Env Variables/Incorrect Useage?