add image optimization, almost complete README

Author: Kallenju

README.md

@@ -32,25 +32,74 @@ npm run dev
 - **shared**
   - **Header**
   - **Layout**
+- **static**
+  - **images**
+  - **scripts**
+  - **styles**
 - **types**
 
 ## How it works
 
-`./src` contains `App.tsx`, which is the entry point of the React app. It imports components from `./src/shared` and global styles from `./assets/styles/`. `App.tsx` is in turn imported be server and client files in `./src/server/` and `./src/client/`, respectively.
+The `./dist/` folder is the root of the site. It is created by Webpack and contains the result of the build process:
+
+```shell
+npm run dev
+```
+
+or
+
+```shell
+npm run build
+```
+
+`./src` contains `App.tsx`, which is the entry point of the React app. It imports components from `./src/shared` and global styles from `./assets/styles/`. `App.tsx` is in turn imported by server (`server.tsx`) and client (`index.tsx`) files in `./src/server/` and `./src/client/`, respectively.
+
+The `app.get()` method in server code (`./src/server/server.tsx`) specifies a callback function that will render to string React component from `App.tsx` and past it in a HTML template (`./src/server/indexTemplate.ts`), whenever there is an HTTP GET request with a path (`/`) relative to the site root.
 
-The `app.get()` method specifies a callback function that will render to string React component from `App.tsx` and past it in a HTML template, whenever there is an HTTP GET request with a path ('/') relative to the site root. HTML template are in `./src/server`.
+After the `load` event is fired, the client code `hydrate` obtained React root.
 
-After the `load` event is fired, the client code `hydrate` obtained React component.
+All files in `./src/static/` are copied to the `./dist/client` folder without changes. For example, the `./src/static/images` folder will be copied to `./dist/client/images`. All files in `./src/static` are accessible through the virtual prefix `/static`. For example, the `./src/static/images/raster/favicon/favicon.png` file will be available at the address `http://localhost:3000/static/images/raster/favicon/favicon.png` === `/static/images/raster/favicon/favicon.png`.
+
+Images in `./src/static/images` are optimized by Webpack. For images with `jpeg` or `jpg` or `png` extentions, the `image-minimizer-webpack-plugin` and `sharp` generate a WebP version of the images.
+
+After each re-building webpack plugin `fork-ts-checker-webpack-plugin` checks the typescript code for errors.
+
+The `browserslist` is used by babel and postcss to compile code for the specified browsers. The list of browsers is specified in the `package.json` file.
 
 ## What is used in the template?
 
+### Code
+
+- Webpack loader (babel-loader)
+- Webpack plugin (fork-ts-checker-webpack-plugin)
+- browserslist
+
+### Styles
+
+- Stylus
+- postcss
+- Webpack loaders (stylus-loader, css-loader, postcss-loader, style-loader)
+- browserslist
+
+### Prettier && Linter
+
+- Prettier
+- ESLint
+
 ### Hot Module Replacement
 
-- express server
+- Express server
 - react-refresh-webpack-plugin
 - React Fast Refresh
-- Webpack modules and plugins (webpack-dev-middleware, webpack-hot-middleware, webpack.HotModuleReplacementPlugin)
+- Webpack modules and plugins (webpack-dev-middleware, webpack-hot-middleware)
+- Webpack plugins (webpack.HotModuleReplacementPlugin)
 
 ### Server-Side Rendering
 
-- express server
+- Express server
+- Nodemon
+
+### Image Optimization
+
+- Webpack plugin (image-minimizer-webpack-plugin)
+- Sharp

bin/dev.js

