Set up client environment variables and deployed, but not defined on prod?
I've integrated Posthog into my wasp application, but whilst it works locally with my environment variables, it does not work when deployed.
As mentioned in the docs, I am using the correct syntax - eg. import.meta.env.REACT_APP_PUBLIC_POSTHOG_HOST,
I have also made sure to deploy these new secrets to prod, and when requesting them via fly secrets list -a <app name>, they come back.
However, when attempting to initalise posthog on prod, it throws an error saying the API key is undefined
6 Replies
Hi @CamBlackwood. 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've done the right steps in defining your environment variables for the client side. However, it's important to note 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 (such as secret API keys) [^1^].
To enable Wasp to pick them up, client environment variables must be prefixed with
REACT_APP_, for example: REACT_APP_SOME_VAR_NAME=... [^1^].
When deploying, you should provide them to the build command, for example:
What happens behind the scenes is that Wasp will replace all occurrences of import.meta.env.REACT_APP_SOME_VAR_NAME with the value you provided. This is done during the build process, so the value is embedded into the client code [^1^].
If you're deploying using wasp deploy fly deploy, you can try setting the environment variable as a prefix to the deploy command, like this:
This method has been reported to work by a community member in a Discord support thread [^3^].
If you're still encountering issues, it might be worth checking the related GitHub issues for potential solutions or known bugs [^2^][^4^][^5^][^6^].
^1^]: [Wasp Docs - Env Variables (https://wasp-lang.dev/docs/project/env-vars)
^2^]: [GitHub Issue - Client side env vars are getting loaded from .env.server? (https://github.com/wasp-lang/wasp/issues/1354)
^3^]: [Discord Support Thread - How to set/import REACT_APP_SOME_VARIABLE_NAME for client side when in production on fly.io? (https://discord.com/channels/686873244791210014/1220070515276775516)
^4^]: [GitHub Issue - Document our environment variables (https://github.com/wasp-lang/wasp/issues/1894)
^5^]: [GitHub Issue - When building the client for deployment, API requests are invalid if wasp dev puts / at the end of the backend server URL (https://github.com/wasp-lang/wasp/issues/332)
^6^]: [GitHub Issue - Environment variable not found: DATABASE_URL error printed when building wasp (https://github.com/wasp-lang/wasp/issues/1321)
----------------------
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?thanks @kapa.ai - I assume there's no way I can set it in my server environment variables as it's required to build the app
Let me check the knowledge base for you. One moment! :books:
----------------------
Yes, you're correct. Server environment variables are different from client environment variables. Server environment variables can store secret values (e.g., secret API keys) since they are not publicly readable. You can define them without any special prefix, such as
SOME_VAR_NAME=... [^1^].
However, these server environment variables are not accessible on the client side. They are used for server-side configurations and secrets that should not be exposed to the public.
If you need to use a value both on the server side and during the build process for the client side, you would need to define it in both places: once in the server environment variables (in the .env.server file or through the deployment tool for production), and once in the client environment variables (as a REACT_APP_ prefixed variable during the build process).
Remember, any client-side environment variables will be embedded into the client code and will be publicly readable, so you should never store secrets in them [^1^].
^1^]: [Wasp Docs - Env Variables (https://wasp-lang.dev/docs/project/env-vars)
----------------------
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?Thanks @kapa.ai , your suggestion:
https://discord.com/channels/686873244791210014/1220070515276775516
Was the thread that solved the issue 🙂
Let me check the knowledge base for you. One moment! :books:
----------------------
I'm glad to hear that the suggestion from the Discord support thread helped solve your issue! It's always great to see community solutions in action. If you have any more questions or run into any other issues, feel free to ask. Happy coding with Wasp!
----------------------
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?
Hey Cam, thanks for educating our bot!