reactjs - Use enviroment variables in dockerized react app

Question

The goal I am trying to achieve is to build a docker image (with a react app within) that is using environment variables from the host.

Planned workflow:

1. Build the docker image locally
2. Upload the docker image
3. Call command docker-compose up

I want the environment variable REACT_APP_SOME_ENV_VARIABLE of the system (where the image is hosted) to be usable by the react app.

Current solution:

// App.js
function App() {
  return (
    <p>SOME_ENV_VARIABLE = {process.env.REACT_APP_SOME_ENV_VARIABLE}</p>
  );
}

# Dockerfile
FROM    node:13.12.0-alpine as build-step

# Install the app
RUN     mkdir /app
WORKDIR /app
COPY    package.json /app
RUN     npm install --silent

# Build the app
COPY    . /app
RUN     npm run-script build

# Create nginx server and copy build there
FROM    nginx:1.19-alpine
COPY    --from=build-step /app/build /usr/share/nginx/html

# docker-compose.yml
version: '3.5'

services:
  react-env:
    image:  react-env
    ports:
      - 80:80/tcp
    environment: 
      - REACT_APP_SOME_ENV_VARIABLE=FOO

What am I doing wrong and how do I fix it?

question from:https://stackoverflow.com/questions/66062000/use-enviroment-variables-in-dockerized-react-app

Answer 1

In your approach, the environment variables are injected when the container starts, and by that time your App is built and docker image is created, and also you cannot access process.env on client side. Therefore to access them on client side, we have to do the below steps.

You must be using webpack in your React App for bundling and other stuff.

So in you webpack.config.js, declare your environment variable REACT_APP_SOME_ENV_VARIABLE using Define plugin which will result in declaring the variables as global variables for the app.

Your webpack config should look something like this:

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

module.exports = {
  target: "web",
  performance: {
    hints: false,
  },
  node: {
    fs: "empty"
  },
  entry: "./src/index.js",
  output: {
    path: path.join(__dirname, "/build"),
    filename: "[name].[contenthash].js"
  },
  
  module: {
    rules: [
      //your rules
    ]
  },

  plugins: [
    new webpack.DefinePlugin({
      "envVariable": JSON.stringify(process.env.REACT_APP_SOME_ENV_VARIABLE),
    }),
  ],
};

And in your App, you can use the variable like this

// App.js
function App() {
  return (
    <p>SOME_ENV_VARIABLE = {envVariable}</p>
  );
}

NOTE: Make sure before RUN npm run-script build command is run, your environment variables are injected to docker container. For that you should declare your environment variables in DockerFile using ENV before RUN npm run-script build step.