@@ -37,7 +37,6 @@ hmrServer.use(
 hmrServer.use(
   webpackDevMiddleware(clientCompiler, {
     publicPath: webpackClientConfig.output.publicPath,
-    serverSideRender: true,
     writeToDisk: true,
     stats: 'errors-only',
   })
@@ -50,20 +49,21 @@ hmrServer.use(
 );
 
 hmrServer.listen(3001, () => {
-  console.log('HMR Server successfully started');
+  console.log('\nHMR Server successfully started on http://localhost:3001\n');
 });
 
 const serverCompiler = webpack(webpackServerConfig);
 
 serverCompiler.run((err) => {
   if (err) {
-    console.log(`Compilation failed:`, err);
+    console.log(`\nCompilation with server config was failed: ${err}\n`);
   }
+
   serverCompiler.watch({}, (err) => {
     if (err) {
-      console.log(`Compilation failed:`, err);
+      console.log(`\nCompilation with server config was failed: ${err}\n`);
     }
-    console.log('Compilation was successfully');
+    console.log('\nCompilation with server config was successful\n');
   });
 
   nodemon({
@@ -75,6 +75,6 @@ serverCompiler.run((err) => {
   });
 
   console.log(
-    '\n!!!Server!!!\nServer started on port http://localhost:3000\n!!!Server!!!\n'
+    '\n!!!Server!!!\nServer started on port http://localhost:3000\n!!!Server!!!'
   );
 });

config/webpack.client.config.js

@@ -1,14 +1,70 @@
 /* eslint-disable no-undef */
 const path = require('path');
-const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const webpack = require('webpack');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const CopyPlugin = require('copy-webpack-plugin');
+const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
 const ReactRefreshPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 
 const { NODE_ENV } = process.env;
 const MODULE_CODE_REGEXP = /\.[tj]sx?$/;
 const MODULE_STYLES_REGEXP = /\.module\.styl$/;
 const GLOBAL_STYLES_REGEXP = /\.global\.styl$/;
+const ALL_IMAGES_REGEXP = /\.(png|svg|jpe?g|gif|ico)$/i;
+const TOWEBP_IMAGES_REGEXP = /\.(jpe?g|png)$/i;
+
+const basePlugins = [
+  new CopyPlugin({
+    patterns: [{ from: path.resolve(__dirname, '../src/static') }],
+  }),
+  new ImageMinimizerPlugin({
+    deleteOriginalAssets: false,
+    test: TOWEBP_IMAGES_REGEXP,
+    minimizer: {
+      implementation: ImageMinimizerPlugin.sharpMinify,
+      options: {
+        encodeOptions: {
+          jpeg: {
+            quality: 75,
+            effort: 9,
+          },
+          png: {
+            quality: 75,
+            effort: 9,
+          },
+        },
+      },
+    },
+    generator: [
+      {
+        type: 'import',
+        preset: 'webp',
+        implementation: ImageMinimizerPlugin.sharpGenerate,
+        options: {
+          encodeOptions: {
+            webp: {
+              quality: 80,
+              effort: 6,
+            },
+          },
+        },
+      },
+      {
+        type: 'asset',
+        implementation: ImageMinimizerPlugin.sharpGenerate,
+        options: {
+          encodeOptions: {
+            webp: {
+              quality: 80,
+              effort: 6,
+            },
+          },
+        },
+      },
+    ],
+  }),
+];
 
 module.exports = {
   entry: [
@@ -18,7 +74,7 @@ module.exports = {
   output: {
     path: path.resolve(__dirname, '../dist/client'),
     filename: 'client.js',
-    publicPath: '//localhost:3001/static',
+    publicPath: 'http://localhost:3001/static',
   },
 
   module: {
@@ -65,6 +121,16 @@ module.exports = {
       {
         test: GLOBAL_STYLES_REGEXP,
         use: [
+          {
+            loader: 'style-loader',
+          },
+          {
+            loader: 'string-replace-loader',
+            options: {
+              search: /@supports\s\(selector:\sfocus-visible\)/g,
+              replace: '@supports selector(:focus-visible)',
+            },
+          },
           {
             loader: 'css-loader',
           },
@@ -76,6 +142,14 @@ module.exports = {
           },
         ],
       },
+      {
+        test: ALL_IMAGES_REGEXP,
+        include: [path.resolve(__dirname, './src/assets/images')],
+        type: 'asset/resource',
+        generator: {
+          filename: '[name][ext]',
+        },
+      },
     ],
   },
 
@@ -89,6 +163,7 @@ module.exports = {
     NODE_ENV === 'development'
       ? [
           new CleanWebpackPlugin(),
+          ...basePlugins,
           new webpack.HotModuleReplacementPlugin(),
           new ReactRefreshPlugin({
             overlay: {
@@ -97,7 +172,7 @@ module.exports = {
           }),
           new ForkTsCheckerWebpackPlugin({ typescript: { mode: 'write-dts' } }),
         ]
-      : [],
+      : basePlugins,
 
   mode: NODE_ENV === 'development' ? 'development' : 'production',
 };

config/webpack.server.config.js

@@ -6,6 +6,9 @@ const ReactRefreshPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 
 const { NODE_ENV } = process.env;
 
+const MODULE_CODE_REGEXP = /\.[tj]sx?$/;
+const STYLES_REGEXP = /.styl$/;
+
 module.exports = {
   entry: path.resolve(__dirname, '../src/server/server.tsx'),
 
@@ -17,15 +20,15 @@ module.exports = {
   module: {
     rules: [
       {
-        test: /\.[tj]sx?$/,
+        test: MODULE_CODE_REGEXP,
         use: [
           {
             loader: 'babel-loader',
           },
         ],
       },
       {
-        test: /\.styl$/,
+        test: STYLES_REGEXP,
         use: [
           {
             loader: 'css-loader',
@@ -51,7 +54,14 @@ module.exports = {
 
   plugins:
     NODE_ENV === 'development'
-      ? [new webpack.HotModuleReplacementPlugin(), new ReactRefreshPlugin()]
+      ? [
+          new webpack.HotModuleReplacementPlugin(),
+          new ReactRefreshPlugin({
+            overlay: {
+              sockIntegration: 'whm',
+            },
+          }),
+        ]
       : [],
 
   externals: [webpackNodeExternals()],