Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Runtime environment variables in React #78

Closed
wants to merge 1 commit into from
Closed

Runtime environment variables in React #78

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions docker-compose.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down
17 changes: 17 additions & 0 deletions ui/Dockerfile.prod
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;"
8 changes: 8 additions & 0 deletions ui/public/env.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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'
};
12 changes: 4 additions & 8 deletions ui/public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
2 changes: 2 additions & 0 deletions ui/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();