Как установить Node.js с помощью NVM

Иногда, исследуя GitHub, нужно клонировать репозитории, некоторые из которых требуют Node.js. Однако, не всегда требуемая версия Node.js совместима с той, которая установлена на нашем компьютере. В этом случае пришлось установить другую версию Node.js. NVM упрощает эту задачу и позволяет нам устанавливать и управлять несколькими версиями Node.js на вашем локальном компьютере.

Установка nvm на Ubuntu и Mac OS

Для установки nvm будем использовать сценарий установки из github-репозитория nvm-sh. На момент написания статьи актуальная версия установщика nvm была 0.39.7. Таким образом, вы можете использовать curl для загрузки, а затем запустить его с помощью bash:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

или с wget:

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

После этого инсталлятор клонирует репозиторий nvm в каталог ~/.nvm/, следует добавить несколько строк ниже в конце файла ~/.bashrc для загрузки nvm.

export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm

Теперь вам нужно закрыть и снова открыть терминал для загрузки nvm, затем проверить версию:

nvm --version
# 0.39.7

Теперь nvm готов к использованию.

Использование nvm для управления версиями Node.js

Nvm имеет множество подкоманд, таких как install, use, uninstall и другие.

Установка версии Node.js

Во-первых, вы можете получить список доступных версий с помощью:

nvm list-remote

# или

nvm ls-remote

Вы можете установить конкретную версию с помощью nvm с помощью команды install.

nvm install 14.17.6

Если вы хотите установить LTS-версию, вы можете использовать --lts вместо номера версии.

nvm install --lts

Или вы можете установить последнюю версию, указав node вместо номера версии.

nvm install node

Загрузка определенной версии Node.js

Теперь вы устанавливаете некоторые версии Node.js на свой компьютер; Таким образом, вы можете увидеть список установленных версий с помощью list или ls.

nvm list

# или

nvm ls

Если вы хотите использовать определенную версию, используйте use. С помощью этой команды вы можете запустить Node.js по номеру версии или --lts.

nvm use <version>

Или используйте LTS-версию

nvm use --lts

Или используйте последнюю версию

nvm use node

Удаление Node.js версии

Наконец, если вы хотите удалить версию Node.js, вы можете использовать для этого команду uninstall. Во-первых, вам нужно переключиться на другую версию с use, после чего вы можете удалить ее.

nvm uninstall <version>

Что такое файл .nvmrc?

В проекте Node.js вы можете сохранить версию Node.js, совместимую с ней, в файле, который называется .nvmrc и вы должны создать его в корневом каталоге вашего проекта.

node --version > /path/to/project/.nvmrc

Затем вы можете использовать совместимую версию на других машинах ваших коллег по команде.

nvm use
# Found '/path/to/project/.nvmrc' with version <v14.17.6>
# Now using node v14.17.6 (npm v6.14.15)

Установка пакета на Node.js

Установка пакета на Node.js, установленным NVM, аналогична обычной установке node.js, но установка пакета основана на номере версии.

nvm use 14.17.5

npm install --global yarn

which yarn
# ~/.nvm/versions/node/v14.17.5/bin/yarn

Итоги

NVM помогает нам собрать несколько node.js версий на одной машине и использовать их в своем проекте или тестировать функции 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;

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