Develop to master

.eslintrc

@@ -14,7 +14,7 @@
     "Generator": true,
     "__DEV__": true
   },
-  "parser": "babel-eslint",
+  "parser": "@babel/eslint-parser",
   "rules": {
     "comma-dangle": [2, "always-multiline"],
     "comma-spacing": 2,

.github/workflows/sonarcloud.yml

@@ -9,7 +9,7 @@ jobs:
   sonarcloud:
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
       with:
         fetch-depth: 0
     - name: SonarCloud Scan

.github/workflows/test.yml

@@ -13,12 +13,12 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [14.x]
+        node: [18, 20]
 
     steps:
-    - uses: actions/checkout@v2
+    - uses: actions/checkout@v4
     - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v1
+      uses: actions/setup-node@v4
       with:
         node-version: ${{ matrix.node-version }}
     - run: yarn

.nvmrc

@@ -1 +1 @@
-10.15.1
+18

Dockerfile

@@ -1,5 +1,5 @@
 # ===============================================
-FROM node:14-slim AS appbase
+FROM node:18-slim AS appbase
 # ===============================================
 
 RUN groupadd -g 1001 appuser \
@@ -13,9 +13,9 @@ WORKDIR /app
 # Offical image has npm log verbosity as info. More info - https://github.com/nodejs/docker-node#verbosity
 ENV NPM_CONFIG_LOGLEVEL warn
 
-# set our node environment, either development or production
-# defaults to production, compose overrides this to development on build and run
-ARG NODE_ENV=production
+# set node environment, either development or production
+# use development to install devDependencies
+ARG NODE_ENV=development
 ENV NODE_ENV $NODE_ENV
 
 # Global npm deps in a non-root user directory
@@ -30,7 +30,7 @@ RUN yarn policies set-version $YARN_VERSION
 USER appuser
 
 # Copy package.json and package-lock.json/yarn.lock files
-COPY package*.json *yarn* ./
+COPY package.json yarn.lock ./
 
 # Install npm depepndencies
 ENV PATH /app/node_modules/.bin:$PATH
@@ -67,6 +67,10 @@ CMD ["react-scripts", "start"]
 FROM appbase as staticbuilder
 # ===================================
 
+# Set NODE_ENV to production in the staticbuilder container
+ARG NODE_ENV=production
+ENV NODE_ENV $NODE_ENV
+
 COPY . /app
 RUN yarn compile
 

Dockerfile.dev

@@ -1,4 +1,4 @@
-FROM node:10.15
+FROM node:18
 
 WORKDIR /app
 

config/webpack.config.dev.js

@@ -4,11 +4,9 @@ const path = require('path');
 const webpack = require('webpack');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
-const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
-const FaviconsWebpackPlugin = require('favicons-webpack-plugin');
-
 const getClientEnvironment = require('./env');
 const paths = require('./paths');
+
 // Webpack uses `publicPath` to determine where the app is being served from.
 // In development, we always serve from the root. This makes config easier.
 const publicPath = '/';
@@ -92,7 +90,10 @@ module.exports = {
       },
       {
         test: /\.(eot|svg|png|jpe?g)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
-        loader: require.resolve('file-loader'),
+        type: 'asset/resource',
+        generator: {
+            filename: '[hash][ext]'
+        },
       },
       {
         test: [
@@ -129,33 +130,33 @@ module.exports = {
     // a plugin that prints an error when you attempt to do this.
     // See https://github.com/facebookincubator/create-react-app/issues/240
     new CaseSensitivePathsPlugin(),
-    // If you require a missing module and then `npm install` it, you still have
-    // to restart the development server for Webpack to discover it. This plugin
-    // makes the discovery automatic so you don't have to restart.
-    // See https://github.com/facebookincubator/create-react-app/issues/186
-    new WatchMissingNodeModulesPlugin(paths.appNodeModules),
     // This is a practical solution that requires the user to opt into importing specific locales.
     // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
     // You can remove this if you don't use Moment.js:
-    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
-
-    new FaviconsWebpackPlugin({
-      logo: path.resolve(__dirname, '../assets/images/favicon.png'),
-      persistentCache: true,
+    new webpack.IgnorePlugin({
+      resourceRegExp: /^\.\/locale$/,
+      contextRegExp: /moment$/,
     }),
   ],
   // Some libraries import Node modules but don't use them in the browser.
   // Tell Webpack to provide empty mocks for them so importing them works.
-  node: {
-    dgram: 'empty',
-    fs: 'empty',
-    net: 'empty',
-    tls: 'empty',
+  resolve: {
+    fallback: {
+      dgram: 'empty',
+      fs: 'empty',
+      net: 'empty',
+      tls: 'empty',
+    }
   },
   // Turn off performance hints during development because we don't do any
   // splitting or minification in interest of speed. These warnings become
   // cumbersome.
   performance: {
     hints: false,
   },
+  // Reportedly, this avoids CPU overload on some systems.
+  // https://github.com/facebookincubator/create-react-app/issues/293
+  watchOptions: {
+    ignored: /node_modules/,
+  },
 };

config/webpack.config.prod.js

@@ -6,7 +6,6 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const ManifestPlugin = require('webpack-manifest-plugin');
 const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const FaviconsWebpackPlugin = require('favicons-webpack-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
 const paths = require('./paths');
 const getClientEnvironment = require('./env');
@@ -104,7 +103,10 @@ module.exports = {
       },
       {
         test: /\.(eot|svg|png|jpe?g)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
-        loader: require.resolve('file-loader'),
+        type: 'asset/resource',
+        generator: {
+            filename: '[hash][ext]'
+        },
       },
       {
         test: [
@@ -170,17 +172,16 @@ module.exports = {
     // Generate a manifest file which contains a mapping of all asset filenames
     // to their corresponding output file so that tools can pick it up without
     // having to parse `index.html`.
-    new ManifestPlugin({
+    new ManifestPlugin.WebpackManifestPlugin({
       fileName: 'asset-manifest.json',
     }),
     // Generate a service worker script that will precache, and keep up to date,
     // the HTML & assets that are part of the Webpack build.
     new WorkboxWebpackPlugin.GenerateSW({
       clientsClaim: true,
       exclude: [/\.map$/, /asset-manifest\.json$/],
-      importWorkboxFrom: 'cdn',
       navigateFallback: publicUrl + '/index.html',
-      navigateFallbackBlacklist: [
+      navigateFallbackDenylist: [
         // Exclude URLs starting with /_, as they're likely an API call
         new RegExp('^/_'),
         // Exclude URLs containing a dot, as they're likely a resource in
@@ -190,16 +191,13 @@ module.exports = {
     }),
     // This is a practical solution that requires the user to opt into importing specific locales.
     // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
-    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
-
-    new FaviconsWebpackPlugin({
-      logo: path.resolve(__dirname, '../assets/images/favicon.png'),
-      persistentCache: true,
+    new webpack.IgnorePlugin({
+      resourceRegExp: /^\.\/locale$/,
+      contextRegExp: /moment$/,
     }),
   ],
   optimization: {
     minimizer: [new TerserPlugin({
-      sourceMap: shouldUseSourceMap,
       terserOptions: {
         warnings: false,
         output: {
@@ -211,10 +209,12 @@ module.exports = {
   },
   // Some libraries import Node modules but don't use them in the browser.
   // Tell Webpack to provide empty mocks for them so importing them works.
-  node: {
-    dgram: 'empty',
-    fs: 'empty',
-    net: 'empty',
-    tls: 'empty',
+  resolve: {
+    fallback: {
+      dgram: 'empty',
+      fs: 'empty',
+      net: 'empty',
+      tls: 'empty',
+    }
   },
 };

config/webpackDevServer.config.js

@@ -2,65 +2,51 @@
 
 const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware');
 const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware');
-const config = require('./webpack.config.dev');
+const webpackConfig = require('./webpack.config.dev');
 
 const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
 const host = process.env.HOST || '0.0.0.0';
+const port = process.env.PORT || 3000;
 
-module.exports = function(proxy, allowedHost) {
+module.exports = function() {
   return {
-    // WebpackDevServer 2.4.3 introduced a security fix that prevents remote
-    // websites from potentially accessing local content through DNS rebinding:
-    // https://github.com/webpack/webpack-dev-server/issues/887
-    // https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a
-    // However, it made several existing use cases such as development in cloud
-    // environment or subdomains in development significantly more complicated:
-    // https://github.com/facebookincubator/create-react-app/issues/2271
-    // https://github.com/facebookincubator/create-react-app/issues/2233
-    disableHostCheck:
-      !proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true',
+    allowedHosts: ['localhost', '0.0.0.0', '127.0.0.1'],
     // Enable gzip compression of generated files.
     compress: true,
-    // Silence WebpackDevServer's own logs since they're generally not useful.
-    // It will still show compile warnings and errors with this setting.
-    clientLogLevel: 'none',
     // By default files from `contentBase` will not trigger a page reload.
-    watchContentBase: true,
-    // Enable hot reloading server. It will provide /sockjs-node/ endpoint
-    // for the WebpackDevServer client so it can learn when the files were
-    // updated. The WebpackDevServer client is included as an entry point
-    // in the Webpack development configuration. Note that only changes
-    // to CSS are currently hot reloaded. JS changes will refresh the browser.
-    hot: true,
-    // It is important to tell WebpackDevServer to use the same "root" path
-    // as we specified in the config. In development, we always serve from /.
-    publicPath: config.output.publicPath,
-    quiet: false,
-    // Reportedly, this avoids CPU overload on some systems.
-    // https://github.com/facebookincubator/create-react-app/issues/293
-    watchOptions: {
-      ignored: /node_modules/,
+    static: {
+      directory: webpackConfig.output.path,
+      watch: true,
     },
     // Enable HTTPS if the HTTPS environment variable is set to 'true'
     https: protocol === 'https',
     host: host,
-    overlay: false,
+    client: { 
+      logging: 'none',
+      overlay: false,
+    },
+    open: true,
+    devMiddleware: {
+      publicPath: webpackConfig.output.publicPath,
+    },
     historyApiFallback: {
       // Paths with dots should still use the history fallback.
       // See https://github.com/facebookincubator/create-react-app/issues/387.
       disableDotRule: true,
     },
-    public: allowedHost,
-    proxy,
-    setup(app) {
+    host: host,
+    port: port,
+    //proxy,
+    setupMiddlewares: function(middlewares) {
       // This lets us open files from the runtime error overlay.
-      app.use(errorOverlayMiddleware());
+      middlewares.unshift(errorOverlayMiddleware());
       // This service worker file is effectively a 'no-op' that will reset any
       // previous service worker registered for the same host:port combination.
       // We do this in development to avoid hitting the production cache if
       // it used the same host and port.
       // https://github.com/facebookincubator/create-react-app/issues/2272#issuecomment-302832432
-      app.use(noopServiceWorkerMiddleware());
+      middlewares.unshift(noopServiceWorkerMiddleware(webpackConfig.output.publicPath));
+      return middlewares;
     },
   };
 };