{"id":2470,"date":"2022-12-07T14:22:47","date_gmt":"2022-12-07T14:22:47","guid":{"rendered":"https:\/\/jan.schnasse.org\/blog\/?p=2470"},"modified":"2026-09-28T11:37:30","modified_gmt":"2026-09-28T09:37:30","slug":"accessing-container-environment-at-startup-time-with-typescript-react-docker","status":"publish","type":"post","link":"https:\/\/jan.schnasse.org\/blog\/2022\/12\/07\/accessing-container-environment-at-startup-time-with-typescript-react-docker\/","title":{"rendered":"Accessing container environment at startup time with typescript \/ react \/ docker"},"content":{"rendered":"

Blogpost for this stackoverflow answer: https:\/\/stackoverflow.com\/a\/74701083\/1485527<\/a><\/p>\n

Get code here<\/a><\/p>\n

Create example app<\/strong><\/p>\n

npx <\/span>create-react-app<\/span> read-env-<\/span>example <\/span>--template<\/span> typescript<\/span>\n<\/code><\/pre>\n
Navigate to fresh app<\/strong><\/p>\n
cd<\/span> read<\/span>-env-example\n<\/code><\/pre>\n
Create Dockerfile<\/strong><\/p>\n
mkdir -p<\/span> docker\/build\n<\/code><\/pre>\n
docker\/build\/Dockerfile<\/em><\/p>\n
# build environment<\/span>\nFROM<\/span> node:19<\/span>-alpine3.15<\/span> as builder\nWORKDIR<\/span> \/app\n<\/span>ENV<\/span> PATH \/app\/node_modules\/.bin:$PATH\n\nCOPY<\/span> package.json .\/\n<\/span>COPY<\/span> package-lock.json .\/\n<\/span>RUN<\/span> npm ci\n<\/span>RUN<\/span> npm install react-scripts@5.0.1 -g\n<\/span>COPY<\/span> . .\/\n<\/span>RUN<\/span> PUBLIC_URL=\".\"<\/span> npm run build\n<\/span>\n# production environment<\/span>\nFROM<\/span> nginx:stable-alpine\nCOPY<\/span> --from=builder \/app\/build \/usr\/share\/nginx\/html\n<\/span>EXPOSE<\/span> 80<\/span>\nCMD<\/span> [\"nginx\"<\/span>, \"-g\"<\/span>, \"daemon off;\"<\/span>]\n<\/span>\nCOPY<\/span> docker\/build\/docker-entrypoint.sh \/\n<\/span>RUN<\/span> chmod +x docker-entrypoint.sh\n<\/span>\nENTRYPOINT<\/span> [\"\/docker-entrypoint.sh\"<\/span>]<\/span>\n<\/code><\/pre>\n
Create docker-entrypoint.sh<\/strong><\/p>\n
This script will be executed at container start.
\nIt generates the config.js<\/code> file containing all environment variables starting with ‚MYAPP‘ under window.extended<\/code>.<\/p>\n
docker\/build\/docker-entrypoint.sh<\/em><\/p>\n
#!\/bin\/sh -eu<\/span>\n\n\nfunction<\/span> generateConfigJs<\/span><\/span>(){\n    echo<\/span> \"\/*<![CDATA[*\/\"<\/span>;\n    echo<\/span> \"window.extended = window.extended || {};\"<\/span>;\n    for<\/span> i in<\/span> `env | grep '^MYAPP'<\/span>`\n    do<\/span>\n        key=$(echo<\/span> \"$i<\/span>\"<\/span> | cut -d<\/span>\"=\"<\/span> -f<\/span>1);\n        val=$(echo<\/span> \"$i<\/span>\"<\/span> | cut -d<\/span>\"=\"<\/span> -f<\/span>2);\n        echo<\/span> \"window.extended.${key}<\/span>='${val}<\/span>' ;\"<\/span>;\n    done<\/span>\n    echo<\/span> \"\/*]]>*\/\"<\/span>;\n}\ngenerateConfigJs > \/usr\/share\/nginx\/html\/config.js\n\nnginx -g \"daemon off;\"<\/span>\n<\/code><\/pre>\n
Create docker-compose.yml<\/strong><\/p>\n
mkdir<\/span> docker\/run<\/span>\n<\/code><\/pre>\n
docker\/run\/docker-compose.yml<\/em><\/p>\n
version<\/span>: \"3.2\"<\/span>\nservices<\/span>:\n\n  read-env-example<\/span>:\n    image<\/span>: read-env-example<\/span>:0.1<\/span>.0<\/span>\n    ports<\/span>:\n      - 80<\/span>:80<\/span>\n    env_file<\/span>:\n      - myapp.env\n<\/code><\/pre>\n
Create runtime config for your app<\/strong><\/p>\n
docker\/run\/myapp.env<\/em><\/p>\n
MYAPP_API_ENDPOINT<\/span>='http:\/\/elasticsearch:9200'<\/span>\n<\/code><\/pre>\n
Create config.js<\/strong> <– this is where .env will be injected.<\/p>\n
public\/config.js<\/em><\/p>\n
\/*<![CDATA[*\/\nwindow.extended = window.extended || <\/span>{}<\/span>;\nwindow.extended.MYAPP_API_ENDPOINT='http:\/\/localhost:9200';\n\/*]]>*\/<\/span>\n<\/code><\/pre>\n
Note: This file will be completely overwritten by the docker-entrypoint.sh<\/code>. For development purposes you can set it to any value that is appropriate, e.g. when used together with npm start<\/code>.<\/p>\n
Include config.js in index.html<\/strong><\/p>\n
public\/index.html<\/em><\/p>\n
   <head<\/span>><\/span>\n     ...\n    <script<\/span> type<\/span>=\"text\/javascript\"<\/span> src<\/span>=\"%PUBLIC_URL%\/config.js\"<\/span> ><\/span><\/script<\/span>><\/span>\n     ...\n   <\/head<\/span>><\/span>\n   <body<\/span>><\/span>\n<\/code><\/pre>\n
Make use of your environment variable<\/strong><\/p>\n
src\/App.tsx<\/em><\/p>\n
declare global {\n    interface Window { extended<\/span>: any; }\n}\nfunction<\/span> App<\/span>() <\/span>{\n  return<\/span> (\n    <div<\/span> className<\/span>=\"App\"<\/span>><\/span>\n      <header<\/span> className<\/span>=\"App-header\"<\/span>><\/span>\n\n          You have configured {window.extended.MYAPP_API_ENDPOINT}\n\n      <\/header<\/span>><\/span>\n    <\/div<\/span>><\/span><\/span>\n  );\n}\n<\/code><\/pre>\n
Build<\/strong><\/p>\n
npm install<\/span>\n<\/code><\/pre>\n
Create docker image<\/strong><\/p>\n
docker<\/span> build <\/span>-f docker\/build\/Dockerfile <\/span>-t read-env-example:0<\/span>.1<\/span>.0<\/span> .\n<\/code><\/pre>\n
Run container<\/strong><\/p>\n
docker-compose -f .\/docker\/run<\/span>\/docker-compose.yml up<\/span>\n<\/code><\/pre>\n
Navigate to your app<\/strong><\/p>\n
Open http:\/\/localhost<\/a> in your browser.
\nYou will see the content of MYAPP_API_ENDPOINT<\/code> like\u00a0 provided in your docker\/run\/myapp.env<\/code>.<\/p>\n
Further usage<\/strong><\/p>\n
You can provide additional variables starting with MYAPP<\/code>. The docker-entrypoint.sh<\/code> script will search for all variables starting with MYAPP<\/code> and make them available through the windows<\/code> object.<\/p>\n","protected":false},"excerpt":{"rendered":"
Blogpost for this stackoverflow answer: https:\/\/stackoverflow.com\/a\/74701083\/1485527 Get code here Create example app npx create-react-app read-env-example –template typescript Navigate to fresh app cd read-env-example Create Dockerfile mkdir -p docker\/build docker\/build\/Dockerfile # build environment FROM node:19-alpine3.15 as builder WORKDIR \/app ENV PATH \/app\/node_modules\/.bin:$PATH COPY package.json .\/ COPY package-lock.json .\/ RUN npm ci RUN npm install react-scripts@5.0.1 -g […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[],"class_list":["post-2470","post","type-post","status-publish","format-standard","hentry","category-development"],"_links":{"self":[{"href":"https:\/\/jan.schnasse.org\/blog\/wp-json\/wp\/v2\/posts\/2470","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jan.schnasse.org\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jan.schnasse.org\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jan.schnasse.org\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jan.schnasse.org\/blog\/wp-json\/wp\/v2\/comments?post=2470"}],"version-history":[{"count":1,"href":"https:\/\/jan.schnasse.org\/blog\/wp-json\/wp\/v2\/posts\/2470\/revisions"}],"predecessor-version":[{"id":3816,"href":"https:\/\/jan.schnasse.org\/blog\/wp-json\/wp\/v2\/posts\/2470\/revisions\/3816"}],"wp:attachment":[{"href":"https:\/\/jan.schnasse.org\/blog\/wp-json\/wp\/v2\/media?parent=2470"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jan.schnasse.org\/blog\/wp-json\/wp\/v2\/categories?post=2470"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jan.schnasse.org\/blog\/wp-json\/wp\/v2\/tags?post=2470"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}