src/index.js
const hello = process.env.REACT_APP_HELLO;
const world = process.env.REACT_APP_WORLD;
root.render(
<h1>{ hello }, {world}</h1>
);docker run -it --rm \
-p 80:80 \
-e REACT_APP_HELLO=runtime -e REACT_APP_WORLD=replace \
docker.io/rafaelcalleja/react-app-hello-world:latestruntime, replace
how it works - Dockerfile
create .env file during build phase setting value as environment variable name to later replace it using envsubst
# define runtime variables as VAR=\${VAR}
ENV REACT_APP_HELLO "\\\${REACT_APP_HELLO}"
ENV REACT_APP_WORLD "\\\${REACT_APP_WORLD}"
# create react app production build
RUN rm -f .env* ; \
printenv > .env && \
yarn buildFROM nginx image create an entrypoint to replace text ${VAR} in builded js files using environment variables values with envsubst command at runtime
#create nginx entrypoint to replace environment variables in build js at runtime
RUN echo "\
export ENV_LIST=\"\$(printenv | awk -F= '{print $1}' | sed 's/^/\$/g' | paste -sd,)\"; \
find /usr/share/nginx/html/static/ -type f -name \"*.js\"| \
xargs -I % sh -c 'envsubst \"\${ENV_LIST}\" < \"%\" > \"%.tmp\" && mv \"%.tmp\" \"%\"'" \
> /docker-entrypoint.d/40-envsubst-react-environment.sh && chmod +x /docker-entrypoint.d/40-envsubst-react-environment.shkubernetes/pod.yaml
apiVersion: v1
kind: Pod
metadata:
name: react-app
spec:
containers:
- name: web
image: docker.io/rafaelcalleja/react-app-hello-world:latest
env:
- name: REACT_APP_HELLO
value: "runtime"
- name: REACT_APP_WORLD
value: "replace"
ports:
- name: web
containerPort: 80
protocol: TCP kubectl -n test apply -f kubernetes/pod.yaml 
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent