Как установить express node js

Установка Express¶

Предположим, вы уже установили Node.js. Создайте каталог для своего приложения и сделайте его своим рабочим каталогом.

$ mkdir myapp $ cd myapp

С помощью команды npm init создайте файл package.json для своего приложения. Дополнительную информацию о работе package.json можно найти в разделе Специфика работы с npm package.json.

$ npm init

Эта команда выдает целый ряд приглашений, например, приглашение указать имя и версию вашего приложения. На данный момент, достаточно просто нажать клавишу ВВОД, чтобы принять предлагаемые значения по умолчанию для большинства пунктов, кроме следующего:

entry point: (index.js)

Введите app.js или любое другое имя главного файла по своему желанию. Если вас устраивает index.js , нажмите клавишу ВВОД, чтобы принять предложенное имя файла по умолчанию.

Теперь установите Express в каталоге app и сохраните его в списке зависимостей. Например:

$ npm install express --save

Для временной установки Express, без добавления его в список зависимостей, не указывайте опцию —save :

$ npm install express

Модули Node, установленные с опцией —save , добавляются в список dependencies в файле package.json . В дальнейшем, при запуске npm install в каталоге app установка модулей из списка зависимостей будет выполняться автоматически.

Express

В этой главе мы рассмотрим создание сервера с помощью фреймворка Express . Казалось бы, зачем нам нужен дополнительный фреймворк, если мы можем воспользоваться готовым модулем http, который есть в Node.js API. Однако Express сам использует модуль http, но вместе с тем предоставляет ряд готовых абстракций, которые упрощают создание сервера и серверной логики, в частности, обработка отправленных форм, работа с куками, CORS и т.д.

Исходный код фреймворка можно посмотреть в репозитории на гитхабе по адресу https://github.com/expressjs/express.

Создадим для проекта новый каталог, который назовем, к примеру, expressapp . Для хранения информации обо всех зависимостях проекта определим в этом каталоге новый файл package.json :

Далее перейдем к этому каталогу в командной строке/терминале и для добавления всех нужных пакетов выполним команду npm install :

c:\app> npm install added 62 packages, and audited 63 packages in 2s 11 packages are looking for funding run `npm fund` for details found 0 vulnerabilities c:\app>

Создадим в каталоге проекта новый файл app.js :

// подключение express const express = require("express"); // создаем объект приложения const app = express(); // определяем обработчик для маршрута "/" app.get("/", function(request, response)< // отправляем ответ response.send("Привет Express!
"); >); // начинаем прослушивать подключения на 3000 порту app.listen(3000);

Для использования Express в начале надо создать объект, который будет представлять приложение:

const app = express();

Для обработки запросов в Express определено ряд встроенных функций, и одной из таких является функция app.get() . Она обрабатывает GET-запросы протокола HTTP и позволяет связать маршруты с определенными обработчиками. Для этого первым параметром передается маршрут, а вторым — обработчик, который будет вызываться, если запрос к серверу соответствует данному маршруту:

