How to I set/import REACT_APP_SOME_VARIABLE_NAME for client side when in production on fly.io?
I use import.meta.env.REACT_APP_SOME_VARIABLE_NAME in my code base with setting client secret in fly.io dashboard but was not working. I also tried import.meta.env.REACT_APP_SOME_VARIABLE_NAME and process.env.REACT_APP_SOME_VARIABLE_NAME
11 Replies
Are you trying to get this ENV var from your client code, or your server code?
If you are trying to get it from the server/node code (query, action, ...), then you need to set it for server on Fly.io and then access it via
process.env.SOME_VAR_NAME.
if you are trying to access it from the client code, that won't work if code is deployed on Fly, then it is already "too late" -> client env vars are embedded into client code while it is being built with wasp build (and during development with wasp start).
Check the docs here for more info: https://wasp-lang.dev/docs/project/env-vars .Env Variables | Wasp
Environment variables are used to configure projects based on the context in which they run. This allows them to exhibit different behaviors in different environments, such as development, staging, or production.
@martinsos Hi, I am trying to get this ENV var from client code where I defined in .env.client and was working fine in development using import.meta.env.REACT_APP_SOME_VARIABLE_NAME. Can you explain what you mean by "too late"?
I looked at the document and I understand I am supposed to do run build in terminal like stated in the doc?
REACT_APP_SOME_VAR_NAME=somevalue npm run build,
This code didn't work. I went and did REACT_APP_SOME_VAR_NAME=somevalue wasp build instead and was successfully installed.
Am i doing this right?
Above, you said
with setting client secret in fly.io dashboardso I concluded from that that you set the env var in Fly.io and were then expecting the client code to read that variable, which won't work, as client code can't read any env vars that weren't embedded during the build time (
wasp build).
What should work is that you wrote, which is REACT_APP_SOME_VAR_NAME=somevalue npm run build. Variable defined in such way should be available to the client code via import.meta.env.REACT_APP_SOME_VAR_NAME.
But you said this didn't work? Watch out, I didn't use wasp build above, I instead used npm run build. That is the step after wasp build. So first you do wasp build, then you go to the generated web app and run REACT_APP_SOME_VAR_NAME=somevalue npm run build , as per instructions here: https://wasp-lang.dev/docs/advanced/deployment/manually#3-deploying-the-web-client-frontend .
Sorry if this is a bit confusing, I am just re-reading the docs while going through this and I think we could have explained this a bit better, I will try to do some improvement immediately.
Let me know if this helps!Sorry, I didn't read the doc thoroughly, I skipped the deploying manually part, I followed the https://wasp-lang.dev/docs/advanced/deployment/cli Deploying with Wasp CLI and tried to set secrets the way the doc wrote:
wasp deploy fly launch my-wasp-app mia --server-secret GOOGLE_CLIENT_ID=<...> --server-secret GOOGLE_CLIENT_SECRET=<...>
Setting client secret was not specifically mentioned so I did:
--client-secret REACT_APP_SOME_VAR_NAME=somevalue
It then showed up in the fly.io dashboaad, so I assumed that it should work
Deploying with the Wasp CLI | Wasp
Wasp CLI can deploy your full-stack application with only a single command.
Wohooo @uglybeanhead, you just became a Waspeteer level 4!
Do I need to delete the initial deployment or can I re-deploy manually on top of it?
That makes sense, I think our docs should have been clearer there and made it obvious this is not possible, otherwise it is easy to conclude what you concluded. I just made a PR with updates to docs that will make that clearer!
You should be able to just redeploy on top of it!
You are using
wasp deploy fly deploy for deployment?
As you said, we never documented how to set up client env vars yourself when using wasp deploy fly deploy, and I have to admit I am not 100% sure how would that go, I think you should be able to do REACT_APP_SOME_VAR_NAME=somevalue wasp deploy fly deploy, but I am not sure if we tested that -> not many people is adding client env vars it seems, so nobody realized this is potentially missing when going the wasp deploy fly deploy route.
I am curious, what are you adding the client env var for?Thanks so much for taking the time to help me with this!
Yes, I am using
wasp deploy fly deploy and
REACT_APP_SOME_VAR_NAME=somevalue wasp deploy fly deploy worked!
I am embedding a chatbot component in the front-end. It did say on the provider's doc that I can safely put the key on the client side as long as I whitelist the domain name in the setting. However, I want to be able to make changes and commit to Github without worrying.
Thanks so much again :boi: ❤️Awesome, glad to hear that! OK, we will have to update that in the docs -> thanks for directing our attention to this, this will help others in the future!
On the point of embedding chatbot in the frontend -> ok, so they said you can put it on client side, that makes sense.
I am wondering though, why are you providing it as an env var, why not directly into the code? Because you still don't want that key in your code? In theory, that shouldnt' matter, since you made it publicly available anyway the moment you provided it as an env var to your client code, but I can understand if you feel more comfortable this way. Stronger reason would be that you use different values of this key for developemnt vs production, but that doesn't sound like the case here.
This is a client's project so it's more about not storing these information directly in my own GitHub repo.
Ah got it, that is quite a good reason that I haven't thought of! Thanks for explaining :).