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

месяц назад·2 мин. на чтение

Установка нескольких версий Node.js и управление ими с помощью nvm (Node Version Manager).

Иногда, исследуя 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-версий без побочных эффектов для нашей системы или проекта.

Node JS и React - как создать фулстек приложение. Полное руководство

2 года назад·3 мин. на чтение

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

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

Перед началом нужно убедиться, что на компьютере установлены все необходимые библиотеки, 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. В результате получим, такой ответ. Ответ от Node JS сервера

Создание фронтенда на 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;
Открыв приложение в браузере, получим такой результат. React приложение со списком дел Исходный код