React Hot Loader with Express or Web Dev Server

We’ll build a counter app to show hot module reloading while maintaining state using webpack-dev-server or express to update the modules

React Hot Loader with Web Dev Server

Create Project

proj/
├─ dist/
├─ .babelrc
├─ package.json
├─ webpack.config.js
└─ src/
    └─ assets/
        └─ index.html
        └─ css/
        └─ js/
        └─ img/
        └─ fonts/
    └─ components/
    └─ pages/
    └─ services/ 
    └─ App.js
    └─ index.js

Initialise Project Folder

npm init -y

Install Development Dependencies

npm i -D \
webpack-dev-server \
webpack \
webpack-cli \ 
babel-loader \ 
@babel/core \
@babel/preset-env \
@babel/preset-react \
html-webpack-plugin 

Include .babelrc file to configure babel compilation for this project

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ]
}

Install Application Dependencies

npm i -S react react-dom react-hot-loader

Create src/assets/index.html

Create the react application with react-hot-loader

App.js

index.js

Configure webpack through a webpack.config.js file

Add a “dev” and “build” script to the package.json

...
"scripts": {
    "dev": "webpack-dev-server",
    "build": "webpack"
},
...

When you run dev the project, webpack writes the project to memory and any further updates are updated in memory without losing state.

When you build the project, webpack writes the project to disk under the “dist” folder.

coming soon… express config