app.get("/", function(request, response)< // отправляем ответ response.send("Привет Express!
"); >);

Маршрут «/» представляет корневой маршрут.

Для запуска сервера вызывается метод app.listen() , в который передается номер порта.

Запустим проект и обратимся в браузере по адресу http://localhost:3000/ :

Запуск сервера Express в Node.js

И что важно, Express опирается на систему маршрутов, поэтому все другие запросы, которые не соответствуют корневому маршруту «/», не будут обрабатываться:

Маршруты Express в Node.js

Теперь изменим файл app.js :

const express = require("express"); const app = express(); app.get("/", function(request, response)< response.send("Главная страница
"); >); app.get("/about", function(request, response)< response.send("О сайте
"); >); app.get("/contact", function(request, response)< response.send("Контакты
"); >); app.listen(3000);

Теперь в приложении определено три маршрута, которые будут обрабатываться сервером:

Setting up a Node development environment

Теперь, когда вы знаете, что такое Express, мы покажем вам, как настроить и протестировать среду разработки Express для Windows, Linux (Ubuntu) и Mac OS X — какую бы операционную систему вы не использовали, эта статья должна дать вам все, что необходимо для возможности начать разрабатывать приложения Express.

Требования:	Знание как открыть терминал / командную строку, как устанавливать программные пакеты в операционной системе вашего компьютера.
Задача:	Создать среду разработки для Express на вашем компьютере.

Обзор среды разработки Express

Node и Express упрощают настройку вашего компьютера, чтобы вы могли начать разработку веб-приложений. В этом разделе объясняется, какие инструменты нужны, приводятся некоторые из самых простых способов установки Node (и Express) на Ubuntu, macOS, and Windows, и показывается как вы можете протестировать свою установку.

Что такое среда разработки Express?

Среда разработки Express включает в себя установку Nodejs, менеджера пакетов NPM и (необязательно) Express Application Generator на локальном компьютере.

Узел и менеджер пакетов NPM устанавливаются вместе из подготовленных двоичных пакетов, установщиков, менеджеров пакетов операционной системы или из исходного кода (как показано в следующих разделах). Затем Express устанавливается NPM как зависимость от ваших отдельных веб-приложений Express (наряду с другими библиотеками, такими как механизмы шаблонов, драйверы баз данных, промежуточное программное обеспечение для аутентификации, промежуточное программное обеспечение для обслуживания статических файлов и т. Д.)

NPM также можно использовать для (глобальной) установки Express Application Generator, удобного инструмента для создания каркасных веб-приложений Express, которые следуют шаблону MVC. Генератор приложений является необязательным, поскольку вам не нужно использовать этот инструмент для создания приложений, использующих Express, или для приложений для создан Express, имеющих одинаковую архитектурную разметку или зависимости. Мы будем использовать его, потому что это значительно облегчает начало работы и продвигает модульную структуру приложения.

Примечание: Примечание: в отличие от некоторых других веб-сред, среда разработки не включает отдельный веб-сервер разработки. В Node / Express веб-приложение создаёт и запускает собственный веб-сервер!

Существуют и другие периферийные инструменты, которые являются частью типичной среды разработки, в том числе текстовые редакторы или IDE для редактирования кода и инструменты управления исходным кодом, такие как Git, для безопасного управления различными версиями вашего кода. Мы предполагаем, что вы уже установили подобные инструменты (в частности, текстовый редактор).

Какие операционные системы поддерживаются?

Узел может быть запущен в Windows, macOS, во многих «разновидностях» Linux, Docker и т. Д. (Полный список на странице загрузок nodejs). Практически любой персональный компьютер должен иметь необходимую производительность для запуска Node во время разработки. Express работает в среде Node и, следовательно, может работать на любой платформе, на которой работает Node.

В этой статье мы предоставляем инструкции по установке для Windows, macOS и Ubuntu Linux.

Какую версию Node / Express следует использовать?

Существует множество выпусков Node — более новые выпуски содержат исправления ошибок, поддержку более свежих версий стандартов ECMAScript (JavaScript) и улучшения API-интерфейсов Node.

Как правило, вы должны использовать самый последний выпуск LTS (с долгосрочной поддержкой), поскольку он будет более стабильным, чем «текущий» выпуск, при этом все ещё имея относительно недавние функции (и все ещё активно поддерживается). Вы должны использовать Текущий выпуск, если вам нужна функция, которой нет в версии LTS.

Для Express вы всегда должны использовать последнюю версию.

Как насчёт баз данных и других зависимостей?

Другие зависимости, такие как драйверы баз данных, механизмы шаблонов, механизмы аутентификации и т. д., Являются частью приложения и импортируются в среду приложения с помощью диспетчера пакетов NPM. Мы обсудим их в следующих статьях для конкретных приложений.

Установка Node

Чтобы использовать Express, сначала необходимо установить Nodejs и Node Package Manager (NPM) в вашей операционной системе. В следующих разделах описывается самый простой способ установки версии Nodejs с долгосрочной поддержкой (LTS) в Ubuntu Linux 16.04, macOS и Windows 10.

Примечание: Совет: В следующих разделах показан самый простой способ установки Node и NPM на наши целевые платформы ОС. Если вы используете другую ОС или просто хотите увидеть некоторые другие подходы для текущих платформ, см. Установка Node.js через менеджер пакетов (nodejs.org).

Windows и macOS

Установка Node и NPM в Windows и macOS проста, потому что вы можете просто использовать предоставленный инсталлятор:

Загрузите необходимый установщик:

Перейдите по ссылке https://nodejs.org/en/
Нажмите кнопку, чтобы загрузить сборку LTS, которая «Рекомендуется для большинства пользователей».

Ubuntu 16.04

Самый простой способ установить последнюю версию LTS Node 6.x — это использовать package manager чтобы получить его из репозитория бинарных дистрибутивов Ubuntu. Это можно сделать очень просто, выполнив следующие две команды на вашем терминале:

curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash - sudo apt-get install -y nodejs

Предупреждение: Внимание: Не устанавливайте напрямую из обычных репозиториев Ubuntu, поскольку они содержат очень старые версии узла.

Проверка вашей установки Nodejs и NPM

Самый простой способ проверить, установлен ли этот узел, — это запустить команду «версия» в своём терминале / командной строке и проверить, что возвращается строка версии:

>node -v v8.11.3

Менеджер пакетов Nodejs NPM также должен быть установлен и может быть протестирован таким же образом:

>npm -v 5.8.0

В качестве немного более захватывающего теста давайте создадим очень простой сервер «чистого узла», который просто печатает «Hello World» в браузере, когда вы посещаете правильный URL в вашем браузере:

//Загрузка модуля HTTP const http = require("http"); const hostname = "127.0.0.1"; const port = 3000; //Создание HTTP-сервера const server = http.createServer((req, res) =>  //Установка HTTP-заголовков ответа с HTTP-статусом и Content type res.statusCode = 200; res.setHeader("Content-Type", "text/plain"); res.end("Hello World\n"); >); //Слушание запросов на порту 3000, и в качестве каллбака функция, которая пишет в лог server.listen(port, hostname, () =>  console.log("Server running at http://$:$/"); >);

Код импортирует модуль «http» и использует его для создания сервера (createServer ()), который обрабатывает HTTP-запросы на порту 3000. Затем сценарий выводит на консоль сообщение о том, какой URL-адрес браузера можно использовать для тестирования сервера. Функция createServer () принимает в качестве аргумента колбэк-функцию, которая будет вызываться при получении HTTP-запроса — она просто возвращает ответ с кодом состояния HTTP 200 («ОК») и простым текстом «Hello World».

Примечание: Замечание: не беспокойтесь, если вы ещё не совсем понимаете, что делает этот код! Мы объясним наш код более подробно, как только мы начнём использовать Express!

>node hellonode.js Server running at http://127.0.0.1:3000/

Использование NPM

Помимо самого Node, NPM является наиболее важным инструментом для работы с приложениями Node. NPM используется для получения любых пакетов (библиотек JavaScript), которые необходимы приложению для разработки, тестирования и / или производства, а также может использоваться для запуска тестов и инструментов, используемых в процессе разработки.

Примечание: С точки зрения Node, Express — это просто ещё один пакет, который вам нужно установить с помощью NPM, а затем установить его в своём собственном коде.

Вы можете вручную использовать NPM для получения каждого необходимого пакета отдельно. Обычно мы вместо этого управляем зависимостями, используя простой текстовый файл с именем package.json. В этом файле перечислены все зависимости для конкретного «пакета» JavaScript, включая имя пакета, версию, описание, исходный файл для выполнения, производственные зависимости, зависимости разработки, версии Node, с которыми он может работать, и т. Д. Файл package.json должен содержать все, что нужно NPM для загрузки и запуска вашего приложения (если вы пишете библиотеку многократного использования, вы можете использовать это определение для загрузки пакета в репозиторий npm и сделать его доступным для других пользователей).

Добавление зависимостей

Следующие шаги показывают, как вы можете использовать NPM для загрузки пакета, сохранить его в зависимостях проекта, а затем потребовать его в приложении Node.

Примечание: Здесь мы показываем инструкции для получения и установки пакета Express. Позже мы покажем, как этот пакет и другие уже указаны для нас с помощью Express Application Generator. Этот раздел предоставлен, потому что полезно понять, как работает NPM и что создаётся генератором приложений.

Сначала создайте каталог для вашего нового приложения и перейдите в него:

mkdir myapp cd myapp

npm init

Если вы отобразите файл package.json (cat package.json), вы увидите принятые по умолчанию значения, заканчивающиеся лицензией.

 "name": "myapp", "version": "1.0.0", "description": "", "main": "index.js", "scripts":  "test": "echo \"Error: no test specified\" && exit 1" >, "author": "", "license": "ISC" >

npm install express --save

Раздел зависимостей вашего package.json теперь появится в конце файла package.json и будет содержать Express.

 "name": "myapp", "version": "1.0.0", "description": "", "main": "index.js", "scripts":  "test": "echo \"Error: no test specified\" && exit 1" >, "author": "", "license": "ISC", "dependencies":  "express": "^4.16.3" > >

const express = require("express"); const app = express(); app.get("/", (req, res) =>  res.send("Hello World!"); >); app.listen(8000, () =>  console.log("Example app listening on port 8000!"); >);

>node index.js Example app listening on port 8000

Зависимости разработки

Если зависимость используется только во время разработки, вы должны вместо этого сохранить её как «зависимость разработки» (чтобы пользователям вашего пакета не приходилось устанавливать её в производстве). Например, чтобы использовать популярный инструмент JavaScript Linting eslint, вы должны вызвать NPM, как показано ниже:

npm install eslint --save-dev

Следующая запись будет добавлена в package.json вашего приложения:

"devDependencies":  "eslint": "^4.12.1" >

Примечание: Примечание: «Линтеры» — это инструменты, которые выполняют статический анализ программного обеспечения, чтобы распознавать и сообщать о приверженности / несоблюдении некоторого набора лучших практик кодирования.

Запуск задач

В дополнение к определению и извлечению зависимостей вы также можете определить именованные скрипты в ваших файлах package.json и вызвать NPM, чтобы выполнить их с помощью команды run-script. Этот подход обычно используется для автоматизации выполнения тестов и частей набора инструментов разработки или сборки (например, запуска инструментов для минимизации JavaScript, сжатия изображений, LINT / анализа вашего кода и т. Д.).

Примечание: Для запуска тестов и других внешних инструментов могут также использоваться такие исполнители, как Gulp и Grunt.

Например, чтобы определить скрипт для запуска зависимости разработки eslint, которую мы указали в предыдущем разделе, мы могли бы добавить следующий блок скрипта в наш файл package.json (при условии, что наш источник приложения находится в папке / src / js):

"scripts":  . "lint": "eslint src/js" . >

Чтобы пояснить немного подробнее, eslint src / js — это команда, которую мы могли бы ввести в нашем терминале / командной строке, чтобы запустить eslint для файлов JavaScript, содержащихся в каталоге src / js внутри каталога нашего приложения. Включение вышеупомянутого в файл package.json нашего приложения обеспечивает ярлык для этой команды — lint.

Затем мы сможем запустить eslint с помощью NPM, вызвав:

npm run-script lint # OR (using the alias) npm run lint

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

Установка Express Application Generator

Инструмент Express Application Generator создаёт «скелет» приложения Express. Установите генератор, используя NPM, как показано (флаг -g устанавливает инструмент глобально, чтобы вы могли вызывать его из любого места):

npm install express-generator -g

Чтобы создать приложение Express с именем «helloworld» с настройками по умолчанию, перейдите туда, где вы хотите его создать, и запустите приложение, как показано ниже:

Примечание: Вы также можете указать библиотеку шаблонов для использования и ряд других настроек. Используйте команду help, чтобы увидеть все параметры:

bash

--help

NPM создаст новое приложение Express в подпапке вашего текущего местоположения, отображая процесс сборки на консоли. По завершении инструмент отобразит команды, которые необходимо ввести, чтобы установить зависимости Node и запустить приложение.

Примечание: Новое приложение будет иметь файл package.json в своём корневом каталоге. Вы можете открыть это, чтобы увидеть, какие зависимости установлены, включая Express и библиотеку шаблонов Jade:

 "name": "helloworld", "version": "0.0.0", "private": true, "scripts":  "start": "node ./bin/www" >, "dependencies":  "body-parser": "~1.18.2", "cookie-parser": "~1.4.3", "debug": "~2.6.9", "express": "~4.15.5", "jade": "~1.11.0", "morgan": "~1.9.0", "serve-favicon": "~2.4.5" > >

Установите все зависимости для приложения helloworld, используя NPM, как показано ниже:

cd helloworld npm install

Затем запустите приложение (команды немного отличаются для Windows и Linux / macOS), как показано ниже:

# Run the helloworld on Windows with Command Prompt SET DEBUG=helloworld:* & npm start # Run the helloworld on Windows with PowerShell SET DEBUG=helloworld:* | npm start # Run helloworld on Linux/macOS DEBUG=helloworld:* npm start

Команда DEBUG создаёт полезное ведение журнала, что приводит к выводу, подобному показанному ниже.

>SET DEBUG=helloworld:* & npm start > helloworld@0.0.0 start D:\Github\expresstests\helloworld > node ./bin/www helloworld:server Listening on port 3000 +0ms

Откройте браузер и перейдите по адресу http://127.0.0.1:3000/ , чтобы увидеть страницу приветствия Express по умолчанию.

Express - Generated App Default Screen

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

Резюме

Теперь на вашем компьютере установлена и запущена среда разработки Node, которую можно использовать для создания веб-приложений Express. Вы также увидели, как NPM можно использовать для импорта Express в приложение, а также как вы можете создавать приложения с помощью инструмента Express Application Generator и затем запускать их.

В следующей статье мы начнём работу с учебным пособием по созданию полноценного веб-приложения с использованием этой среды и связанных инструментов.

Смотрите также

Downloads page (nodejs.org)
Installing Node.js via package manager (nodejs.org)
Installing Express (expressjs.com)
Express Application Generator (expressjs.com)

Назад
Обзор: Express Nodejs
Далее

Found a content problem with this page?

Edit the page on GitHub.
Report the content issue.
View the source on GitHub.

This page was last modified on 2 дек. 2023 г. by MDN contributors.

Your blueprint for a better internet.

Как настроить Node.js Express сервер для React

React - это библиотека JavaScript для разработки пользовательских интерфейсов. Она позволяет создавать эффективные и масштабируемые веб-приложения, основанные на компонентной архитектуре.

Express.js - это минималистичный и гибкий веб-фреймворк для Node.js, который облегчает разработку веб-приложений и API. Он предоставляет простой интерфейс и набор функций, позволяющих быстро создавать серверы и маршрутизировать запросы.

Введение

Это руководство поможет вам разработать простое приложение на React и подключить его к серверу, созданному с использованием Node.js. Мы начнем с создания React приложения с помощью команды create-react-app , а затем настроим его подключение к серверу Node.js c помощью proxy .

Необходимые условия

Для успешного выполнения данного гайда будет полезно иметь следующее:

Предварительный опыт работы с Node.js, Express, npm и React.js.
Установленный Node.js.
Текстовый редактор, предпочтительно VS Code.
Веб-браузер, в данном случае Google Chrome.

Настройка структуры папок

структура приложения

Первым шагом будет создание корневой папки для нашего приложения с именем express-react-app , в котором будут содержаться все файлы приложения. Затем мы создадим папку client , которая будет содержать все файлы React приложения.

Папка node_modules будет содержать все пакеты NPM для файла server.js . Папка node_modules будет автоматически создана при установке пакетов NPM.

Далее нам потребуется создать файл server.js . В этом файле будет размещен сервер Express, который будет выступать в качестве нашего бэкенда. Файл package.json будет автоматически сгенерирован, когда в терминале будет выполнена команда npm init -y .

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

Из терминала перейдите в корневую директорию с помощью команды cd и выполните следующие команды:

$cd express-react-app $npx create-react-app client

Вышеуказанные команды создадут React приложение названием client внутри корневой директории.

Настройка сервера Express

Следующий шаг состоит в создании сервера Express в файле server.js .

Из терминала перейдите в корневую директорию и выполните следующую команду:

$npm init -y

Команда автоматически сгенерирует файл package.json . Затем нам потребуется выполнить следующую команду для установки Express, и она будет сохранена в качестве зависимости в файле package.json .

$npm install express --save

Теперь отредактируйте файл server.js следующим образом:

const express = require('express'); //Строка 1 const app = express(); //Строка 2 const port = process.env.PORT || 5000; //Строка 3 // Сообщение о том, что сервер запущен и прослушивает указанный порт app.listen(port, () => console.log(`Listening on port $`)); //Строка 6 // Создание GET маршрута app.get('/express_backend', (req, res) => < //Строка 9 res.send(< express: 'YOUR EXPRESS BACKEND IS CONNECTED TO REACT' >); //Строка 10 >); //Строка 11

Строки 1 и 2 - подключают модуль Express и позволяют использовать его внутри файла server.js .

Строка 3 - Установка порта, на котором будет работать сервер Express.

Строка 6 - будет отображено сообщение в консоли о том, что сервер работает исправно.

Строка 9 и 11 - установка GET маршрута, который позже мы будем получать из нашего клиентского React приложения.

Настройка proxy

На этом шаге Webpack Development Server был автоматически сгенерирован при выполнении команды create-react-app . Наше React приложение работает на Webpack Development Server на стороне фронденда.

Webpack Development Server (WDS) - это инструмент, который помогает разработчикам вносить изменения во фронтенд веб-приложения и автоматически отображает эти изменения в браузере без необходимости обновления страницы.

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

Мы можем настроить проксирование запросов API с клиентской стороны на API на серверной стороне. API на серверной стороне (Express сервер) будет работать на порту 5000.

Сначала настройте прокси для перехода в директорию client и найдите файл package.json . Добавьте следующую строку в него.

“proxy”: “http://localhost:5000”

Измененный файл package.json будет выглядеть следующим образом:

< "name": "client", "version": "0.1.0", "private": true, "dependencies": < "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" >, "scripts": < "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" >, "eslintConfig": < "extends": [ "react-app", "react-app/jest" ] >, "browserslist": < "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] >, "proxy": "http://localhost:5000" >

Измененный файл package.json позволит Webpack проксировать запросы API на сервер бэкенда Express, работающий на порту 5000.

Вызов бэкенд сервера Express из React

Сначала перейдите в папку client/src и отредактируйте файл App.js , чтобы он выглядел следующим образом:

import React, < useEffect, useState >from 'react'; import logo from './logo.svg'; import './App.css'; function App() < const [state, setState] = useState(null); const callBackendAPI = async () => < const response = await fetch('/express_backend'); const body = await response.json(); if (response.status !== 200) < throw Error(body.message) >return body; >; // получение GET маршрута с сервера Express, который соответствует GET из server.js useEffect(() => < callBackendAPI() .then(res =>setState(res.express)) .catch(err => console.log(err)); >, []) return (   className="App-logo" alt="logo" /> Edit src/App.js and save to reload.
 Learn React 
  ); > export default App;

Внутри хука useEffect() вызывается функция callBackendAPI() . Эта функция будет получать данные с ранее созданного маршрута на сервере Express. При получении ответа от запроса fetch , значение res.express устанавливается в состояние state с помощью функции setState() . Затем значение state выводится внутри элемента для отображения на странице.

Запуск приложения

Для запуска приложения перейдите в корневую директорию express-react-app и выполните следующую команду:

$cd express-react-app $node server.js

После запуска файла server.js следующим шагом будет переход в веб-браузер по адресу "http://localhost:5000/express_backend", и будет отображено следующее сообщение:

успешный запуск бэкенда Express

Вышеуказанное демонстрирует, что наш сервер Express работает должным образом, и созданный нами маршрут GET функционирует, а также возможно получение этого маршрута с клиентской стороны.

Также обратите внимание, что путь URL совпадает с путем, который мы указали в нашем маршруте GET в файле server.js .

Затем перейдите в директорию client в терминале и выполните следующие команды:

$cd client $npm start

Вышеуказанные команды запустят React сервер разработки, который работает на порту 3000, и автоматически откроется в веб-браузере.

На экране будет отображено следующее сообщение:

успешный запуск React App

Наконец, мы отобразили данные, полученные с маршрута GET в server.js , в нашем фронтенд React приложении, как было показано выше.

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

Заключение

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

Кодовые фрагменты и файлы, использованные в этом руководстве, можно найти в репозитории GitHub по этой ссылке.