{"id":19083516,"url":"https://github.com/rafaelcalleja/react-js-env-runtime-docker","last_synced_at":"2026-04-12T17:02:05.837Z","repository":{"id":41531796,"uuid":"510057374","full_name":"rafaelcalleja/react-js-env-runtime-docker","owner":"rafaelcalleja","description":"Example React App production build with environment variables replaced in runtime docker/kubernetes","archived":false,"fork":false,"pushed_at":"2022-07-04T09:21:18.000Z","size":189,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-01-02T20:45:45.524Z","etag":null,"topics":["demo","docker","environment-variables","envsubst","example","hello-world","install","kubernetes","nginx","npm","production","react","reactjs","replaced","runtime","yarn"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rafaelcalleja.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-07-03T15:11:12.000Z","updated_at":"2023-02-17T23:18:22.000Z","dependencies_parsed_at":"2022-09-01T13:51:02.130Z","dependency_job_id":null,"html_url":"https://github.com/rafaelcalleja/react-js-env-runtime-docker","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rafaelcalleja%2Freact-js-env-runtime-docker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rafaelcalleja%2Freact-js-env-runtime-docker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rafaelcalleja%2Freact-js-env-runtime-docker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rafaelcalleja%2Freact-js-env-runtime-docker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rafaelcalleja","download_url":"https://codeload.github.com/rafaelcalleja/react-js-env-runtime-docker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240133177,"owners_count":19752996,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["demo","docker","environment-variables","envsubst","example","hello-world","install","kubernetes","nginx","npm","production","react","reactjs","replaced","runtime","yarn"],"created_at":"2024-11-09T02:47:44.557Z","updated_at":"2026-04-12T17:02:05.772Z","avatar_url":"https://github.com/rafaelcalleja.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"### React\n_src/index.js_\n```js\nconst hello = process.env.REACT_APP_HELLO;\nconst world = process.env.REACT_APP_WORLD;\n\nroot.render(\n    \u003ch1\u003e{ hello }, {world}\u003c/h1\u003e\n);\n```\n\n### docker\n\n```bash\ndocker run -it --rm \\\n       -p 80:80 \\\n       -e REACT_APP_HELLO=runtime -e REACT_APP_WORLD=replace \\\n       docker.io/rafaelcalleja/react-app-hello-world:latest\n```\n\n### html render output\n\n```\nruntime, replace\n```\n\n### how it works - [Dockerfile](https://github.com/rafaelcalleja/react-js-env-runtime-docker/tree/master/react-nginx/Dockerfile)\n#### create .env file during build phase setting value as environment variable name to later replace it using envsubst  \n```Dockerfile\n# define runtime variables as VAR=\\${VAR}\nENV REACT_APP_HELLO \"\\\\\\${REACT_APP_HELLO}\"\nENV REACT_APP_WORLD \"\\\\\\${REACT_APP_WORLD}\"\n\n# create react app production build\nRUN rm -f .env* ; \\\n    printenv \u003e .env \u0026\u0026 \\\n    yarn build\n```\n\n#### FROM nginx image create an entrypoint to replace text ${VAR} in builded js files using environment variables values with envsubst command at runtime \n```Dockerfile\n#create nginx entrypoint to replace environment variables in build js at runtime\nRUN echo \"\\\nexport ENV_LIST=\\\"\\$(printenv | awk -F= '{print $1}' | sed 's/^/\\$/g' | paste -sd,)\\\"; \\\nfind /usr/share/nginx/html/static/ -type f -name \\\"*.js\\\"| \\\nxargs -I % sh -c 'envsubst \\\"\\${ENV_LIST}\\\" \u003c \\\"%\\\" \u003e \\\"%.tmp\\\" \u0026\u0026 mv \\\"%.tmp\\\" \\\"%\\\"'\" \\\n\u003e /docker-entrypoint.d/40-envsubst-react-environment.sh \u0026\u0026 chmod +x /docker-entrypoint.d/40-envsubst-react-environment.sh\n```\n### kubernetes\n\n_kubernetes/pod.yaml_\n```yaml\napiVersion: v1\nkind: Pod\nmetadata:\n  name: react-app\nspec:\n  containers:\n    - name: web\n      image: docker.io/rafaelcalleja/react-app-hello-world:latest\n      env:\n        - name: REACT_APP_HELLO\n          value: \"runtime\"\n        - name: REACT_APP_WORLD\n          value: \"replace\"\n      ports:\n        - name: web\n          containerPort: 80\n          protocol: TCP \n```\n\n```bash\nkubectl -n test apply -f kubernetes/pod.yaml \n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frafaelcalleja%2Freact-js-env-runtime-docker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frafaelcalleja%2Freact-js-env-runtime-docker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frafaelcalleja%2Freact-js-env-runtime-docker/lists"}