add modern ssr method

Author: Kallenju

.gitignore

@@ -1,2 +1,3 @@
 /node_modules
-/dist
+/dist
+*.env

README.md

@@ -56,16 +56,21 @@ npm run dev
   - **fonts**
   - **styles**
 - **types**
+- **views**
 
 ## How it works
 
 ### Server-Side Rendering
 
 `./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 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 template (`./src/views/index.tsx`), whenever there is an HTTP GET request with a path (`/`) relative to the site root.
 
-After the `load` event is fired, the client code `hydrate` obtained React root. The `hydrate` method is used to render React components on the client side. It is similar to `render`, but it will attach event listeners to the existing markup instead of replacing it.
+The server code use modern React method `renderToPipeableStream` to render React components to a stream. It is similar to `renderToString`, but it returns a Node.js Readable stream instead of a string. This is useful for sending the rendered HTML to the client in chunks.
+
+The client code `hydrate` obtained React root. The `hydrate` method is used to render React components on the client side. It is similar to `render`, but it will attach event listeners to the existing markup instead of replacing it.
+
+In the `App.tsx` component, `React.Suspense` component and `React.lazy` method can be used to load components asynchronously. The `React.Suspense` component is used to display a fallback component while waiting for the asynchronous component to load. The `React.lazy` function is used to load components asynchronously.
 
 ### Hot Module Replacement
 
@@ -93,12 +98,17 @@ It is possible to write snapshot tests (using `jest` and `react-test-renderer`)
 
 The template contains a simple tests for the `Header` component. The test is located in the `./src/__tests__/Header.test.tsx` file.
 
+### Dotenv
+
+The `dotenv` package is used to load environment variables from a `.env` file into `process.env`. The `.env` files is located in the root folder of the project.
+
 ## What is used in the template?
 
 ### Server-Side Rendering
 
 - Express server
 - Nodemon
+- Dotenv
 
 ### Hot Module Replacement
 
@@ -107,19 +117,22 @@ The template contains a simple tests for the `Header` component. The test is loc
 - React Fast Refresh
 - Webpack modules and plugins (webpack-dev-middleware, webpack-hot-middleware)
 - Webpack plugins (webpack.HotModuleReplacementPlugin)
+- Dotenv
 
 ### Code compilation
 
 - Webpack loader (babel-loader)
 - Webpack plugin (fork-ts-checker-webpack-plugin)
 - browserslist
+- Dotenv
 
 ### Styles
 
 - Stylus
 - postcss
-- Webpack loaders (stylus-loader, css-loader, postcss-loader, style-loader)
+- Webpack loaders (mini-css-extract-plugin, css-loader, postcss-loader, style-loader)
 - browserslist
+- Dotenv
 
 ### Image Optimization
 
@@ -136,3 +149,4 @@ The template contains a simple tests for the `Header` component. The test is loc
 - Jest
 - React Test Renderer
 - React Testing Library
+- Dotenv

bin/dev.js

@@ -1,5 +1,13 @@
 /* eslint-disable no-undef */
 const path = require('path');
+const dotenv = require('dotenv');
+
+dotenv.config({
+  path: path.resolve(__dirname, `../.${process.env.DOTENV}.env`),
+});
+
+const { DEV_SERVER_PORT = 3000, HMR_SERVER_PORT = 3001 } = process.env;
+
 const express = require('express');
 const webpack = require('webpack');
 const [
@@ -15,19 +23,20 @@ const hmrServer = express();
 
 const clientCompiler = webpack(webpackClientConfig);
 
-const allowedOrigins = ['http://localhost:3000', 'http://localhost:3001'];
+const allowedOrigins = [
+  `http://localhost:${DEV_SERVER_PORT}`,
+  `http://localhost:${HMR_SERVER_PORT}`,
+];
 
 hmrServer.use(
   cors({
     origin: function (origin, callback) {
-      // allow requests with no origin
-      // (like mobile apps or curl requests)
       if (!origin) return callback(null, true);
       if (allowedOrigins.indexOf(origin) === -1) {
-        const msg =
+        const message =
           'The CORS policy for this site does not ' +
           'allow access from the specified Origin.';
-        return callback(new Error(msg), false);
+        return callback(new Error(message), false);
       }
       return callback(null, true);
     },
@@ -48,8 +57,10 @@ hmrServer.use(
   })
 );
 
-hmrServer.listen(3001, () => {
-  console.log('\nHMR Server successfully started on http://localhost:3001\n');
+hmrServer.listen(HMR_SERVER_PORT, () => {
+  console.log(
+    `\nHMR Server successfully started on http://localhost:${HMR_SERVER_PORT}\n`
+  );
 });
 
 const serverCompiler = webpack(webpackServerConfig);
@@ -75,6 +86,6 @@ serverCompiler.run((err) => {
   });
 
   console.log(
-    '\n!!!Server!!!\nServer started on port http://localhost:3000\n!!!Server!!!'
+    `\n!!!Server!!!\nServer started on port http://localhost:${DEV_SERVER_PORT}\n!!!Server!!!`
   );
 });

config/webpack.client.config.js

@@ -1,22 +1,49 @@
 /* eslint-disable no-undef */
 const path = require('path');
+const dotenv = require('dotenv');
+
+dotenv.config({
+  path: path.resolve(__dirname, `../.${process.env.DOTENV}.env`),
+});
+
+const { NODE_ENV = 'production' } = process.env;
+
 const webpack = require('webpack');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 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 AssetsPlugin = require('assets-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 AssetsPlugin({
+    path: path.resolve(__dirname, '../dist'),
+    fullPath: false,
+    filename: 'assetsMap.json',
+    prettyPrint: NODE_ENV === 'development',
+    includeAllFileTypes: false,
+    fileTypes: ['css', 'js'],
+    processOutput(assets) {
+      const output = JSON.stringify(assets);
+
+      process.env.ASSETS_MAP_GENERAL = output;
+
+      return output;
+    },
+  }),
+  new MiniCssExtractPlugin({
+    filename:
+      NODE_ENV === 'development' ? 'main.css' : 'main.[contenthash].css',
+    chunkFilename:
+      NODE_ENV === 'development' ? '[id].css' : '[id].[contenthash].css',
   }),
   new ImageMinimizerPlugin({
     deleteOriginalAssets: false,
@@ -64,6 +91,9 @@ const basePlugins = [
       },
     ],
   }),
