Build optimization with webpack (#100)

- Adds webpack build with development and production configuration
- Adds hot swap for development build
- Splits production bundles by router sections
- Minimizes/optimizes images

Signed-off-by: Sean Sundberg <[email protected]>

.babelrc

@@ -0,0 +1,11 @@
+{
+    "presets": [
+        ["@babel/preset-env", {"modules": false}],
+        "@babel/preset-react"
+    ],
+    "plugins": [
+      "@babel/plugin-syntax-dynamic-import",
+      "@babel/plugin-proposal-class-properties",
+      "react-hot-loader/babel"
+    ]
+}

.dockerignore

@@ -0,0 +1,2 @@
+node_modules/
+build/

.env-template

@@ -1,4 +1,5 @@
-REACT_APP_MODE="fs-controls"
+## REACT_APP_MODE: fs-controls or builder (builder is default if not provided)
+REACT_APP_MODE="builder"
 APP_URI="http://localhost:3000"
 API_HOST="http://localhost:3001"
 APPID_CONFIG=""

Dockerfile

@@ -2,14 +2,20 @@ FROM registry.access.redhat.com/ubi8/nodejs-16:1-52 as builder
 
 ARG NODE_OPTIONS="--max-old-space-size=4096"
 
+USER root
+
+RUN dnf -y install autoconf automake diffutils file && \
+    dnf clean all
+
 USER default
 
 WORKDIR /opt/app-root/src
 
 COPY --chown=default:root . .
-RUN npm ci && \
-    npm cache clean --force && \
-    npm run build
+RUN npm i -g yarn && \
+    yarn install && \
+    yarn cache clean && \
+    yarn build
 
 FROM registry.access.redhat.com/ubi8/nodejs-16-minimal:1-59
 
@@ -18,11 +24,12 @@ USER 1001
 WORKDIR /opt/app-root/src
 
 COPY --from=builder --chown=1001:0 /opt/app-root/src/build ./build
-COPY --chown=1001:0 package.json package-lock.json ./
+COPY --chown=1001:0 package.json yarn.lock ./
 COPY --chown=1001:0 server ./server
 
-RUN npm ci --production && \
-    npm cache clean --force
+RUN npm i -g yarn && \
+    yarn install --production && \
+    yarn cache clean
 
 ENV NODE_ENV=production
 ENV HOST=0.0.0.0 PORT=3000

README.md

@@ -10,6 +10,20 @@ This app has been developped using an opinionated set of components for modern w
 * [Sass](http://sass-lang.com/)
 * [Carbon](https://www.carbondesignsystem.com/)
 
+### Configuring
+
+There are a number of configuration options available when deploying the application.
+
+#### Application mode
+
+The ASCENT UI has been built to run in one of two different modes: "Builder" and "FS Control". In "FS Control" mode, the application only shows the financial control information and mappings but none of the architecture builder content. In "Builder" mode, the application shows both the builder content and the financial controls content.
+
+To change the mode for the application, provide an environment variable named `REACT_APP_MODE` with a value of either "fs-controls" or "builder". If the environment variable is empty or contains a value other than the two defined then the application will default to "builder" mode.
+
+If deploying the container using the helm chart, provide the value in the `mode` variable.
+
+**Note:** The application uses the `react-inject-env` module to update the environment variable value in the built application content.
+
 ### Deploying 
 
 After you have created a new git repo from this git template, remember to rename the project.