Как установить Node.js с помощью NVM
месяц назад·2 мин. на чтение
Установка нескольких версий Node.js и управление ими с помощью nvm (Node Version Manager).
Иногда, исследуя GitHub, нужно клонировать репозитории, некоторые из которых требуют Node.js. Однако, не всегда требуемая версия Node.js совместима с той, которая установлена на нашем компьютере. В этом случае пришлось установить другую версию Node.js. NVM упрощает эту задачу и позволяет нам устанавливать и управлять несколькими версиями Node.js на вашем локальном компьютере.
Что такое файл
В проекте Node.js вы можете сохранить версию 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
:
После этого инсталлятор клонирует репозиторий nvm в каталогwget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
~/.nvm/
, следует добавить несколько строк ниже в конце файла ~/.bashrc
для загрузки nvm.
Теперь вам нужно закрыть и снова открыть терминал для загрузки 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 для управления версиями Node.js
Nvm имеет множество подкоманд, таких какinstall
, use
, uninstall
и другие.
Установка версии Node.js
Во-первых, вы можете получить список доступных версий с помощью:Вы можете установить конкретную версию с помощью nvm с помощью командыnvm list-remote # или nvm ls-remote
install
.
Если вы хотите установить LTS-версию, вы можете использоватьnvm install 14.17.6
--lts
вместо номера версии.
Или вы можете установить последнюю версию, указавnvm install --lts
node
вместо номера версии.
nvm install node
Загрузка определенной версии Node.js
Теперь вы устанавливаете некоторые версии Node.js на свой компьютер; Таким образом, вы можете увидеть список установленных версий с помощьюlist
или ls
.
Если вы хотите использовать определенную версию, используйтеnvm list # или nvm ls
use
. С помощью этой команды вы можете запустить Node.js по номеру версии или --lts
.
Или используйте LTS-версиюnvm use <version>
Или используйте последнюю версию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
запрос на этот эндпоинт.
Для того чтобы изменения вступили в силу, нужно перезапустить NodeJS сервер. Для остановки скрипта - в терминале, в котором запущен// 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}`); });
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
.
Установим библиотеку bootstrap для дальнейшего использования готовых компонентов.cd ./frontend
Заимпортируем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;
