Горячая перезагрузка в приложении React с сервером express - PullRequest
Новая
       20

Горячая перезагрузка в приложении React с сервером express

0 голосов
/ 16 июня 2020

На данный момент у меня есть шаблон, настроенный для приложения MERN, имеющего сервер express на бэкэнде и реагирующего на него. Я намерен настроить горячую перезагрузку в своем приложении - всякий раз, когда есть какие-либо изменения в коде реакции, без необходимости обновлять sh все приложение (HMR).

У меня установлены webpack-dev-server и HotModuleReplacementPlugin. Я также пробовал использовать --hot в скрипте webpack в package.json. Если я запускаю npm run webpack, код компилируется, и сервер запускается на localhost:8080. Это дает мне что-то вроде этого, чего я на самом деле не хочу. Я не знаю, похоже, он показывает мне каталог root.

enter image description here

С другой стороны, если я запускаю npm start, сервер запускается и отображает компонент реакции, что я хочу, но с горячей перезагрузкой. Прямо сейчас мне нужно обновить sh страницу, чтобы увидеть изменения.

enter image description here

Итак, я пытаюсь понять, что на самом деле продолжается? Есть ли способ добавить горячую перезагрузку, когда я набираю 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"))


клиент / контейнеры / приложение 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


маршруты / 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;


просмотров / index.e js

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
  </head>
  <body>
    <div id="root"></div>
    <script src="/static/bundle.js"></script>
  </body>
</html>


пакет. 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",
    }),
  ],
}


приложение 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


...