kunokdev

version: "3.2"
services:
  item-service:
    volumes:
      - "./item-service:/app"
    command: ["yarn", "dev"]
    build:
      context: "./item-service"

kunokdev

version: "3.2"

services:
  gateway-proxy:
    image: kunokdev/gateway-proxy:${TAG:-latest}
    restart: always
    ports:
      - "5000:80"
    networks:
      - private-network

kunokdev

docker build . -t kunokdev/cra-runtime-environment-variables
docker run -p 3000:80 -e API_URL=https://staging.api.com -t kunokdev/cra-runtime-environment-variables
docker push -t kunokdev/cra-runtime-environment-variables

kunokdev

# Temporary env files
/public/env-config.js
env-config.js

kunokdev

API_URL=https://my.new.dev.api.com yarn dev

kunokdev

<p>API_URL: {window._env_.API_URL}</p>

kunokdev

# => Build container
FROM node:alpine as builder
WORKDIR /app
COPY package.json .
COPY yarn.lock .
RUN yarn
COPY . .
RUN yarn build

# => Run container

kunokdev

  "scripts": {
    "dev": "chmod +x ./env.sh && ./env.sh && mv env-config.js ./public/env-config.js && react-scripts start",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "build": "sh -ac '. ./.env; react-scripts build'"
  },

kunokdev

#!/bin/sh
# line endings must be \n, not \r\n !
echo "window._env_ = {" > ./env-config.js
awk -F '=' '{ print $1 ": \"" (ENVIRON[$1] ? ENVIRON[$1] : $2) "\"," }' ./.env >> ./env-config.js
echo "}" >> ./env-config.js

kunokdev

<script src="%PUBLIC_URL%/env-config.js"></script>