Как объединить фронтэнд на ReactJS и бэкэнд на NodeJS?

154

18 декабря 2018, 13:00

В качестве фронтэнда имеется html-страница с исполняемым скриптом bundle.js, в качестве бэкэнда - обычный express-сервер с RESTful API. Страница реагирует на действия пользователя, отправляя запросы на сервер по маршрутам, определенным в API.

Насколько мне удалось понять, надо заставить сервер выдавать эту самую html-страницу в ответ на все маршруты, кроме тех, которые прописаны в API. Вопрос - как это сделать?

Вариант прочитать и отдать как обычный файл не подходит, потому что на странице есть скрипт, вариант express.static тоже не подошел, потому что маршруты. Подскажите, пожалуйста, работающий способ, или быть может, альтернативный вариант, как подружить фронтэнд с бэкендом?

Answer 1

Можно сделать так, вынести все запросы к API в отдельный роутер и подключить как миделвер. Всю статику в отдельную папку через express.static('public'). На все остальные запросы возвращать index.html

index.js

const path = require('path');
const express = require('express');
const api = require('./routes/api'); // импортируем роутер
const indexHTML = path.resolve(__dirname,'./public/index.html');
const app = express();
// все статические файлы в папку public
app.use('/', express.static('public'));
// запросы к api выносите в отдельный файл и подключаете как миделвер
app.use('/api', api);
// на все остальные запросы 
app.get('/*', (req, res) => res.sendFile(indexHTML));
app.listen(3000);

./routes/api.js

const express = require('express');
// создаете роутер
const router = express.Router();
// GET http://localhost:3000/api/some
router.get('/some',(req, res) => {
    // ....
});
// POST http://localhost:3000/api/some
router.post('/some', (req, res) => {
    // ...
});
// экспортируете
module.exports = router;