I have a ReactJS app where I want to store/use some sensitive data. Usually with .env file. But I can not use that file at all. If I want to deploy with GitHub Actions this .env file should be removed from .gitignore, which is surely not what I want. I tried to create that file manually with flyctl ssh sftp shell in app folder or any other, but this .env file disappeared after fly restart or deploy. The other way to have those variables is fly secrets, but I do not understand how to access those secrets from react components. In the case of Rails app fly secrets are accessible as expected, but not for React. Currently I am stuck and need some help from community.
Hi there! When you set secrets in fly, they are available to your app as environment variables. That means a .env file that has a single line with EXAMPLE_SECRET=abc123 is identical to flyctl secrets set EXAMPLE_SECRET=abc123 and both can be accessed with process.env.EXAMPLE_SECRET in a node environment. I hope this helps clarify things. TL;DR: Fly secrets appear the same to your app as secrets set in .env.
It is quite understandable what U said. But in practice app doesnât see those fly secrets with process.env.REACT_APP_SOME_VAR. Thatâs why I am trying to hack it with .env file. But this file is vanishing after fly restart.
That very much should work. I encourage you to try exploring with:
fly ssh console -C node
Afa JS runtimes are concerned, in our app, Fly secrets are indeed accessible with process.env or Deno.env.
Can you fly ssh console -s -a <app-name> into an instance and see if printenv <K> | cut -c -8 outputs (first 8 chars of) <V> that you set with fly secrets set -a <app-name> <K>=<V>?
Also, check with fly secrets list -a <app-name> that should show digests of set secrets.
exec: ânodeâ: executable file not found in $PATH
printenv | cut -c -8 prints only âhttps://â so this do not equals to fly secrets set <K>=<V>.
I have configured secrets with commands like fly secrets set REACT_APP_SOME_KEY=https://somewebsite.com -a <app>. So without any brackets or so.
fly secrets list correctly show all my secrets digests. So as I undestood problem is that my vars are not correctly set
The cut -c -8 was only because I thought the secret is sensitive and hence you may not want it part of the output. Simply doing a printenv <K> should tell you if it equals <V>. And this <V> should be accessible with process.env.<K>. Check the output of fly ssh console -a <app-name> -C 'node -p console.log(process.env.<K>)'
exec: ânodeâ: executable file not found in $PATH
so nodeJS is not installed?
Looks like node isnât in the logged-in shellâs $PATH (weird).
Any how, as before fly ssh console -a <app-name> and exec printenv <K>. This should match what you set. And this <K> should indeed be accessible with process.env.<K> from within node unless something is mucking with it at runtime.
If you can find a way to exec node -p process.env.<K> when sshâd into the appâs VM, then that would reveal what env.<K> a node process in the appâs VM is actually seeing.
May be related:
Yes, weird. So lets try the full path:
Try:
fly ssh console -C /root/.volta/bin/node
The default behaviour of React (and most React Frameworks like NextJS) is to build Environment Variables into the application at build time: unless youâre using server-side rendering, Environment Variables will not be available to your React application because all of the code is executed within the browser â which does not have access to your server. The only responsibility of your server is to send your javascript to clients, meaning itâs impossible to have secrets exposed to React that your users cannot see. Reactâs runtime is your userâs browser.
For example, if your environment has a MY_SECRET Environment Variable with a value of s3cr3t and your source code contains process.env.MY_SECRET, then the build process will perform a string replacement of process.env.MY_SECRET so that your source code now contains value of the MY_SECRET Environment Variable (s3cr3t) which anyone accessing visiting your website will be able to see.
If youâd like to have secrets available to your react application that is not exposed to the client, then youâll need to use server-side rendering (either implement it yourself or use a framework like Remix). If you have Environment Variables that arenât secret, but you donât want to build them into your application (i.e: follow the 12factor methodology), you could perform variable value replacement on startup. You can see my project sparse as an example of achieving that.
(If youâre coming from backend development, Environment Variables are a very common gotcha in React (and other frontend frameworks) because itâs a very different paradigm. Even React frameworks like NextJS (which is both client side and server side) donât treat Environment Variables as runtime values.)
2 Likes
Can you share your Dockerfile?
I do not have a Docker file. I just used fly launch to deploy my app to Fly.io. Do I have to make some actions related also with Docker?