+  new CopyPlugin({
+    patterns: [{ from: path.resolve(__dirname, '../src/static') }],
+  }),
 ];
 
 module.exports = {
@@ -73,7 +103,8 @@ module.exports = {
   ],
   output: {
     path: path.resolve(__dirname, '../dist/client'),
-    filename: 'client.js',
+    filename:
+      NODE_ENV === 'development' ? 'client.js' : 'client.[contenthash].js',
     publicPath: 'http://localhost:3001/static',
   },
 
@@ -92,7 +123,10 @@ module.exports = {
         exclude: GLOBAL_STYLES_REGEXP,
         use: [
           {
-            loader: 'style-loader',
+            loader: MiniCssExtractPlugin.loader,
+            options: {
+              emit: true,
+            },
           },
           {
             loader: 'string-replace-loader',
@@ -122,7 +156,10 @@ module.exports = {
         test: GLOBAL_STYLES_REGEXP,
         use: [
           {
-            loader: 'style-loader',
+            loader: MiniCssExtractPlugin.loader,
+            options: {
+              emit: true,
+            },
           },
           {
             loader: 'string-replace-loader',
@@ -157,20 +194,20 @@ module.exports = {
     extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],
   },
 
-  devtool: NODE_ENV === 'development' ? 'eval' : false,
+  devtool: NODE_ENV === 'development' ? 'eval-source-map' : false,
 
   plugins:
     NODE_ENV === 'development'
       ? [
-          new CleanWebpackPlugin(),
           ...basePlugins,
-          new webpack.HotModuleReplacementPlugin(),
           new ReactRefreshPlugin({
             overlay: {
               sockIntegration: 'whm',
             },
           }),
+          new webpack.HotModuleReplacementPlugin(),
           new ForkTsCheckerWebpackPlugin({ typescript: { mode: 'write-dts' } }),
+          new CleanWebpackPlugin(),
         ]
       : basePlugins,
 

config/webpack.server.config.js

@@ -1,14 +1,22 @@
 /* eslint-disable no-undef */
 const path = require('path');
+const dotenv = require('dotenv');
+
+dotenv.config({
+  path: path.resolve(__dirname, `../.${process.env.DOTENV}.env`),
+});
+
+const { NODE_ENV = 'production' } = process.env;
+
 const webpackNodeExternals = require('webpack-node-externals');
 const webpack = require('webpack');
 const ReactRefreshPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 
-const { NODE_ENV } = process.env;
-
 const MODULE_CODE_REGEXP = /\.[tj]sx?$/;
 const STYLES_REGEXP = /.styl$/;
 
+const basePlugins = [];
+
 module.exports = {
   entry: path.resolve(__dirname, '../src/server/server.tsx'),
 
@@ -55,14 +63,15 @@ module.exports = {
   plugins:
     NODE_ENV === 'development'
       ? [
-          new webpack.HotModuleReplacementPlugin(),
+          ...basePlugins,
           new ReactRefreshPlugin({
             overlay: {
               sockIntegration: 'whm',
             },
           }),
+          new webpack.HotModuleReplacementPlugin(),
         ]
-      : [],
+      : [...basePlugins],
 
   externals: [webpackNodeExternals()],