feat - [webpack v5 migration]

.github/workflows/ci.yml

@@ -1,14 +1,14 @@
 name: React Template CI
 on:
   pull_request:
-    branches: [ master ]
+    branches: [master]
 jobs:
   build-and-test:
     name: Build & Test
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [10.x]
+        node-version: [12.x]
     steps:
       - uses: actions/checkout@v1
 

.storybook/webpack.config.js

@@ -1,5 +1,7 @@
 const path = require('path');
-const genBaseConfig = require('../internals/webpack/webpack.base.babel.js');
+const genBaseConfig = require('../internals/webpack/webpack.config.base');
+const colors = require('../app/themes/colors');
+
 module.exports = ({ config }) => {
   // hack cause smart knobs is not working on production
   process.env.NODE_ENV = 'development';
@@ -10,7 +12,7 @@ module.exports = ({ config }) => {
     test: /\.less$/,
     use: [
       {
-        loader: 'style-loader' // creates style nodes from JS strings
+        loader: 'style-loader'
       },
       {
         loader: 'css-loader'
@@ -20,7 +22,9 @@ module.exports = ({ config }) => {
         options: {
           lessOptions: {
             javascriptEnabled: true,
-            modifyVars: {}
+            modifyVars: {
+              'primary-color': colors.secondary
+            }
           }
         }
       }

README.md

@@ -13,8 +13,7 @@
 An enterprise react template application showcasing - Testing strategies, Global state management, middleware support, a network layer, component library integration, localization, PWA support, route configuration, lazy loading, and Continuous integration & deployment.
   </p>
 
-  ___
-
+---
 
   <p>
     <h4>
@@ -31,9 +30,8 @@ An enterprise react template application showcasing - Testing strategies, Global
     </a>
   </div>
 
-  ___
+---
 
-  <span>We’re always looking for people who value their work, so come and join us. <a href="https://www.wednesday.is/hiring">We are hiring!</a></span>
 </div>
 
 ### Built using [react-floki](https://github.com/wednesday-solutions/react-floki)
@@ -117,57 +115,64 @@ An enterprise react template application showcasing - Testing strategies, Global
 - Storybooks allows you to work on one component at a time. You can develop entire UIs without needing to start up a complex dev stack, force certain data into your database, or navigate around your application.
 
   Take a look at the following files
+
   - [.storybook/webpack.config.js](.storybook/webpack.config.js)
   - [.storybook/config.js](.storybook/config.js)
   - [.storybook/addons.js](.storybook/addons.js)
   - [app/components/Clickable/stories/Clickable.stories.js](app/components/Clickable/stories/Clickable.stories.js)
 
 ## Bundling your application using Webpack
 
-- We're using and configuring webpack to bundle our React application. 
+- We're using and configuring webpack to bundle our React application.
 
   Take a look at the following files
-  - [internals/webpack/webpack.base.babel.js](internals/webpack/webpack.base.babel.js)
-  - [internals/webpack/webpack.dev.babel.js](internals/webpack/webpack.dev.babel.js)
-  - [internals/webpack/webpack.prod.babel.js](internals/webpack/webpack.prod.babel.js)
+
+  - [internals/webpack/webpack.config.base.js](internals/webpack/webpack.config.base.js)
+  - [internals/webpack/webpack.config.dev.js](internals/webpack/webpack.config.dev.js)
+  - [internals/webpack/webpack.config.prod.js](internals/webpack/webpack.config.prod.js)
 
 ## Analyzing the bundle size using webpack-bundle-analyzer
 
-- The size of the bundle is analyzed using the webpack-bundle-analyzer to make sure that the bundle is lean and optimized. 
+- The size of the bundle is analyzed using the webpack-bundle-analyzer to make sure that the bundle is lean and optimized.
 
   Take a look at the following files
+
   - [internals/webpack/webpack.dev.babel.js](internals/webpack/webpack.dev.babel.js)
 
 ## Implementing CI/CD pipelines using Github Actions
 
-- CI/CD using Github Actions. 
+- CI/CD using Github Actions.
   The CI pipeline has the following phases
+
   - Checkout
   - Install dependencies
   - Lint
   - Test
   - Build
-    
+
   The CD pipeline has the following phases
+
   - Checkout
   - Install dependencies
   - Build
   - Deploy
 
   Take a look at the following files
+
   - [.github/workflows/ci.yml](.github/workflows/ci.yml)
   - [.github/workflows/cd.yml](.github/workflows/cd.yml)
-   
+
 ## Testing using @testing-library/react
 
-- Testing is done using the @testing-library/react. 
+- Testing is done using the @testing-library/react.
 
   Take a look at the following files
+
   - [jest.config.js](jest.config.js)
   - [jest.setup.js](jest.setup.js)
   - [app/containers/HomeContainer/tests](app/containers/HomeContainer/tests)
   - [app/services/tests/repoApi.test.js](app/services/tests/repoApi.test.js)
-  - [app/components/T/tests/index.test.js](app/components/T/tests/index.test.js) 
+  - [app/components/T/tests/index.test.js](app/components/T/tests/index.test.js)
 
 ## Scaffolding components/containers/tests using react-floki
 
@@ -210,16 +215,15 @@ Take a look at the following files
 Take a look at the following files
 
 - [app/app.js](app/app.js)
-- [internals/webpack/webpack.prod.babel.js](internals/webpack/webpack.prod.babel.js)
-
+- [internals/webpack/webpack.config.prod.js](internals/webpack/webpack.config.prod.js)
 
-## Gotchas	
+## Gotchas
 
 - For github pages to work on an [arbitrary route](https://wednesday-solutions.github.io/react-template/) we have used some workarounds.
-For production builds deployed directly on `/` you need to make the following changes
-  1. [publicPath: process.env.NODE_ENV === 'production' ? '/react-template/' : '/'](https://github.com/wednesday-solutions/react-template/blob/master/internals/webpack/webpack.base.babel.js#L29)
-   should be: ```publicPath: '/'	```
-  2. [relativePaths: process.env.NODE_ENV === 'production'](https://github.com/wednesday-solutions/react-template/blob/master/internals/webpack/webpack.prod.babel.js#L85)
-  should be: ```relativePaths: false,```
-  2. [const history = createBrowserHistory({ basename: baseUrl });](https://github.com/wednesday-solutions/react-template/blob/master/app/utils/history.js#L3)
-  should be:  ```const history = createBrowserHistory();```
+  For production builds deployed directly on `/` you need to make the following changes
+  1. [publicPath: process.env.NODE_ENV === 'production' ? '/react-template/' : '/'](https://github.com/wednesday-solutions/react-template/blob/master/internals/webpack/webpack.config.base.js#L29)
+     should be: `publicPath: '/'`
+  2. [relativePaths: process.env.NODE_ENV === 'production'](https://github.com/wednesday-solutions/react-template/blob/master/internals/webpack/webpack.config.prod.js#L85)
+     should be: `relativePaths: false,`
+  3. [const history = createBrowserHistory({ basename: baseUrl });](https://github.com/wednesday-solutions/react-template/blob/master/app/utils/history.js#L3)
+     should be: `const history = createBrowserHistory();`

app/app.js

@@ -85,7 +85,7 @@ if (!window.Intl) {
 // it's not most important operation and if main code fails,
 // we do not want it installed
 if (process.env.NODE_ENV === 'production') {
-  require('offline-plugin/runtime').install({
+  require('@lcdp/offline-plugin/runtime').install({
     onUpdated: () => {
       // Reload the webpage to load into the new version
       window.location.reload();

app/containers/HomeContainer/tests/__snapshots__/index.test.js.snap

@@ -22,7 +22,7 @@ exports[`<HomeContainer /> tests should render and match the snapshot 1`] = `
         </div>
       </div>
       <div
-        class="ant-card HomeContainer__CustomCard-l0s8pp-0 etQjAO ant-card-bordered"
+        class="ant-card ant-card-bordered HomeContainer__CustomCard-l0s8pp-0 etQjAO"
         maxwidth="500"
       >
         <div
@@ -48,44 +48,51 @@ exports[`<HomeContainer /> tests should render and match the snapshot 1`] = `
             Get details of repositories
           </p>
           <span
-            class="ant-input-search ant-input-affix-wrapper"
+            class="ant-input-group-wrapper ant-input-search"
           >
-            <input
-              class="ant-input"
-              data-testid="search-bar"
-              type="text"
-              value=""
-            />
             <span
-              class="ant-input-suffix"
+              class="ant-input-wrapper ant-input-group"
             >
+              <input
+                class="ant-input"
+                data-testid="search-bar"
+                type="text"
+                value=""
+              />
               <span
-                aria-label="search"
-                class="anticon anticon-search ant-input-search-icon"
-                role="img"
-                tabindex="-1"
+                class="ant-input-group-addon"
               >
-                <svg
-                  aria-hidden="true"
-                  class=""
-                  data-icon="search"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
+                <button
+                  class="ant-btn ant-btn-icon-only ant-input-search-button"
+                  type="button"
                 >
-                  <path
-                    d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
-                  />
-                </svg>
+                  <span
+                    aria-label="search"
+                    class="anticon anticon-search"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="search"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
+                      />
+                    </svg>
+                  </span>
+                </button>
               </span>
             </span>
           </span>
         </div>
       </div>
       <div
-        class="ant-card HomeContainer__CustomCard-l0s8pp-0 lglBtv ant-card-bordered"
+        class="ant-card ant-card-bordered HomeContainer__CustomCard-l0s8pp-0 lglBtv"
         color="grey"
       >
         <div

app/index.html

@@ -10,15 +10,13 @@
     <!-- Allow installing the app to the homescreen -->
     <meta name="mobile-web-app-capable" content="yes" />
 
-    <link rel="icon" href="/react-template/favicon.ico" />
     <title>React Template</title>
   </head>
 
   <body>
     <!-- Display a message if JS has been disabled on the browser. -->
     <noscript
-      >If you're seeing this message, that means
-      <strong>JavaScript has been disabled on your browser</strong>, please
+      >If you're seeing this message, that means <strong>JavaScript has been disabled on your browser</strong>, please
       <strong>enable JS</strong> to make this app work.</noscript
     >
 

babel.config.js

@@ -26,7 +26,7 @@ module.exports = {
         'transform-react-remove-prop-types',
         '@babel/plugin-transform-react-inline-elements',
         '@babel/plugin-transform-react-constant-elements',
-        ['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }, 'import-antd']
+        ['import', { libraryName: 'antd', /*  libraryDirectory: 'es', */ style: true }, 'import-antd']
       ]
     },
     dev: {

internals/webpack/webpack.base.babel.js → internals/webpack/webpack.config.base.js

@@ -66,7 +66,8 @@ module.exports = options => ({
                 modifyVars: {
                   'primary-color': colors.secondary
                 }
-              }
+              },
+              implementation: require('less')
             }
           }
         ]
@@ -121,7 +122,7 @@ module.exports = options => ({
                 optimizationLevel: 7
               },
               pngquant: {
-                quality: '65-90',
+                quality: [0.65, 0.9],
                 speed: 4
               }
             }

internals/webpack/webpack.dev.babel.js → internals/webpack/webpack.config.dev.js

@@ -8,7 +8,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const CircularDependencyPlugin = require('circular-dependency-plugin');
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
-module.exports = require('./webpack.base.babel')({
+module.exports = require('./webpack.config.base')({
   mode: 'development',
 
   // Add hot reloading in development
@@ -20,7 +20,6 @@ module.exports = require('./webpack.base.babel')({
 
   // Don't use hashes in dev mode for better performance
   output: {
-    filename: '[name].js',
     chunkFilename: '[name].chunk.js'
   },
 

internals/webpack/webpack.prod.babel.js → internals/webpack/webpack.config.prod.js

@@ -2,14 +2,12 @@
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const WebpackPwaManifest = require('webpack-pwa-manifest');
-const OfflinePlugin = require('offline-plugin');
-const { HashedModuleIdsPlugin } = require('webpack');
+const OfflinePlugin = require('@lcdp/offline-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
 const CompressionPlugin = require('compression-webpack-plugin');
 
-module.exports = require('./webpack.base.babel')({
+module.exports = require('./webpack.config.base')({
   mode: 'production',
-
   // In production, we skip all hot-reloading stuff
   entry: [require.resolve('react-app-polyfill/ie11'), path.join(process.cwd(), 'app/app.js')],
 
@@ -35,9 +33,7 @@ module.exports = require('./webpack.base.babel')({
             ascii_only: true
           }
         },
-        parallel: true,
-        cache: true,
-        sourceMap: true
+        parallel: true
       })
     ],
     nodeEnv: 'production',
@@ -73,8 +69,8 @@ module.exports = require('./webpack.base.babel')({
         removeStyleLinkTypeAttributes: true,
         keepClosingSlash: true,
         minifyJS: true,
-        minifyCSS: true,
-        minifyURLs: true
+        minifyCSS: true
+        // minifyURLs: true
       },
       inject: true
     }),
@@ -104,7 +100,6 @@ module.exports = require('./webpack.base.babel')({
     }),
 
     new CompressionPlugin({
-      algorithm: 'gzip',
       test: /\.js$|\.css$|\.html$/,
       threshold: 10240,
       minRatio: 0.8
@@ -129,12 +124,6 @@ module.exports = require('./webpack.base.babel')({
           ios: true
         }
       ]
-    }),
-
-    new HashedModuleIdsPlugin({
-      hashFunction: 'sha256',
-      hashDigest: 'hex',
-      hashDigestLength: 20
     })
   ],