Приложение Bundle React / Express для производства - PullRequest
Новая
       11

Приложение Bundle React / Express для производства

0 голосов
/ 09 мая 2018

Мое приложение построено с "create-реагировать-приложение", а также Express.js в качестве внутреннего. Как настроить приложение для производства?

Вот мой файл user.js из Express: 

var express = require('express');
var router = express.Router();

/* GET users listing. */
router.get('/', function(req, res, next) {
  res.json(['Hello World'])
});

module.exports = router;

У меня есть настройка «Прокси» в файле package.json в папке React. 

"proxy": "http://localhost:3001"

«create-реагировать-приложение» имеет команду для сборки: 

npm run build

Связано ли мое приложение для работы, если я просто запускаю «npm run build» в папке реакции или мне нужно что-то настроить в моих файлах Express?

1 Ответ

0 голосов
/ 09 мая 2018

Если Express выступает в качестве вашего API и сервера приложений, на базовом уровне вам необходимо настроить Express для загрузки index.html приложения React, когда другие маршруты API не обнаружены. Вы могли бы сделать это, используя sendFile() вместе с path узла, регистрируя "универсальный" маршрут после всех других ваших конечных точек API, в основном файле для вашего приложения Express. 

app.use('/users', usersRouter);

app.use('*', function (request, response) {
  response.sendFile(path.resolve(__dirname, 'index.html'));
});

Путь в sendFile() должен указывать на местоположение index.html приложения React-клиента / внешнего интерфейса. Что именно входит в sendFile(), полностью зависит от структуры вашего проекта. Если, например, у вас есть приложение React в папке с именем client, в которой есть папка build, сгенерированная create-Reaction-app npm run build, sendFile() будет выглядеть следующим образом: 

app.use(express.static(path.join(__dirname, 'client', 'build')));

// API route
app.use('/users', usersRouter);

app.use('*', function (request, response) {
  response.sendFile(path.join(__dirname, 'client', 'build', 'index.html'));
});

* в app.use(), например app.use('*', function (request, response));, фактически означает все HTTP-глаголы (GET, POST, PUT и т. Д.). Если вы НЕ введете это после ваших маршрутов / путей API, это будет препятствовать тому, чтобы ваше клиентское приложение React выполняло вызовы API, так как оно будет перехватывать все запросы, порядок очень важен.

Затем вы просто создаете приложение React, а затем запускаете приложение Express.

Надеюсь, это поможет!

...