Change Environmet Variables at runtime (React, vite) with docker and nginx

Question

at work I need to make it possible to change the environmet variables at runtime, from an Azure web service, through docker and nginx. I tried this, this and some similar solutions, but I couln't get any of them to work.

I also couldn't find any solution online or any article/thread/post that explained if this is even possible, I only always find the text that vite statically replaces the env variables at build time.

During our CI/CD pipeline vite gets the env variables but our Azure admins want to be able to configure them from Azure, just for the case of it.

Does anyone know if this is possible and or maybe has a solution or some help, please ? :)

CodeNewbie · Answer 1 · 2022-10-08T17:18:03.753

It is not possible to dynamically inject Vite env variables. But what is possible, is to change the window object variables (assign them on runtime).
WARNING!!! DO NOT EXPOSE ANY SENSITIVE VARIABLES THROUGH THE WINDOW OBJECT. YOUR FRONT-END APPLICATION SOURCE IS VISIBLE TO ANYONE USING IT

Steps:

Create your desired env files and place them in <rootDir>/public. Let's call them env.js and env-prod.js.
Inside your env.js and env-prod.js You want to assign your desired variables using var keyword. Also, you will have to reference these values in your source like window.MY_VAR to be able to use them.
Create a script tag inside your <rootDir>/index.html like this:
<script type="text/javascript" src="./env.js"></script>.
IMPORTANT!!! type="text/javascript" is important, because if You specify module, Vite will include your env.js source inside your minified index.js file.
Vite config (optional):

  plugins: [react(), tsConfigPath()],
  build: {
    emptyOutDir: true, // deletes the dist folder before building
  },
});

How to serve the env files on runtime. Create a node server which will serve your frontend application. But before serving the env.js file, depending on our process.env.ENVIRONMENT you can now choose which env.js to serve. Let's say my node server file is stored at <rootDir>/server/server.js:

const express = require("express");
const path = require("path");

const app = express();

const env = process.env.ENVIRONMENT || "";

console.log("ENVIRONMENT:", env);

const envFile = path.resolve("public", env ? `env-${env}.js` : "env.js");

const indexFile = path.resolve("dist", "index.html");

app.use((req, res, next) => {
  const url = req.originalUrl;
  if (url.includes("env.js")) {
    console.log("sending", envFile);
    // instead of env.js we send our desired env file
    res.sendFile(envFile);
    return;
  }
  next();
});

app.use(express.static(path.resolve("dist")));
app.get("*", (req, res) => {
  res.sendFile(indexFile);
});

app.listen(8000);

Serve your application build while running node ./server/sever.js command in your terminal.
Finally:
my env.js contains var RUNTIME_VAR = 'test'
my env-prod.js contains var RUNTIME_VAR = 'prod'
After I set my process.env.ENVIRONMENT to prod. I get this file served:

score 3 · Accepted Answer · edited Mar 29 '23 at 02:12

My Solution is that it schould work with the links from my question. I use this approach and it works, the only thing that needs to be thought of is to use a different variable name/prefix (e.g. "APP_...") so vite doesn't change them at build time. I created a config file wich resolves the variable, for example if the app is in production than it uses the new Variable "APP_.."(which comes injected from nginx/ docker) or use "VITE_..."-variable if "APP_.." is undefined.

score 0 · Answer 3 · answered Mar 26 '22 at 05:09

I came up with a solution and published it as packages to the npm registry.

With this solution, you don't need to change any code:

// src/index.js
console.log(`API base URL is: ${import.meta.env.API_BASE_URL}.`);

It separate the build step out into two build step:

During production it will be statically replaced import.meta.env with a placeholder:

// dist/index.js
console.log(
  `API base URL is: ${"__import_meta_env_placeholder__".API_BASE_URL}.`
);

You can then run the package's CLI anywhere to replace the placeholders with your environment variables:

// dist/index.js
console.log(
  `API base URL is: ${{ API_BASE_URL: "https://httpbin.org" }.API_BASE_URL}.`
);
// > API base URL is: https://httpbin.org.

Here is the documentation site: https://iendeavor.github.io/import-meta-env/.

Feel free to provide any feedback.

Mohammad Imani · Answer 4 · 2022-10-22T12:11:31.707

0

First create .env file in project root,then define a variable in .env

e.g:VITE_APP_any = 'any'

and then add following line to vite.config.js :

export default defineConfig(({ command, mode }) => {

  const env = loadEnv(mode, process.cwd(), ""); //this line

  return { 
.
.
.

For usage can use following line

import.meta.env.VITE_APP_any

Or

process.env.VITE_APP_any

edited Oct 22 '22 at 12:11

answered Oct 22 '22 at 12:06

Mohammad Imani

9
6

score 0 · Answer 5 · answered Feb 01 '23 at 19:46

here is the Dockerfile

FROM node:alpine3.14 AS buildJS
WORKDIR /var/www/html
COPY . .
RUN apk add --no-cache yarn \
    && yarn && yarn build

FROM nginx:stable-alpine
WORKDIR /var/www/html
COPY --from=buildJS /var/www/html/dist .
COPY ./docker/conf/nginx.conf /etc/nginx/conf.d/default.conf
COPY ./docker/conf/config.json /etc/nginx/templates/config.json.template

ENTRYPOINT []

CMD sleep 5 && mv /etc/nginx/conf.d/config.json config.json & /docker-entrypoint.sh nginx -g 'daemon off;'

I'm building the project in the first stage without any envs, in the second stage I'm copying the files and then creating the config.json file based on envs that are passed at run time with envstub feature of nginx.

then from the project I called the config.json file and load the envs from there but be careful you can not import it because imports will be resolved at build time instead you have to get it with fetch or axios or any equivalents

score 0 · Answer 6 · answered Mar 24 '23 at 22:51

0

// ./docker-compose.yml
version: '3'
services:
 front:
  /* some params */
  build:
   dockerfile: ./Dockerfile
   context: ./front
  env_file: .env // its important, no need environment

// ./front/Dockerfile - do not use

// ./.env
// https://vitejs.dev/guide/env-and-mode.html
// VITE_* prefix is needed
VITE_SOME_VAR=value 

// ./**/some_script.ts
// Vite + Vue
console.log('expected: ', import.meta.env.VITE_SOME_VAR) // expected: value

answered Mar 24 '23 at 22:51

Михаил Тюрчев

1

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Mar 30 '23 at 00:21

score -1 · Answer 7 · answered Jan 07 '22 at 10:59

You can set the variables in YAML format and update them accordingly as per your requirement.

Below is the sample YAML format which we use as a template:

#Set variables once
variables:
  configuration: debug
  platform: x64

steps:

#Use them once
- task: MSBuild@1
  inputs:
    solution: solution1.sln
    configuration: $(configuration) # Use the variable
    platform: $(platform)

#Use them again
- task: MSBuild@1
  inputs:
    solution: solution2.sln
    configuration: $(configuration) # Use the variable
    platform: $(platform)

Check this SO for more insights to understand environment variables hosted in azure web app

Thanks for your help but I need to be able to change the env-Variables inside of the Azure App service configuration. We use Gitlab and in there I currently have multiple env-Files for each server(dev, staging, prod), that works fine. But I need to do something like in the linked articles and I don't get that to work. — Max, Jan 07 '22 at 12:33

Change Environmet Variables at runtime (React, vite) with docker and nginx

7 Answers7

Linked