Как запустить бэкэнд на Node JS

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

Перед созданием бэкэнда на node js нужно, чтобы были установлены все необходимые библиотеки, IDE и ПО, а именно:

• NodeJS и npm. Их можно скачать с официального сайта nodejs.org. npm установится автоматически вместе с NodeJS.
• Предпочитаемый IDE, например, Visual Studio Code.
• Опционально, установить git для удобной работы с кодом.

О приложении

В этой статье напишем небольшой REST API сервер, который будет отдавать список дел по GET запросу. Структура папок будет выглядеть следующим образом.

my-app/

Создание бэкэнда на NodeJS

Запустим команду в папке my-app/ для инициализации проекта:

npm init -y

Эта команда создаст файл package.json. Ключ -y заполнит все поля в package.json значениями по умолчанию. Файл package.json содержит информацию о проекте - название, версия, описание, список зависимостей, скрипты для запуска, сборки и тестирования. Все поля можно будет изменить и вручную после его создания. После инициализации package.json будет выглядеть следующим образом.

{
  "name": "my-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Для создания сервера будем использовать express. Установим его с помощью команды:

npm install express

Создадим файл index.js. В нем будет находится код для запуска сервера. Если порт не задан в переменных среды, то будет использован порт 3010.

// my-app/index.js

const express = require('express');
 
const PORT = process.env.PORT || 3010;
const app = express();
 
app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', '*');
  next();
});
 
app.listen(PORT, () => {
  console.log(`Server listening on ${PORT}`);
});

Запуск сервера

В поле scripts файла my-app/package.json добавим команду для запуска сервера. В результате сможем запускать наш сервер с помощью команды npm start.

...
"scripts": {
  "start": "node ./index.js"
},
...

Из папки my-app/ запустим команду npm start. Если ошибок нет, получим сообщение, что сервер прослушивает порт 3010.

PS C:\tutorials-coding\nodejs-backend\my-app> npm start

> my-app@1.0.0 start
> node ./index.js

Server listening on 3010

Создание API

API это интерфейс, с помощью которого приложение будет общаться с веб-сервером, т.е. запрашивать, изменять или удалять данные. Мы сможем получать эти данные, например, в веб-приложении на React. О том как, делать API запросы к серверу из React приложения, можно прочитать в этой статье. В нашем случае мы создадим API для получения списка дел в формате JSON. Создадим файл /my-app/todo-items.json c объектами todo. Этот массив будем отдавать по запросу /api/todo-items.

[
  {
    "id": 1,
    "text": "Изучить Node JS",
    "done": true
  },
 {
    "id": 2,
    "text": "Изучить JavaScript",
    "done": true
  },
  {
    "id": 3,
    "text": "Изучить React JS",
    "done": true
  },
  {
    "id": 4,
    "text": "Написать приложение",
    "done": false
  }
]

Далее добавим код для создания эндпоинта /api/todo-items. Веб-приложение сможет отправлять на него GET запрос.

// my-app/index.js

// ...

const todoItems = require('./todo-items.json');
app.get('/api/todo-items', (req, res) => {
 res.json({ data: todoItems });
});

app.listen(PORT, () => {
 console.log(`Server listening on ${PORT}`);
});

Для того чтобы изменения применились нужно перезапустить NodeJS сервер. Для остановки скрипта в терминале, в котором запущен npm start, нужно нажать Ctrl + C (Command + C). Далее снова запускаем npm start. Для проверки эндпоинта, вставим в адресную строку браузера http://localhost:3010/api/todo-items. В результате получим такой ответ.

Отправка HTTP запроса к серверу

К этому моменту у нас уже есть рабочий сервер, который умеет принимать запросы и отдавать данные. Для проверки работы сервера вне веб-приложения можно воспользоваться такими программами как Postman или Insomnia.

Автоматический перезапуск сервера после обновления кода

Ранее для того чтобы изменения исходного кода сервера вступили в силу, мы перезапускали сервер. Можно ускорить процесс разработки и автоматизировать эту часть с помощью инструмента nodemon. nodemon будет следить за файлами в каталоге, в котором был запущен nodemon, и если какие-либо файлы изменятся, он автоматически перезапустит ваше node js приложение. Установим nodemon как зависимость для разработки.

npm install --save-dev nodemon

Добавим новый скрипт dev в my-app/package.json.

...
"scripts": {
  "dev": "nodemon ./index.js"
},
...

Далее запустим сервер следующим образом.

npm run dev

Теперь, после изменений в коде, увидим, что сервер перезапускается сам. Исходный код

Необходимые инструменты

Перед началом нужно убедиться, что на компьютере установлены все необходимые библиотеки, IDE и ПО, а именно:

• NodeJS и npm. Их можно скачать с официального сайта nodejs.org. npm установится автоматически вместе с NodeJS.
• Предпочитаемый IDE, например, Visual Studio Code.
• Опционально, установить git для удобной работы с кодом.

О приложении

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

app/
  frontend/
  backend/

Создание бэкэнда на NodeJS

Запустим команду в папке app/backend для инициализации проекта:

npm init -y

Эта команда создаст файл package.json. Этот файл содержит как общую информацию о проекте (название, версия, описание и т.д.), так и информацию о зависимостях, скрипты для запуска, сборки и тестирования. Для создания сервера будем использовать express. Установим его с помощью команды:

npm i express

Создадим файл index.js, который будет содержать код для запуска сервера. Этот код запускает веб сервер на порту 3010, если он не задан в переменных среды.

// backend/index.js
const express = require('express');
 
const PORT = process.env.PORT || 3010;
const app = express();
 
app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', '*');
  next();
});
 
app.listen(PORT, () => {
  console.log(`Server listening on ${PORT}`);
});

Добавим команду для запуска сервера в package.json. В результате сможем запускать наш сервер с помощью команды npm start.

// backend/package.json
...
"scripts": {
  "start": "node ./index.js"
},
...

Из директории app/backend запустим команду npm start. Если ошибок нет, получим сообщение, что сервер прослушивает порт 3010.

PS C:\tutorials-coding\nodejs-react-app\backend> npm start        

> backend@1.0.0 start
> node ./index.js

Server listening on 3010

Создание API

API это интерфейс, с помощью которого React приложение будет общаться с веб-сервером, т.е. запрашивать, изменять или удалять данные. В нашем случае мы создадим API для получения списка дел в формате JSON. Создадим файл todo-items.json c объектами todo. Этот массив будем отдавать по запросу /api/todo-items.

[
  {
    "id": 1,
    "text": "Изучить NodeJS",
    "done": true
  },
  {
    "id": 2,
    "text": "Изучить ReactJS",
    "done": true
  },
  {
    "id": 3,
    "text": "Написать приложение",
    "done": false
  }
]

Следующий код создает эндпоинт /api/todo-items. React приложение будет отправлять GET запрос на этот эндпоинт.

// backend/index.js

// ...

const todoItems = require('./todo-items.json');
app.get('/api/todo-items', (req, res) => {
  res.json({ data: todoItems });
});

app.listen(PORT, () => {
  console.log(`Server listening on ${PORT}`);
});

Для того чтобы изменения вступили в силу, нужно перезапустить NodeJS сервер. Для остановки скрипта - в терминале, в котором запущен npm start, нужно нажать Ctrl + C (Command + C). Далее снова запускаем npm start. Для проверки эндпоинта, в браузере перейдем по адресу http://localhost:3010/api/todo-items. В результате получим, такой ответ.

Создание фронтенда на React

В папке app/ откроем новый терминал и запустим команду для создания React приложения, где frontend имя нашего приложения.

npx create-react-app@latest frontend

Дождемся установки всех зависимостей. В терминале перейдем в папку frontend.

cd ./frontend

Установим библиотеку bootstrap для дальнейшего использования готовых компонентов.

npm install react-bootstrap bootstrap

Заимпортируем bootstrap.min.css в файле frontend/src/index.js.

import 'bootstrap/dist/css/bootstrap.min.css';

Запустим приложение командой npm start.

npm start

Получим следующее сообщение. Перейдем по указанному адресу в браузере.

Compiled successfully!
 
You can now view frontend in the browser.        
 
  Local:            http://localhost:3003        
  On Your Network:  http://192.168.99.1:3003     
 
Note that the development build is not optimized.
To create a production build, use npm run build. 

Отправка HTTP запроса из React в NodeJS

К этому моменту у нас уже есть рабочий сервер, который умеет принимать запросы и отдавать данные. Сделаем запрос на /api/todo-items из React приложения. Для этого вызовем функцию fetch из хука useEffect в файле App.js.

// frontend/src/App.js
import { useState, useEffect } from 'react';
import Form from 'react-bootstrap/Form';
import './App.css';
 
function App() {
  const [todoItems, setTodoItems] = useState([]);
 
  useEffect(() => {
    fetch('http://localhost:3010/api/todo-items')
      .then((res) => res.json())
      .then((result) => setTodoItems(result.data));
  }, []);
 
  return (
    <div>
      {todoItems.map((item) => (
        <Form.Group key={item.id} className="app__todo-item">
          <Form.Check type="checkbox" checked={item.done} />
          <Form.Control type="text" value={item.text} />
        </Form.Group>
      ))}
    </div>
  );
}
 
export default App;

Открыв приложение в браузере, получим такой результат. Исходный код