Как создать сервер на React с использованием Express

В этой статье мы рассмотрим, как создать простой сервер для React-приложения с использованием Node.js, Express, MongoDB и других популярных пакетов. Рассмотрим шаги, которые нужно выполнить для создания сервера, а также поясним ключевые моменты в коде.

1. Установка зависимостей

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

• express — это популярный фреймворк для создания серверов на Node.js.
• cors — модуль для настройки политики кросс-доменных запросов, позволяющий разрешить запросы с других доменов.
• mongoose — библиотека для работы с MongoDB в Node.js.
• jsonwebtoken — используется для создания и проверки JWT (JSON Web Token), который часто используется для аутентификации.
• bcryptjs — библиотека для хеширования паролей.
• dotenv — позволяет работать с переменными окружения, например, для хранения секретных ключей или информации о подключении к базе данных.

Чтобы установить все эти пакеты, нужно выполнить команду:

bashКопировать кодnpm install express cors mongoose jsonwebtoken bcryptjs dotenv

2. Основной код сервера

Вот пример кода для создания базового сервера:

const PORT = 7001;

/* Подключение пакетов */ const express = require('express');
const cors = require('cors');
const mongoose = require("mongoose");
const jwt = require('jsonwebtoken');
const bcryptjs = require('bcryptjs');
const dotenv = require('dotenv');

/* Инициализация dotenv для работы с переменными окружения */ dotenv.config();

/* Создаем приложение */ const app = express();

/* Метод use разрешает подключать разные элементы:
cors - Разрешение всех запросов с разных доменов.
express.json() - Парсер для обработки JSON-данных в теле запросов. */ app.use(cors());
app.use(express.json());

/* Функция для старта сервера */ const start = () => {
try {
// Запускаем сервер на порту, указанном в переменной PORT app.listen(PORT, () => console.log(`Сервер запущен на ${PORT} порте`));
} catch (e) {
// Обработка ошибок при запуске сервера console.log(e);
}
};

/* Вызов функции старта сервера */ start();

Пояснение к коду

1. Подключение зависимостей: В первой части кода мы подключаем все необходимые модули, такие как express, cors, mongoose, jsonwebtoken, bcryptjs и dotenv. Эти пакеты играют ключевую роль в работе сервера.
2. Инициализация приложения: Мы создаем экземпляр приложения с помощью express():
   const app = express();
3. Middleware:app.use(cors()) — это middleware, которое разрешает все кросс-доменные запросы. Это полезно, когда фронтенд (например, React) работает на другом порту или домене, чем ваш бэкенд.
   app.use(express.json()) — этот middleware позволяет обрабатывать входящие HTTP-запросы с телом в формате JSON. Это важно, так как многие данные, например, отправляемые с клиента в POST-запросах, часто представляют собой JSON-объекты.
   
4. Функция старта сервера: Мы оборачиваем запуск сервера в функцию start(), чтобы упростить обработку ошибок. Внутри этой функции мы вызываем app.listen(), чтобы сервер начал слушать запросы на указанном порту (в данном случае — на порту 7001).Если сервер не удается запустить (например, если порт занят), ошибка будет поймана в блоке catch, и она будет выведена в консоль.
5. Запуск сервера: Мы вызываем start(), чтобы запустить сервер, который теперь будет слушать запросы на порту 7001.

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

Теперь у вас есть работающий сервер, но вы можете расширить его функциональность в зависимости от требований вашего проекта. Вот несколько идей:

1. Подключение к базе данных MongoDB: Чтобы сервер работал с MongoDB, можно подключить базу данных с помощью Mongoose. Для этого нужно указать строку подключения, которая хранится в переменных окружения, и использовать Mongoose для взаимодействия с базой данных:
   mongoose.connect(process.env.MONGO_URI, { useNewUrlParser: true, useUnifiedTopology: true })
   .then(() => console.log('MongoDB connected'))
   .catch(err => console.log('MongoDB connection error:', err));
2. Аутентификация с JWT: Вы можете добавить аутентификацию с помощью JWT. Это обеспечит безопасность вашего приложения и позволит пользователям входить в систему с помощью токенов. Для этого нужно создать маршрут для входа, генерировать токен и проверять его при каждом запросе, который требует авторизации.
3. Регистрация пользователей и хеширование паролей: Используя bcryptjs, можно безопасно хешировать пароли пользователей перед сохранением их в базе данных. Это позволит избежать хранения паролей в открытом виде, что является важным элементом безопасности.

4. Заключение

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

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