Я думаю, что наиболее часто используемый способ запуска приложения React – это использование create-react-app . Это очень удобно.
Одна из проблем, с которой вы можете столкнуться, заключается в том, как подключить его к бэкэнду, который у вас уже есть, или к тому, который вы, возможно, захотите создать.
В разработке
При разработке приложения вы хотите воспользоваться преимуществами горячей перезагрузки и всеми другими удобными функциями create-react-app. Как вы можете объединить это с бэкэндом, не используя CORS на сервере и не беспокоясь о портах?
Я приведу пример использования Express в этом посте, но это относится к любому другому фреймворку.
Предполагая, что вы тестируете это, давайте создадим приложение React:
npx create-react-app testing
затем
cd testing
Теперь создайте простой экспресс-сервер в server.js файл, который вы можете добавить куда угодно. Он даже может находиться в отдельной папке.
Если вы решите добавить этот файл в код приложения create-react-app , запустите:
npm install express
И мы готовы идти. Добавьте эту простую экспресс-настройку:
const express = require('express');
const app = express();
app.get('/hey', (req, res) => res.send('ho!'))
app.listen(8080)Важный момент здесь: откройте файл package.json и добавьте эту строку куда-нибудь:
"proxy": "http://localhost:8080"
Это указывает реагировать на запросы прокси-API к Node.js сервер построен с помощью Express.
Теперь запустите этот процесс узла, используя узел server.js . В другом окне вы запускаете приложение CAR с помощью npm start .
Когда браузер откроется на порту 3000 (по умолчанию), откройте DevTools и запустите:
fetch('/hey')Если вы проверите сетевую панель, у вас должен быть успешный ответ с помощью ho! сообщение.
В производстве
В рабочей среде вы собираетесь запустить npm run build , когда будете готовы к развертыванию, и мы будем использовать экспресс-сервер для обслуживания этих статических файлов.
Вся эта прокси-система теперь бесполезна (и тоже не будет работать в производстве – она предназначена для облегчения разработки). Это означает, что вы можете оставить его в package.json файл, если вам это удобно.
В приведенном ниже коде нам требуется путь встроенный модуль узла и мы говорим приложению, чтобы оно обслуживало статическую сборку приложения React:
const express = require('express')
const path = require('path')
const app = express()
app.use(express.static(path.join(__dirname, 'build')))
app.get('/ping', (req, res) => {
return res.send('pong')
})
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname, 'build', 'index.html'))
})
app.listen(8080)Оригинал: “https://flaviocopes.com/how-to-serve-react-from-same-origin/”