Принцип объединения react js и express

135

21 мая 2019, 16:30

Я посмотрел не мало примеров как люди используют react js с node express, все сводятся к тому что мне нужно запускать сервер обработчик запросов на одном порте и сервер клиента через npm start на другом порте. Не понимаю можно ли как-то все держать на одном порте и как это будет выглядеть на релизе.

Answer 1

Это делается даля того чтоб, фронт и бек разработка не зависели друг от друга и шли параллельно. Есть один сервер который возвращает статические файлы и больше ничего не делает. И есть второй сервер в котором прописана логика работы с данными.

На фронте могут замокать ajax запросы пока не готово API, а бек разработчикам фронт и не нежен.

Самый примитивный пример все на одном сервере

api.js

Логика работы с данными

const express = require('express');
// некая база данных
const db = require('./db');
const router = express.Router();
//  что-то делаем
router.post('/users/:id', async (req, res) => {
    try {
        const id = req.params.id;
        const user = await db.fetchUserById(id);
        res.status(200).json(user);
    } catch (e) {
        res.sendStatus(500);
    }
});
module.exports = router;

index.js

const path = require('path');
const express = require('express');
const bodyParser = require('body-parser');
// Наше API
const api = require('./api');
const PORT = process.env.PORT;
const indexHTML = path.resolve(__dirname,'../public/index.html');
const app = express();
app.use(bodyParser.json());
// Для статических файлов
app.use('/', express.static('public'));
// Подключаем API
// Теперь мы можем делать ajax запросы
// и получить пользователя с id 1 по урлу /api/users/1
app.use('/api', api);
app.get('/*', (req, res) => res.sendFile(indexHTML));
app.listen(PORT, () => console.info('Server is running on port:', PORT));