Hot reloading in a React app with express server
Question
As of now I have a boilerplate set up for a MERN application having an express server on the backend and react on the frontend. I intend to set up hot reloading in my app- whenever there's any change in the react code without having to refresh the whole app(HMR).
I have webpack-dev-server and HotModuleReplacementPlugin installed. I've also tried to use --hot in the webpack script in package.json . If I run npm run webpack , the code compiles, and the server starts on localhost:8080 . It gives me something like this, which is not what I want really. I don't know it looks like it's showing me the root directory.
On the other hand, if I run npm start , the server starts and displays the react component, which is what I want, but with hot reloading. Right now, I have to refresh the page in order to see the changes.
So, I'm trying to understand what's really going on? Is there a way to add hot reloading when I type npm start ?
client/index.js
import React from "react"
import ReactDOM from "react-dom"
import App from "./containers/App"
ReactDOM.render(<App />, document.getElementById("root"))
client/containers/App.js
class App extends Component {
render() {
return (
<div>
<Router>
<Switch>
<Route exact path="/" component={HomePage} />
</Switch>
</Router>
</div>
)
}
}
export default App
client/components/HomePage.js
const HomePage = () => {
return (
<div>
<h1>React HomePage</h1>
</div>
)
}
export default HomePage
routes/index.js
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/*', function(req, res, next) {
res.render('index', { title: 'Travel Forum' });
});
module.exports = router;
views/index.ejs
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
</head>
<body>
<div id="root"></div>
<script src="/static/bundle.js"></script>
</body>
</html>
package.json
"scripts": {
"start": "NODE_ENV=development nodemon ./bin/www",
"webpack": "webpack-dev-server --config ./webpack.config.js --mode development --hot"
},
webpack.config.js
/* eslint-disable */
var webpack = require("webpack")
var path = require("path")
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
module.exports = {
mode: "development",
devtool: "inline-source-map",
entry: ["./client/index.js"],
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: { loader: "babel-loader" },
},
{
test: /\.(scss|css)$/,
use: [
{ loader: MiniCssExtractPlugin.loader },
{
loader: "css-loader",
},
{ loader: "sass-loader" },
],
},
{
test: /\.(png|jpg|gif|jpeg)$/,
use: [
{
loader: "file-loader",
options: {},
},
],
},
],
},
resolve: {
extensions: [".js", ".jsx"],
},
output: {
filename: "bundle.js",
path: __dirname + "/dist/bundle/",
publicPath: "/static/",
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.DefinePlugin({
"process.env": {
NODE_ENV: JSON.stringify("development"),
},
}),
new MiniCssExtractPlugin({
filename: "bundle.css",
}),
],
}
app.js
const createError = require("http-errors")
const express = require("express")
const bodyParser = require("body-parser")
const path = require("path")
const cookieParser = require("cookie-parser")
const logger = require("morgan")
const mongoose = require("mongoose")
const indexRouter = require("./routes/index")
const userRouter = require("./routes/users")
const app = express()
// view engine setup
app.set("views", path.join(__dirname, "views"))
app.set("view engine", "ejs")
app.use(logger("dev"))
app.use(express.json())
app.use(bodyParser.json())
app.use(express.urlencoded({ extended: false }))
app.use(cookieParser())
app.use(express.static(path.join(__dirname, "public")))
if (process.env.NODE_ENV === "development") {
const webpack = require("webpack")
const webpackConfig = require("./webpack.config")
const compiler = webpack(webpackConfig)
app.use(
require("webpack-dev-middleware")(compiler, {
noInfo: true,
publicPath: webpackConfig.output.publicPath,
})
)
app.use(require("webpack-hot-middleware")(compiler))
}
mongoose.connect(
"mongodb://localhost:27017/travel-forum",
{ useNewUrlParser: true, useUnifiedTopology: true, useFindAndModify: false },
function (err) {
if (err) {
console.log("Not connected to the database")
} else {
console.log("Connected to the database")
}
}
)
app.use("/api/v1/users", userRouter)
app.use("/*", indexRouter)
// catch 404 and forward to error handler
app.use(function (req, res, next) {
next(createError(404))
})
// error handler
app.use(function (err, req, res, next) {
// set locals, only providing error in development
res.locals.message = err.message
res.locals.error = req.app.get("env") === "development" ? err : {}
// render the error page
res.status(err.status || 500)
res.render("error")
})
module.exports = app
1 answers
solution1
0 2022-06-14 02:37:58
** I solved it in the following way:**
express has two modules you can install to refresh in hot without refreshing the browser, and it will refresh automatically: I leave you my configuration.
npm i livereload
npm i connect-livereload
const livereload = require('livereload');
const connectLivereload = require('connect-livereload');
const liveReloadServer = livereload.createServer();
liveReloadServer.watch(path.join(__dirname, '..', 'dist', 'frontend'));
const app = express();
app.use(connectLivereload());
Note that the folder you want to monitor is in dist/frontend. Change the folder you want to monitor so that it works: To monitor the backend I am using NODEMON
livereload open a port for the browser in the backend to expose the changes: how does the connection happen? It's easy; express with " connect-livereload " and inject a script that monitors that port: if a change occurs, the browser is notified by express, and the browser will refresh for you .
I leave The information as simple as possible to test, and I do not recommend using it like this: To use it you must separate the development and production environments. I keep it simple so that it is easy to understand.
Here I leave the most relevant link I found: I hope it will be helpful too.
https://bytearcher.com/articles/refresh-changes-browser-express-livereload-nodemon/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.