env variable undefined in fly.io
My .env.client includes the secret REACT_APP_API_HOST, and when I log it in the client locally as console.log(import.meta.env.REACT_APP_API_HOST), it returns the right value. I deployed the app to Fly.io and also set the client secret REACT_APP_API_HOST, but when I console.log it, it returns undefined.
WHy does Fly.io not read the secret, even though it's been set?
18 Replies
Hi @Kynetix. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
The reason your client environment variable (REACT_APP_API_HOST) is undefined in production on Fly.io is because of how Wasp (and Vite, which Wasp uses under the hood) handles client environment variables.
In development, .env.client works because Wasp reads it and injects those variables into the client build. However, in production, client environment variables must be provided at build time—they are not read from Fly.io secrets or environment variables after deployment. Instead, they are embedded into the static client code during the build process.
Setting REACT_APP_API_HOST as a "secret" or environment variable in the Fly.io dashboard or via flyctl only works for server-side environment variables. The client code cannot access these at runtime; it only gets what was present during the build.
How to fix it:
You need to provide the client environment variable when building the client, not after deployment. For example, before deploying, run:
Or, if you are using the Wasp CLI for deployment, you can prefix the deploy command with the variable:
This ensures that REACT_APP_API_HOST is embedded into your client code and will be available via import.meta.env.REACT_APP_API_HOST in production. Setting it as a Fly.io secret will not work for client-side code—those are only available to the server at runtime, not the client.
For more details, see the official docs: Defining Env Vars in Production and the relevant Discord discussion confirming this behavior: Discord support thread
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @Kynetix, 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?
@kapa.ai Is there an easy way to set multiple client secrets or do I have to list them all in the CLI command?
Let me check the knowledge base for you again. One moment! :books:
----------------------
There is no documented way in the knowledge sources to provide multiple client environment variables for production other than listing them all in the CLI command when building or deploying. For example:
This approach is confirmed in both the official docs and community discussions, which show that client env vars must be set as environment variables at build time, and there is no mention of a .env file or other mechanism for production builds—only for development .env.client.
So, you do need to list them all in the CLI command for production builds and deployments. If you have many variables, this can be cumbersome, but currently, that's the documented method for Wasp deployments to Fly.io Defining Env Vars in Production Discord support thread.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @Kynetix, 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?
@kapa.ai So the client secrets in Fly.io's client app are pretty much useless? Or does the server app access those?
Let me check the knowledge base for you again. One moment! :books:
----------------------
Yes, client secrets set in Fly.io's client app are essentially useless for the client-side code. Wasp's client environment variables are embedded into the client code at build time, so the client cannot access any environment variables or secrets set in Fly.io after deployment. These secrets are not available to the client at runtime.
However, the server app can access secrets set in Fly.io via the Fly.io dashboard or CLI, and these are available in your server code through process.env. The client app does not have this capability—client env vars must be provided at build time, not as Fly.io secrets.
This is confirmed in the docs and community discussions: client env vars must be set during the build process, and setting them as Fly.io secrets does not make them available to the client code. Only the server app can access Fly.io secrets at runtime Defining Env Vars in Production Discord support thread.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @Kynetix, 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?
@kapa.ai so do I have to pass the secrets as parameters everytime I build/deploy the app to Fly.io?
Let me check the knowledge base for you again. One moment! :books:
----------------------
Yes, based on the current Wasp documentation and community discussions, you do need to pass the client environment variables (secrets) as parameters every time you build or deploy the app to Fly.io. There is no documented support for using a production
.env file or another persistent mechanism for client env vars in production—these variables must be set as environment variables at build time, for example:
This is because client env vars are embedded into the client code during the build process, and there is no mechanism for the client to read secrets from Fly.io at runtime Defining Env Vars in Production Discord support thread.
If you have many variables, it can be cumbersome, but currently, this is the only documented method.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @Kynetix, 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?@kapa.ai what's the purpose of deploy_client.sh? I see it assigns REACT_APP_API_URL. Can I add other secrets definitions there?
Let me check the knowledge base for you again. One moment! :books:
----------------------
The purpose of
deploy_client.sh is to automate the process of building and deploying the Wasp client (frontend) to a platform like Railway. The script ensures that the correct environment variables—such as REACT_APP_API_URL—are set at build time, so they get embedded into the client code. This is necessary because client environment variables must be provided during the build process, not at runtime.
Yes, you can add other client environment variable definitions in the script. For example, you can set multiple variables before running the build command:
This way, any variable prefixed with REACT_APP_ will be embedded into your client code during the build, and you can manage all your client secrets in one place within the script Deploying the Client.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @Kynetix, 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?@kapa.ai if I do that, where are values like $REACT_APP_OTHER_VAR from?
Let me check the knowledge base for you again. One moment! :books:
Wohooo @Kynetix, you just became a Waspeteer level 7!
----------------------
The values like
$REACT_APP_OTHER_VAR in the deploy_client.sh script come from the environment in which you run the script. You need to set these environment variables in your shell before running the script, or you can pass them inline when executing the script. For example:
This way, the script will pick up those values and use them during the build process, embedding them into your client code. The knowledge sources confirm that client environment variables must be set as environment variables at build time, and there is no mention of a production .env file being used for this purpose Defining Env Vars in Production Deploying the Client.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @Kynetix, 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?@kapa.ai So would they be from .env.client?
Let me check the knowledge base for you again. One moment! :books:
----------------------
No, in production, the values for variables like
$REACT_APP_OTHER_VAR in your deployment script do not come from .env.client. The .env.client file is only used during development. In production, you must provide these environment variables directly in the shell or as part of the command when you run the build or deployment script. For example:
This is confirmed in the Wasp documentation, which states that in production, client environment variables must be provided to the build command and are not read from .env.client or any other file Defining Env Vars in Production.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @Kynetix, 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?Client env variables like
REACT_APP_API_HOST are build time variables that get baked into your Javscript code when building your client. You can't set them on Fly since those are runtime variables and your built client is executed in the browser not on Fly. We described this in the deployment docs: https://wasp.sh/docs/deployment/env-varsEnv Variables | Wasp
We talked about environment variables in the project setup section. If you haven't read it, make sure to check it out first. In this section, we'll talk about environment variables in the context of deploying the app.
Thanks @miho I noticed it uses deploy_client.sh, and it already has
REACT_APP_API_URL=$REACT_APP_API_URL. I added other variables there, including REACT_APP_API_HOST and deployed the client only, but it still says undefined?You'll have to share more information with me, there are many reasons why some variables are not set in the build time 🙂