Add dynamic change of base name

CHANGELOG.md

@@ -5,6 +5,7 @@
 ## Added
 
 - Added `<ErrorMessage>` component
+- Dynamic base name
 
 ### Updated
 

README.md

@@ -39,3 +39,25 @@ To publish new versions use np (https://www.npmjs.com/package/np).
 ```sh
 npx np
 ```
+
+## Testing template Dockerfile
+
+Run `yarn test` and then switch to the newly created folder.
+
+Run the following commands to build the image and run it:
+
+```sh
+docker build . \
+--build-arg REACT_APP_API_BASE_URL=http://localhost \
+--build-arg REACT_APP_DEPLOYMENT_ENV=dev:optimized \
+--build-arg REACT_APP_BASE_NAME=/webapp \
+--build-arg PUBLIC_URL=. \
+-t cra-template-aaa-typescript
+
+docker run -p 80:80 cra-template-aaa-typescript
+docker run -p 80:80 -e REACT_APP_BASE_NAME="/webapp" cra-template-aaa-typescript
+# http://localhost/webapp
+
+docker run -p 80:80 -e REACT_APP_BASE_NAME="/cms" cra-template-aaa-typescript
+# http://localhost/cms
+```

template/Dockerfile

@@ -67,8 +67,17 @@ RUN set -e \
 FROM nginx:alpine as runner
 EXPOSE 80
 
+# Copy entrypoint script for replacing API base URL dynamically via environment variable
+COPY docker-entrypoint.sh /app/docker-entrypoint.sh
+RUN chmod +x /app/docker-entrypoint.sh
+
 # Copy default nginx config in repo
 COPY nginx-default.conf /etc/nginx/conf.d/default.conf
 
-# Copy only minified build files f rom builder setup
-COPY --from=builder /app/build /usr/share/nginx/html
+# Copy only minified build files from builder setup
+COPY --from=builder /app/build /etc/nginx/html
+
+# Entrypoint ensures correct API base URL is set via environment variables on runtime
+ENTRYPOINT [ "/app/docker-entrypoint.sh" ]
+
+CMD ["nginx", "-g", "daemon off;"]

template/docker-entrypoint.sh

@@ -0,0 +1,19 @@
+#!/bin/sh
+
+set -e
+
+# Only update config with defined env variables if we"re running an nginx process so we can still attach with debugging commands
+# without accidentally modifying anything
+if [ "$1" == "nginx" ]; then
+    if [ ! -z "${REACT_APP_API_BASE_URL}" ]; then
+        sed -i "/ENV_API_BASE_URL/c\var ENV_API_BASE_URL = \"${REACT_APP_API_BASE_URL}\";" /etc/nginx/html/config.js
+    fi
+
+    if [ ! -z "${REACT_APP_BASE_NAME}" ]; then
+        sed -i "/ENV_BASE_NAME/c\var ENV_BASE_NAME = \"${REACT_APP_BASE_NAME}\";" /etc/nginx/html/config.js
+        sed -i "s#REACT_APP_BASE_NAME#$REACT_APP_BASE_NAME#g" /etc/nginx/conf.d/default.conf | sed "s#//#/#g"
+        sed -i "s#<base href=\"/\">#<base href=\"$REACT_APP_BASE_NAME/\">#g" /etc/nginx/html/index.html | sed "s#<base href=\"//\">#<base href=\"/\">#g"
+    fi
+fi
+
+exec "$@"

template/nginx-default.conf

@@ -2,8 +2,21 @@ server {
     listen 80;
     server_name _;
 
-    location /webapp {
-        alias /usr/share/nginx/html/;
-        try_files $uri $uri/ /webapp/index.html;
+    location REACT_APP_BASE_NAME {
+        port_in_redirect off;
+        alias /etc/nginx/html/;
+        try_files $uri $uri/ REACT_APP_BASE_NAME/index.html;
+
+        # don't cache anything by default
+        add_header Cache-Control "no-store, no-cache, must-revalidate";
+    }
+
+    location REACT_APP_BASE_NAME/static {
+        port_in_redirect off;
+        alias /etc/nginx/html/static;
+        expires 1y;
+
+        # cache create react app generated files because they all have a hash in the name and are therefore automatically invalidated after a change
+        add_header Cache-Control "public";
     }
-}
+}

template/public/config.js

@@ -0,0 +1,2 @@
+var ENV_API_BASE_URL = "";
+var ENV_BASE_NAME = "";

template/public/index.html

@@ -23,6 +23,9 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
+
+    <script src="./config.js" type="application/javascript"></script>
+
     <title>TODO React App</title>
   </head>
 

template/src/components/routers/history.ts

@@ -1,3 +1,4 @@
 import { createBrowserHistory } from "history";
+import { BASE_NAME } from "../../config";
 
-export const history = createBrowserHistory({ basename: process.env.REACT_APP_BASE_NAME || "/" });
+export const history = createBrowserHistory({ basename: BASE_NAME || "/" });

template/src/config.ts

@@ -1,3 +1,14 @@
+import * as _ from "lodash";
+
 // Application specific configuration variables
 // potentially sourced from process.env.REACT_APP_*
-export const API_BASE_URL = process.env.REACT_APP_API_BASE_URL as string;
+
+// Variables defined in `public/config.js`, created from environment variables via `docker-entrypoint.sh` script on Docker container start
+// Will override "env" variables defined at runtime if set
+declare const ENV_API_BASE_URL: string;
+declare const ENV_BASE_NAME: string;
+
+export const API_BASE_URL = (
+    _.isEmpty(ENV_API_BASE_URL) ? process.env.REACT_APP_API_BASE_URL : ENV_API_BASE_URL
+) as string;
+export const BASE_NAME = (_.isEmpty(ENV_BASE_NAME) ? process.env.REACT_APP_BASE_NAME : ENV_BASE_NAME) as string;