Оглавление

Исходный код https://github.com/Devalo/react-app-in-existing-express-app

Почему?

Бывают случаи, когда простое приложение Express, поддерживающее HTML, является очень простым и эффективным способом создания веб-сайта. Со всеми различными пакетами NPM и хорошей темой Bootstrap вы можете создать хороший веб-сайт в Express так же быстро, как и любой сайт Wordpress.

Теперь представьте, что вы создали веб-сайт. Для простоты использования вы выбрали Express. Express позволяет легко создавать страницы, отображаемые на стороне сервера, поскольку это то, что делает внутренний сервер — подает HTML или JSON клиенту.

Скажем, вам нужна панель управления для управления определенными (или всеми) элементами вашего приложения, отображаемого на сервере. Панель инструментов не нуждается в SEO, так что не о чем беспокоиться. Было бы круто, если бы два отдельных приложения, работающих одновременно на одном и том же порту, слились в одно приложение.

Так как же установить отдельное приложение React в приложение Express? Если вы будете следовать документации React, вы получите странную сборку, для работы которой требуется куча начальной загрузки. Это будет не так гладко, как приложение create-реагировать (CRA).

Решение? Установите CRA прямо в приложении Express.

Настройка небольшого экспресс-приложения

Чтобы смоделировать полный проект, мы создадим новое приложение Express с помощью редактора Express.

% express --view=pug myApp
% cd myApp
% npm install

Мы также установим nodemon и создадим новый скрипт для запуска нашего приложения. Nodemon будет следить за нашими файлами и автоматически перезапускать сервер для нас при любом изменении файла.

% npm install nodemon --save-dev

В нашем файле package.json

// package.json
"scripts": {
    "start": "node ./bin/www",
    "dev": "nodemon ./bin/www"
},

Если вы запустите приложение и зайдете на https://localhost:3000

% npm run dev

Наше приложение Express запущено и работает, предоставляя HTML-файлы нашему браузеру.

Чтобы сделать наше приложение Express немного более «живым», мы добавим в него еще одну страницу с другим маршрутом. Внутри нашего индексного маршрута добавьте второй маршрут

// routes/index.js
....
router.get('/foo', (req, res) => {
  res.render('foo', { title: 'Foo Bar'});
});

Создайте новый файл в папке просмотра с именем foo.pug.

// views/foo.pug
extends layout
block content
  h1= title
  a(href='/') back

Мы также добавим новую ссылку в index.pug, чтобы мы могли переключаться между index и foo.

// views/index.pug 
extends layout
block content
  h1= title
  p Welcome to #{title}
a(href='/foo') To foo

Отлично, у нас есть готовое (очень маленькое) веб-приложение.

Создание React-приложения

Давайте создадим наше приложение React. Мы собираемся установить его прямо в корневую папку нашего приложения Express:

% npx create-react-app dashboard

Давайте немного отредактируем файл React App.js:

// dashboard/src/App.js
import React from 'react';
function App() {
  return (
    <div className="App">
      <h1>React Dashboard</h1>
      <p>This is a dashboard</p>
      <a href="/">Back to site</a>
    </div>
  );
}
export default App;

Итак, это будет наша приборная панель. Мы отображаем некоторый текст и ссылку, которая вернет нас на основной сайт.

Будет немного обременительно запускать оба приложения одновременно и заставить их работать как в разработке, так и в производстве. Мы хотим создать производственное приложение из нашего приложения React и позволить Express использовать его напрямую. Это означает, что мы можем запускать оба приложения на одном сервере и на одном порту. В нашем package.json:

// package.json
"scripts": {
    "start": "node ./bin/www",
    "dev": "nodemon ./bin/www",
    "build:dash": "rm -rf build && cd dashboard && npm run build && cd .. && cp -r dashboard/build ."
  },

Мы можем запустить скрипт с помощью команды npm run build:dash

Подключить приложение React к Express

Нам нужен новый маршрут для нашей приборной панели. /dashboard будет достаточно. Нам нужно создать маршрут панели инструментов, и нам нужно использовать папку сборки React как папку статических ресурсов. Ранее мы создали новый маршрут в файле маршрута index.js. В реальном мире вы, вероятно, разделите маршруты в разных файлах по мере роста вашего приложения. Итак, для маршрута приборной панели мы сделаем именно это. Мы создадим новый файл в каталоге маршрута с именем Dashboard.js.

// routes/dashboard.js
const express = require('express');
const path = require('path');
const router = express.Router();
router.get('/', (req, res) => {
  res.sendFile(path.resolve(__dirname, '../build', 'index.html'));
});
module.exports = router;

Мы добавим наш новый файл в наш корневой файл app.js.

// app.js
...
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
const dashboardRouter = require('./routes/dashboard'); // new
...

И мы добавим наш новый маршрут и каталог сборки React в качестве промежуточного программного обеспечения.

// app.js
...
app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use('/dashboard', dashboardRouter); // new
app.use(express.static(path.join(__dirname, 'build'))); // new
...

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

% npm run build:dash

Как только он будет запущен, вы увидите новый каталог сборки в корне нашего приложения Express.

Теперь убедитесь, что приложение Express запущено, и перейдите на https://localhost:3000/dashboard.

Наша панель инструментов работает!

Заключительные мысли

Это самый простой способ, который я нашел, чтобы мы могли запускать оба приложения одновременно. Как упоминалось ранее, вместо этого вы можете создать два отдельных приложения. Однако это в любом случае так. Они не разделяют ничего, кроме самого сервера.

Разработка панели инструментов может быть немного громоздкой, если вы запускаете ее из приложения Express, поскольку вам нужно перестраиваться при каждом изменении. Вместо этого я бы предложил запускать прямо из каталога панели инструментов, когда вы работаете над своим приложением React.

/dashboard % npm start

Как только вы захотите проверить это с помощью основного приложения, просто запустите скрипт сборки, и все готово.

Удачного программирования!
Стефан Баккелунд Валуа