{"id":16318191,"url":"https://github.com/githubjakob/react-inject-env-docker-runtime","last_synced_at":"2025-10-26T16:08:13.847Z","repository":{"id":77570441,"uuid":"306701363","full_name":"githubjakob/react-inject-env-docker-runtime","owner":"githubjakob","description":"Sample project that shows how to inject a environment variable (e.g. for a backend API Url) into a dockerized React application.","archived":false,"fork":false,"pushed_at":"2020-10-26T11:12:56.000Z","size":9,"stargazers_count":2,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-16T20:28:30.149Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/githubjakob.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-10-23T17:18:10.000Z","updated_at":"2020-11-17T16:05:02.000Z","dependencies_parsed_at":"2023-03-12T01:04:45.304Z","dependency_job_id":null,"html_url":"https://github.com/githubjakob/react-inject-env-docker-runtime","commit_stats":{"total_commits":7,"total_committers":1,"mean_commits":7.0,"dds":0.0,"last_synced_commit":"bdc09f657c0e3c6abf307324e7b4988f31ee6548"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/githubjakob%2Freact-inject-env-docker-runtime","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/githubjakob%2Freact-inject-env-docker-runtime/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/githubjakob%2Freact-inject-env-docker-runtime/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/githubjakob%2Freact-inject-env-docker-runtime/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/githubjakob","download_url":"https://codeload.github.com/githubjakob/react-inject-env-docker-runtime/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253990503,"owners_count":21995776,"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":[],"created_at":"2024-10-10T22:10:15.088Z","updated_at":"2025-10-26T16:08:08.810Z","avatar_url":"https://github.com/githubjakob.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# docker-inject-env-react-runtime\n\nSmall sample project that shows how to inject a environment variable (e.g. for a API Url) into a dockerized React application.\n\n## How it works \n\nAs opposed to baking the environment variable into the docker image during the docker build, this approach allows you to have just one docker image that can be deployed to different environments (e.g. staging and prod). \n\nThe trick here is to set the variable on the global window object in a small JavaScript file `env_vars.js` embedded in the html.\n\nThis js `env_vars.js` is created when the docker container is starting up, using a little bash script `docker-entrypoint.sh` that reads the environment variables passed to the docker container.\n\n## Try it out\n\nTo try it out clone the project and build the docker image.\n\n```\ngit clone git://github.com/githubjakob/react-inject-env-docker-runtime\ncd react-inject-env-docker-runtime\n```\n\nThen build the docker image:\n\n```\ndocker build -t docker-inject-env-react-runtime .\n```\n\nOn startup, you can inject environment variables into the docker container, which is then picked up by the React app:\n\n```\ndocker run -d -p 8081:8080 -e API_URL=test.myapp.com docker-inject-env-react-runtime\n\ndocker run -d -p 8082:8080 -e API_URL=prod.myapp.com docker-inject-env-react-runtime\n```\n\nNavigate to http://localhost:8081/ and http://localhost:8082/ respectively to see the different Urls in the different containers.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgithubjakob%2Freact-inject-env-docker-runtime","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgithubjakob%2Freact-inject-env-docker-runtime","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgithubjakob%2Freact-inject-env-docker-runtime/lists"}