3 ms·

When will React env variables work on docker images without any bullshit hacks? I mean when I have my frontend and backend in separate pods, use nginx to serve

When will React env variables work on docker images without any bullshit hacks? I mean when I have my frontend and backend in separate pods, use nginx to serve the frontend in kubernetes and want use BACKEND_URL as an env. Why is it so goddamn hard. Any high IQ people have tips on how to get this to work without some weird injections before building the image? Me dumb.

batmansmk 3y ago
hen I see comments like you, Im so glad Kubernetes exist, because I know some of our competitors may be wasting precious cycles trying to make the tech work instead of shipping value. I pretentiously claim that 90% of people using Kubernetes should write efficient algorithms, db requests and maaaaybe look at a CDN and/or buy a bigger server. Like, are your servers really that busy? Stack overflow is 9 servers.... I can testify of some very large, compute intensive service being run on just a couple of servers with the right tech and less abstraction :)
- janmarsal 3y ago
  Who do you think I am? I can just hardcode the values and I waste no time on this. However, it's not an elegant solution, so that's why I'm asking. Also, I wouldn't even be using kubernetes normally but this one project just happens to require it for 3rd party reasons that are out of my control. I'm sure you feel very smug but that's just delusion for the most part.
SkyPuncher 3y ago
There are two things that make this annoying: * most people are pre-building their packages. That means you can’t really modify anything at run time. It also means it can be extremely tedious to test changes and wait for the build process. * there’s a string of places you have to properly “expose” ENV variables to a layer deeper down. This includes some build condos to make sure you’re not exposing sensitive BE configs. It can be challenging debugging the intermediate steps.
aastronaut 3y ago
I'm honestly a bit confused by this statement, as "React env variables" can mean various things, depending on your setup. Backend and frontend can be separate runtimes... The backend could be an API-only-server and an OS process with all permissions that come with it (reading env vars during execution as it pleases). The frontend, eg. a React SPA, could just be a bunch of built HTML/CSS/JS-files (type-checked, bundled, minified, etc.), served through a static file server (separate backend, nginx?) and interpreted through a browser engine on the client. Are you asking for nginx to parse the served HTML/CSS/JS-files and replace unknown placeholders with env var values? If so you are prob asking for a SSR framework[0], meaning a backend that treats a React project similar to template files, and is able to inject env vars? [0]: Next.js - https://nextjs.org/docs/app/building-your-application/configuring/environment-variables https://nextjs.org/docs/app/building-your-application/config...
CharanSriram 3y ago
Might be misunderstanding the problem, but what’s stopping you from using env variables like you specified? Create React App has this baked in by prefixing env variables with REACT_APP [1]; I’m assuming other configurations can achieve the same. [1] https://create-react-app.dev/docs/adding-custom-environment-variables/ https://create-react-app.dev/docs/adding-custom-environment-...
fckthisguy 3y ago
I'm not 100% sure the problem you're trying to solve, but I've solved a similar sounding one that may be of use to you too. We needed to set env vars on React applications (the frontend) inside Docker containers. The containers were going to be built in CI/CD, and we didn't want different builds for each environment. We solved this by adding a small JS script that is included in the base HTML. It pushes env vars into the window object, so they're accessible from window.env. The JS file is generated by a Bash script that's ran whenever the container starts (by modifying the entry-point.sh file used by Nginx's Docker image). The Bash script loads enumerates any environment variable with a given prefix. Docker already allows you to set runtime environment variables from the run command, or via Docker Compose. Im the end, the developer experience comes down to "docker run image:tag -e PREFIX_FOO=BAR".

batmansmk 3y ago

hen I see comments like you, Im so glad Kubernetes exist, because I know some of our competitors may be wasting precious cycles trying to make the tech work instead of shipping value. I pretentiously claim that 90% of people using Kubernetes should write efficient algorithms, db requests and maaaaybe look at a CDN and/or buy a bigger server. Like, are your servers really that busy? Stack overflow is 9 servers.... I can testify of some very large, compute intensive service being run on just a couple of servers with the right tech and less abstraction :)

janmarsal 3y ago
Who do you think I am? I can just hardcode the values and I waste no time on this. However, it's not an elegant solution, so that's why I'm asking. Also, I wouldn't even be using kubernetes normally but this one project just happens to require it for 3rd party reasons that are out of my control. I'm sure you feel very smug but that's just delusion for the most part.

SkyPuncher 3y ago

There are two things that make this annoying: * most people are pre-building their packages. That means you can’t really modify anything at run time. It also means it can be extremely tedious to test changes and wait for the build process. * there’s a string of places you have to properly “expose” ENV variables to a layer deeper down. This includes some build condos to make sure you’re not exposing sensitive BE configs. It can be challenging debugging the intermediate steps.

aastronaut 3y ago

I'm honestly a bit confused by this statement, as "React env variables" can mean various things, depending on your setup. Backend and frontend can be separate runtimes... The backend could be an API-only-server and an OS process with all permissions that come with it (reading env vars during execution as it pleases). The frontend, eg. a React SPA, could just be a bunch of built HTML/CSS/JS-files (type-checked, bundled, minified, etc.), served through a static file server (separate backend, nginx?) and interpreted through a browser engine on the client. Are you asking for nginx to parse the served HTML/CSS/JS-files and replace unknown placeholders with env var values? If so you are prob asking for a SSR framework[0], meaning a backend that treats a React project similar to template files, and is able to inject env vars? [0]: Next.js - https://nextjs.org/docs/app/building-your-application/configuring/environment-variables https://nextjs.org/docs/app/building-your-application/config...

CharanSriram 3y ago

Might be misunderstanding the problem, but what’s stopping you from using env variables like you specified? Create React App has this baked in by prefixing env variables with REACT_APP [1]; I’m assuming other configurations can achieve the same. [1] https://create-react-app.dev/docs/adding-custom-environment-variables/ https://create-react-app.dev/docs/adding-custom-environment-...

fckthisguy 3y ago

I'm not 100% sure the problem you're trying to solve, but I've solved a similar sounding one that may be of use to you too. We needed to set env vars on React applications (the frontend) inside Docker containers. The containers were going to be built in CI/CD, and we didn't want different builds for each environment. We solved this by adding a small JS script that is included in the base HTML. It pushes env vars into the window object, so they're accessible from window.env. The JS file is generated by a Bash script that's ran whenever the container starts (by modifying the entry-point.sh file used by Nginx's Docker image). The Bash script loads enumerates any environment variable with a given prefix. Docker already allows you to set runtime environment variables from the run command, or via Docker Compose. Im the end, the developer experience comes down to "docker run image:tag -e PREFIX_FOO=BAR".