https://github.com/rafaelcalleja/react-js-env-runtime-docker

Example React App production build with environment variables replaced in runtime docker/kubernetes
https://github.com/rafaelcalleja/react-js-env-runtime-docker

demo docker environment-variables envsubst example hello-world install kubernetes nginx npm production react reactjs replaced runtime yarn

Last synced: 7 days ago
JSON representation

Example React App production build with environment variables replaced in runtime docker/kubernetes

• Host: GitHub
• URL: https://github.com/rafaelcalleja/react-js-env-runtime-docker
• Owner: rafaelcalleja
• Created: 2022-07-03T15:11:12.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2022-07-04T09:21:18.000Z (over 2 years ago)
• Last Synced: 2023-05-05T08:41:18.503Z (over 1 year ago)
• Topics: demo, docker, environment-variables, envsubst, example, hello-world, install, kubernetes, nginx, npm, production, react, reactjs, replaced, runtime, yarn
• Language: HTML
• Homepage:
• Size: 185 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
### React

_src/index.js_

```js

const hello = process.env.REACT_APP_HELLO;

const world = process.env.REACT_APP_WORLD;

root.render(

    
{ hello }, {world}

);

```


### docker

```bash

docker run -it --rm \

       -p 80:80 \

       -e REACT_APP_HELLO=runtime -e REACT_APP_WORLD=replace \

       docker.io/rafaelcalleja/react-app-hello-world:latest

```

### html render output

```

runtime, replace

```

### how it works - [Dockerfile](https://github.com/rafaelcalleja/react-js-env-runtime-docker/tree/master/react-nginx/Dockerfile)

#### create .env file during build phase setting value as environment variable name to later replace it using envsubst  

```Dockerfile

# 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 build

```

#### FROM nginx image create an entrypoint to replace text ${VAR} in builded js files using environment variables values with envsubst command at runtime 

```Dockerfile

#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.sh

```

### kubernetes

_kubernetes/pod.yaml_

```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 

```

```bash

kubectl -n test apply -f kubernetes/pod.yaml 

```