React UI и Node.js/Экспресс-приложение, обслуживаемое/контролируемое с помощью webpack

Question

Я новичок в React и Node, пытаясь настроить среду на работу.

Я работал немного с Node.js/Express раньше, и я использовал nodemon для мониторинга изменений файлов и перезагрузки моего приложения.

Также я недавно начал работать с React, и я использую webpack dev server (в частности, webpack-dev-server --content-base src --inline --hot --history-api-fallback), который отслеживает изменения файлов и перезагружает пользовательский интерфейс.

Проблема

Теперь я хочу, чтобы связать их вместе.

Первое решение, которое я нашел, было: Начало моего node app на определенный порт, скажем, 3000 затем начать webpack dev server на 8080 порту и proxy запросов к конкретным URL, на мой backend app.

devServer: { 
    proxy: { 
     '/backend-api/': { 
      target: { 
       "host": "localhost", 
       "protocol": 'http:', 
       "port": 3000 
      }, 
      ignorePath: false, 
      changeOrigin: true, 
      secure: false 
     } 
    } 
}, 

Он должен работать, но я не чувствую себя правильно, начиная два сервера для одного приложения.

Есть ли способ (и простой пример, я мог понять), чтобы начать одного сервера, который будет обслуживать как : а server side app и React UI?

И, конечно, он должен отслеживать изменения файлов и перезапускать серверное приложение, если изменяется код сервера или перезагружать пользовательский интерфейс, если изменяется код на стороне клиента.

Answer 1

Вы можете использовать WebPack через Экспресс промежуточного слоя, используя этот пакет: https://github.com/webpack/webpack-dev-middleware

Вы можете использовать его, просто добавив его в приложение:

var webpackMiddleware = require("webpack-dev-middleware"); 
app.use(webpackMiddleware(webpack({/* webpack options */}))); 

Кроме того, есть пакет, который опирается на это предложение hotloading и «Create React App»: https://www.npmjs.com/package/webpack-express-middleware