Implementing Node.js with React/Redux and Webpack 4

So far, in all the recipes, we have used React directly with create-react-app or Webpack 4. In this recipe, we are going to implement React and Redux using Node.js and Webpack 4; this will help us to have more robust applications.

Getting Ready

Using the same code of the last recipe, you will need to install all these packages:

npm install babel-cli express nodemon react-hot-loader react-router-dom webpack-hot-middleware compression-webpack-plugin react-redux redux

 

 

How to do it...

Let's get started with the implementation:

1. Include the react-hot-loader plugin in our .babelrc file just for the development environment:

  {
    "presets": ["env", "react"],
    "env": {
      "development": {
        "plugins": [
          "react-hot-loader/babel"
        ]
      }
    }
  }

File: .babelrc

2. Create an Express Server; you need to create a file at src/server/index.js:

// Dependencies
import express from 'express';
import path from 'path';
import webpackDevMiddleware...