Runtime environment variables in React

facebook/create-react-app#578 (comment)
DataBiosphere · May 23, 2018 · 1212642 · 1212642
1 parent 81cd2ae
commit 1212642
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 8 deletions.
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -16,6 +16,18 @@ services:
       - ./ui:/ui
       # See https://stackoverflow.com/a/32785014 for why this is needed.
       - /ui/node_modules
+  ui-prod:
+    build:
+      context: ui
+      dockerfile: Dockerfile.prod
+    ports:
+      - 127.0.0.1:80:80
+    volumes:
+      - ./ui:/ui
+      # See https://stackoverflow.com/a/32785014 for why this is needed.
+      - /ui/node_modules
+    environment:
+      - API_URL=bar
   # Can't use "api" because it maps to something else on Google network.
   # Use "apise" for "api server". ("apis" is also taken.)
   apise:

diff --git a/ui/Dockerfile.prod b/ui/Dockerfile.prod
@@ -0,0 +1,17 @@
+FROM node as builder
+WORKDIR /ui
+COPY package.json package-lock.json /ui/
+# src/api contains Swagger-generated data_explorer_service. This is needed by
+# "npm install" beacuse package.json has a local dependency on
+# data_explorer_service.
+COPY src/api /ui/src/api
+RUN npm install
+RUN npm install react-scripts@1.1.1 -g
+COPY . /ui
+RUN npm run build
+
+ENV API_URL foo
+
+FROM nginx
+COPY --from=builder /ui/build /usr/share/nginx/html
+CMD sed -i "s/API_URL_REPLACE_ME/$API_URL/" /usr/share/nginx/html/env.js && nginx -g "daemon off;"
diff --git a/ui/public/env.js b/ui/public/env.js
@@ -0,0 +1,8 @@
+// Create React App doesn't have an easy way to set run-time environment
+// variables. Here we copy
+// https://github.com/facebook/create-react-app/issues/578#issuecomment-277843310
+
+window.env = {
+  // This option can be retrieved in "src/index.js" with "window.env.API_URL".
+  API_URL: 'API_URL_REPLACE_ME'
+};
diff --git a/ui/public/index.html b/ui/public/index.html
@@ -27,14 +27,10 @@
     </noscript>
     <div id="root"></div>
     <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
+      Load "env.js" script before the main JavaScript bundle.
+      You can use it to define "runtime" environment variables.
+      Please open this file for more details.
     -->
+    <script src="%PUBLIC_URL%/env.js"></script>
   </body>
 </html>
diff --git a/ui/src/index.js b/ui/src/index.js
@@ -4,5 +4,7 @@ import "./index.css";
 import App from "./App";
 import registerServiceWorker from "./registerServiceWorker";
 
+console.log('API_URL is ' + window.env.API_URL);
 ReactDOM.render(<App />, document.getElementById("root"));
 registerServiceWorker();
+