Экспресс-сервер запускает реагирующий клиент

Question

До сих пор я использовал create-реакции-приложение для своих проектов, с экспресс-сервером и клиентом реагирования, каждый в своих папках .

Тем не менее, я сейчас пытаюсь избегать создания-реакции-приложения, чтобы действительно понять, как все работает под капотом. Я читаю статью Hacker Noon, в которой объясняется , как настроить реакцию с машинописью и веб-пакетом . В этой статье у них также есть экспресс-сервер в корне клиента, который сам все компилирует :

const path = require('path'),
   express = require('express'),
   webpack = require('webpack'),
   webpackConfig = require('./webpack.config.js'),
   app = express(),
   port = process.env.PORT || 3000;
app.listen(port, () => { console.log(`App is listening on port ${port}`) });
app.get('/', (req, res) => {
   res.sendFile(path.resolve(__dirname, 'dist', 'index.html'));
});
let compiler = webpack(webpackConfig);
app.use(require('webpack-dev-middleware')(compiler, {
   noInfo: true, publicPath: webpackConfig.output.publicPath, stats:    { colors: true }
}));
app.use(require('webpack-hot-middleware')(compiler));
app.use(express.static(path.resolve(__dirname, 'dist')));

В конце команда start выглядит так:

"start": "npm run build && node server.js"

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

Зачем тебе это делать? Есть ли плюсы и минусы?

Answer 1

Это правда, что это позволит вашей разработке выполняться на том же сервере, что и экспресс, и этот веб-пакет будет постоянно обновлять ваш файл dist / index.html всеми обновлениями, которые вы вносите в свой файл. В этом не так уж много недостатков, так как это только для развития. Но, как правило, на prod у вас будет один встроенный файл, который вы будете обслуживать. И это не будет работать web pack-dev-middleware. Как только вы создали свой сервер. Для целей производства может потребоваться только статические активы. Но обычно даже серверу, который обслуживает в основном клиентские файлы, может понадобиться сервер, если вы хотите выполнять рендеринг на стороне сервера и / или разбиение кода.

Команда: "npm run build && node server.js" запустит команды bash / cmd в терминал. npm run build - это один шаг из-за использования &&, если при успешном выполнении этой команды она выполнит следующую команду, которая называется node server.js, что является странной командой, которую я, вероятно, буду запускать node ./ (и поместите сервер в качестве индекса .js) или хотя бы просто напишите сервер узлов.

Что бы я предпочел увидеть в вашем package.json:

"start": "yarn build && node ./"

Это было бы возможно, если бы вы mv server.js index.js (и npm i -g yarn).

Еще одна вещь, на которую стоит обратить внимание, и посмотрите, что делает шаг сборки.

Дальнейшее объяснение:

Команда запускает этап сборки, поэтому проверьте, какой ключ "build": выполняется в вашем package.json. Эта команда, вероятно, не завершится с кодом 1 (любой код завершения терминального процесса выше 0 приведет к ошибке и не пройдет &&). Предположительно, процесс сборки, описанный в package.json, возьмет все файлы javascript и CSS и поместит их в файл index.html, который затем будет отправляться на клиентскую сторону всякий раз, когда кто-то обращается к пути '/'.

После этого он запустит сервер, на который вы поместили код выше.

res.sendFile (path.resolve (__dirname, 'dist', 'index.html')); произойдет, если кто-нибудь встретит путь '/'.