CODEWITHSUNDEEP
reactjsbashdocker
Carrein
Carrein

Reputation: 3371

Reading docker environmental variables through react-env plugin for a dockerize React application?

I have a docker container with a few environment variables setup. I know that in a typical use case, React is unable to read these variables as the process.env variables are replaced during transpiling.

I am trying to work around this without having to spin up a back-end server by using a plugin called react-env.

The core idea is to create a .env file which can be written to using a bash script. The bash script will copy any environmental variables to the .env file. The plugin will generate a env.js file which then will be consumed by the React application at runtime.

In my setup I created two sample environmental variables.

.env

# .env
REACT_APP_SETUP="OK" //prewritten env for testing.

docker-entrypoint.sh

#!/bin/sh
printf "\n" >> /usr/app/.env

//env that is supposed to be copied.
printf 'REACT_APP_GCP_PROJECT_ID="%s"' SOMEID >> /usr/app/.env 
serve build

Dockerfile

# Base version
FROM node:9

# Install yarn
RUN npm install yarn

# Install serve.js
RUN yarn global add serve

# Create app directory
WORKDIR /usr/app

# Copy all necessary files and grant permissions.
# - yarn.lock
# - package.json
# - .env
# - docker-entrypoint.sh
COPY . /usr/app/
COPY yarn.lock /usr/app
COPY package.json /usr/app
COPY .env /usr/app
COPY docker-entrypoint.sh /usr/app/docker-entrypoint.sh
RUN chmod 777 /usr/app/docker-entrypoint.sh

# Install dependencies.
RUN yarn

# Build application.
RUN yarn build

# Set entrypoint of application.
ENTRYPOINT [ "/usr/app/docker-entrypoint.sh" ]

App.jsx

...

console.log(env("SETUP"));
console.log(env("GCP_PROJECT_ID"));

...

Inspect Console

OK
undefined

In the example setup above, we can see the plugin works as the dockerized application does generate the env.js for the React app hence the OK console output.

However, I cannot seem to get the bash file to write to the .env file thus the undefined console output.

execing into the container also shows the .env file having both REACT_APP_GCP_PROJECT_ID="SOMEID" and REACT_APP_SETUP="OK" entries.

I suspect that the env.js is being generated before the bash file has a chance to write to the .env file.

How can i write to my .env file such that the plugin can generate a env.js file which my application can read environmental variables from?

Upvotes: 1

Views: 291

Answers (1)

LinPy
LinPy

Reputation: 18598

I suggest you to write to the file before building the app:

FROM node:9

# Install yarn
RUN npm install yarn

# Install serve.js
RUN yarn global add serve

# Create app directory
WORKDIR /usr/app

# Copy all necessary files and grant permissions.
# - yarn.lock
# - package.json
# - .env
# - docker-entrypoint.sh
COPY . /usr/app/
COPY yarn.lock /usr/app
COPY package.json /usr/app
COPY .env /usr/app
COPY docker-entrypoint.sh /usr/app/docker-entrypoint.sh
RUN chmod 777 /usr/app/docker-entrypoint.sh

# Install dependencies.
RUN printf "\n" >> /usr/app/.env
RUN printf 'REACT_APP_GCP_PROJECT_ID="%s"' SOMEID >> /usr/app/.env 
RUN yarn

# Build application.
RUN yarn build

# Set entrypoint of application.
ENTRYPOINT [ "/usr/app/docker-entrypoint.sh" ]

and your entrypoint:

#!/bin/sh 
serve build

Upvotes: 1

Related Questions