Now, revisit package.json and add helper npm scripts:

nano package.json
Now, create a webpack config for the server that uses Babel Loader to transpile the code. Start by creating the webpack.server.js file in the project’s root directory:

nano webpack.server.js
webpack.server.js

const path = require('path');
const nodeExternals = require('webpack-node-externals');

module.exports = {
  entry: './server/index.js',
  target: 'node',
  externals: [nodeExternals()],
  output: {
    path: path.resolve('server-build'),
    filename: 'index.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader'
      }
    ]
  }
};
With this in place, you can run the following to build the client-side app, bundle and transpile the server code, and start up the server on :3006:

npm run dev
Next, create a new Babel configuration file in the project’s root directory:

nano .babelrc.json
package.json

"scripts": {
  "dev:build-server": "NODE_ENV=development webpack --config webpack.server.js --mode=development -w",
  "dev:start": "nodemon ./server-build/index.js",
  "dev": "npm-run-all --parallel build dev:*",
  // ...
},
.babelrc.json

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}
Let’s install those packages now by entering the following commands in your terminal window:

npm install nodemon@2.0.15 --save-dev
npm install npm-run-all@4.1.5 --save-dev
Previously, viewing the source code revealed:

Output<div id="root"></div>
But now, with the changes you made, the source code reveals:

Output<div id="root"><h1 data-reactroot="">Hello <!-- -->Sammy<!-- -->!</h1></div>

Recommend

How to Enable Server-Side Rendering for a React App Step 3 — Configuring webpack, Babel, and npm Scripts

How to Enable Server-Side Rendering for a React App Step 2 — Creating an Express Server and Rendering the App Component

How to Enable Server-Side Rendering for a React App Step 1 — Creating the React App and Modifying the App Component

How To Set Up Apache with a Free Signed SSL Certificate on a VPS Prerequisites

Comment installer la pile Linux, Nginx, MySQL, PHP (LEMP) sur CentOS 8 [Démarrage rapide] Étape 4 - Test de PHP avec Nginx

Comment installer la pile Linux, Nginx, MySQL, PHP (LEMP) sur CentOS 8 [Démarrage rapide] Étape 3 - Installation de PHP-FPM

Comment installer la pile Linux, Nginx, MySQL, PHP (LEMP) sur CentOS 8 [Démarrage rapide] Étape 2 - Installation de MariaDB

Comment installer la pile Linux, Nginx, MySQL, PHP (LEMP) sur CentOS 8 [Démarrage rapide] Étape 1 - Installation de Nginx

Getting Started with Data Visualization Using JavaScript and the D3 Library Finished Code and Code Improvements

Getting Started with Data Visualization Using JavaScript and the D3 Library Step 5 — Adding Labels

Getting Started with Data Visualization Using JavaScript and the D3 Library Step 4 — Styling with D3

Getting Started with Data Visualization Using JavaScript and the D3 Library Step 3 — Adding Rectangles Making the Rectangles Reflect the Data

Getting Started with Data Visualization Using JavaScript and the D3 Library Step 2 — Setting Up the SVG in JavaScript

Getting Started with Data Visualization Using JavaScript and the D3 Library Step 1 — Create Files and Reference D3

Установка Elasticsearch, Logstash и Kibana (комплекс Elastic) в Ubuntu 18.04 Шаг 4 — Установка и настройка Filebeat

Установка Elasticsearch, Logstash и Kibana (комплекс Elastic) в Ubuntu 18.04 Шаг 3 — Установка и настройка Logstash