0
Koodi Прогрес
Поточний:0 днів
Рекорд:0 днів
Без активності
Активний день
Сьогодні
💚

Node.js у VS Code

JavaScript поза браузером! Створюй сервери, API, CLI-інструменти та повноцінні застосунки

🤔 Що таке Node.js?

Node.js — це середовище виконання JavaScript поза браузером. Якщо раніше JavaScript працював тільки у браузері, то з Node.js ти можеш запускати JS на сервері, комп'ютері, навіть на роботах!

🦉
Кудик пояснює:

Уяви: JavaScript — це водій, браузер — це автомобіль. Раніше водій міг їздити тільки на авто. Node.js — це літак, поїзд, корабель для того ж водія! Тепер JavaScript може працювати будь-де! ✈️🚂🚢

📜 Коротка історія

Ryan Dahl створив Node.js у 2009 році. Він взяв движок V8 від Google Chrome (той самий, що виконує JS у браузері) і зробив його самостійним. Тепер JavaScript — одна з найпопулярніших мов для бекенду!

💡 JavaScript у браузері vs Node.js

Можливість Браузер 🌐 Node.js 💚
Маніпуляція DOM ✅ Так ❌ Ні
window, document ✅ Так ❌ Ні
Доступ до файлової системи ❌ Ні ✅ Так
Створення серверів ❌ Ні ✅ Так
Робота з базами даних ❌ Ні ✅ Так
Системні операції (ОС) ❌ Ні ✅ Так

🚀 Що можна створити з Node.js?

🌐

Веб-сервери

REST API, GraphQL, повноцінні веб-застосунки з Express, Fastify, Nest.js

💬

Real-time додатки

Чати, онлайн-ігри, колаборативні редактори з Socket.io, WebSockets

🛠️

CLI інструменти

Консольні програми як npm, create-react-app, eslint

🖥️

Desktop додатки

VS Code, Slack, Discord — створені з Electron (Node.js + Chromium)

🤖

Боти

Telegram боти, Discord боти, автоматизація

📊

Мікросервіси

Легкі, швидкі сервіси для великих архітектур

🏢 Хто використовує Node.js?

🎬

Netflix

Стрімінг для 200+ млн користувачів

💳

PayPal

Платіжна система, 2x швидше на Node

🚗

Uber

Мільйони запитів на хвилину

🔗

LinkedIn

Перейшли з Ruby, 10x менше серверів

📥 Встановлення Node.js

Встановити Node.js дуже просто! Разом з ним автоматично встановиться npm (Node Package Manager) — менеджер пакетів.

💡
Швидка перевірка

Можливо, Node.js вже встановлено! Відкрий термінал та введи node --version. Якщо бачиш версію (наприклад, v20.10.0) — все готово!

🪟 Для Windows

1

Перейди на офіційний сайт

Відкрий nodejs.org

2

Завантаж LTS версію

Вибери LTS (Long Term Support) — стабільна версія. Current — для експериментів

3

Запусти інсталятор

Відкрий .msi файл та слідуй інструкціям. Залиш всі галочки за замовчуванням!

4

Перезапусти VS Code

Щоб VS Code побачив Node.js, перезапусти редактор

5

Перевір встановлення

Відкрий новий термінал та введи: node --version і npm --version

🍎 Для macOS

Terminal — macOS
1
2
3
4
5
6
7
8
# Варіант 1: Homebrew (рекомендовано)
brew install node

# Варіант 2: Завантажити з nodejs.org
# Відкрий .pkg файл та встанови

# Перевірка
node --version && npm --version

🐧 Для Linux (Ubuntu/Debian)

Terminal — Linux
1
2
3
4
5
6
7
8
9
10
11
# Встановлення через NodeSource (рекомендовано)
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt-get install -y nodejs

# Або через snap
sudo snap install node --classic

# Перевірка
node --version
npm --version
LTS vs Current

LTS (Long Term Support) — стабільна версія, рекомендована для продакшену та навчання. Current — найновіша з останніми фічами, але може бути нестабільною. Для початку бери LTS!

📦 NPM — менеджер пакетів

npm (Node Package Manager) — це інструмент для встановлення бібліотек та управління залежностями. Це як App Store для JavaScript!

🦉
Кудик каже:

npm — це магазин з мільйонами безкоштовних "деталей" для твого проєкту! Потрібен сервер? npm install express. Робота з датами? npm install dayjs. Не треба писати все з нуля!

📊 npm у цифрах

📚

2+ мільйони

Пакетів у реєстрі npm

⬇️

30+ мільярдів

Завантажень на тиждень

👥

17+ мільйонів

Розробників використовують npm

🌍

#1

Найбільший реєстр пакетів у світі

🔧 Основні команди npm

Terminal — npm команди
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# Ініціалізація проєкту (створює package.json)
npm init              # з питаннями
npm init -y           # швидко, без питань

# Встановлення пакетів
npm install express   # або скорочено: npm i express
npm i lodash axios    # кілька пакетів одразу

# Встановлення dev-залежностей (тільки для розробки)
npm i nodemon -D      # або --save-dev

# Глобальне встановлення (доступно звідусіль)
npm i -g typescript   # встановить глобально

# Видалення пакетів
npm uninstall express # або npm remove, npm rm

# Встановити всі залежності з package.json
npm install           # або просто npm i

📄 package.json — серце проєкту

Це файл з інформацією про проєкт та його залежності. Створюється командою npm init:

package.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{
  "name": "my-awesome-project",
  "version": "1.0.0",
  "description": "Мій перший Node.js проєкт",
  "main": "index.js",
  "scripts": {
    "start": "node index.js",
    "dev": "nodemon index.js",
    "test": "jest"
  },
  "dependencies": {
    "express": "^4.18.2"
  },
  "devDependencies": {
    "nodemon": "^3.0.1"
  }
}

📂 node_modules — папка залежностей

Коли встановлюєш пакети, вони зберігаються у папці node_modules. Ця папка може бути ДУЖЕ великою!

⚠️
Ніколи не комітти node_modules!

Додай node_modules/ до .gitignore! Ця папка може важити сотні мегабайт. Інші розробники просто запустять npm install і отримають всі пакети.

🏃 npm scripts — автоматизація

Секція "scripts" у package.json дозволяє створювати власні команди:

Запуск npm scripts
1
2
3
4
5
6
7
8
# Запуск скриптів
npm start         # запустить "start" скрипт
npm run dev       # запустить "dev" скрипт
npm test          # запустить "test" скрипт
npm run build     # запустить "build" скрипт

# start, test, stop — можна без "run"
# всі інші — потребують "npm run назва"

🧩 Налаштування VS Code

VS Code має чудову підтримку Node.js з коробки, але кілька розширень зроблять твою роботу ще приємнішою!

📦 Рекомендовані розширення

🔍

ESLint

Знаходить помилки та проблеми стилю в коді у реальному часі

🎨

Prettier

Автоматичне форматування коду — завжди охайний код!

📦

npm Intellisense

Автодоповнення імен npm пакетів при імпорті

🛤️

Path Intellisense

Автодоповнення шляхів до файлів

🔬

REST Client

Тестування API прямо у VS Code

🐛

Error Lens

Показує помилки прямо біля рядка коду

⚙️ Корисні налаштування VS Code

Додай у settings.json (Ctrl+Shift+P → "Preferences: Open Settings (JSON)"):

settings.json
1
2
3
4
5
6
7
8
9
10
11
12
{
  // Форматування при збереженні
  "editor.formatOnSave": true,
  
  // Prettier як форматувальник
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  
  // ESLint виправляє при збереженні
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

🚀 Твій перший Node.js проєкт

Час написати код! Почнемо з простого, а потім створимо справжній веб-сервер!

📁 Крок 1: Створи проєкт

Terminal
1
2
3
4
5
6
7
8
# Створи папку та перейди в неї
mkdir my-node-app
cd my-node-app

# Ініціалізуй npm проєкт
npm init -y

# Відкрий у VS Code
code .

👋 Крок 2: Hello World

Створи файл index.js:

index.js — Hello World
1
2
3
4
5
6
7
8
9
10
11
// 🦉 Мій перший Node.js скрипт!

console.log("💚 Привіт від Node.js!");
console.log(`Версія Node: ${process.version}`);
console.log(`Платформа: ${process.platform}`);

// Змінні оточення
console.log(`Користувач: ${process.env.USERNAME || process.env.USER}`);

// Поточна директорія
console.log(`Директорія: ${process.cwd()}`);

▶️ Крок 3: Запусти

Terminal
PS C:\my-node-app> node index.js
💚 Привіт від Node.js!
Версія Node: v20.10.0
Платформа: win32
Користувач: Kudik
Директорія: C:\my-node-app
PS C:\my-node-app>
🎉
Вітаю!

Ти запустив свій перший Node.js скрипт! Зверни увагу — process — це глобальний об'єкт Node.js з інформацією про систему!

🌐 Створюємо веб-сервер

Тепер найцікавіше — створимо справжній веб-сервер!

🔧 Варіант 1: Вбудований http модуль

Node.js має вбудований модуль для створення серверів:

server.js — простий HTTP сервер
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// Імпортуємо вбудований модуль http
const http = require('http');

// Створюємо сервер
const server = http.createServer((req, res) => {
    // Встановлюємо заголовки
    res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
    
    // Відправляємо відповідь
    res.end('<h1>🦉 Привіт від Node.js!</h1><p>Мій перший сервер працює!</p>');
});

// Запускаємо сервер на порті 3000
const PORT = 3000;
server.listen(PORT, () => {
    console.log(`🚀 Сервер запущено: http://localhost:${PORT}`);
});
Terminal
$ node server.js
🚀 Сервер запущено: http://localhost:3000

Тепер відкрий браузер та перейди на http://localhost:3000 — ти побачиш свою сторінку!

⚡ Варіант 2: Express.js (рекомендовано)

Express — найпопулярніший фреймворк для Node.js. Він спрощує створення серверів!

Terminal — встановлення Express
1
2
# Встанови Express
npm install express
app.js — Express сервер
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
// Імпортуємо Express
const express = require('express');
const app = express();
const PORT = 3000;

// Головна сторінка
app.get('/', (req, res) => {
    res.send(`
        <h1>🦉 Вітаю на моєму сервері!</h1>
        <p>Це Express.js — швидко та просто!</p>
        <ul>
            <li><a href="/about">Про мене</a></li>
            <li><a href="/api/users">API користувачів</a></li>
        </ul>
    `);
});

// Сторінка "Про мене"
app.get('/about', (req, res) => {
    res.send('<h1>👋 Я вивчаю Node.js на Koodi!</h1>');
});

// API endpoint — повертає JSON
app.get('/api/users', (req, res) => {
    const users = [
        { id: 1, name: 'Кудик', role: 'Mascot' },
        { id: 2, name: 'Студент', role: 'Learner' }
    ];
    res.json(users);
});

// Запуск сервера
app.listen(PORT, () => {
    console.log(`🚀 Express сервер: http://localhost:${PORT}`);
});
🦉
Кудик пояснює:

app.get('/', ...) — обробляє GET запити на шлях '/'. res.send() — відправляє HTML. res.json() — відправляє JSON для API. Просто!

🔄 Nodemon — автоперезапуск

Набридло перезапускати сервер після кожної зміни? Nodemon робить це автоматично!

Terminal
1
2
3
4
5
# Встанови nodemon як dev-залежність
npm install nodemon --save-dev

# Запусти через nodemon
npx nodemon app.js

Додай скрипт у package.json:

package.json
1
2
3
4
5
6
{
  "scripts": {
    "start": "node app.js",
    "dev": "nodemon app.js"
  }
}

Тепер просто запускай npm run dev — сервер буде перезапускатися автоматично! 🎉

📁 Робота з файлами

Node.js може читати та писати файли — те, що браузерний JS не вміє!

files.js — робота з файлами
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// Імпортуємо модуль fs (file system)
const fs = require('fs');

// 📝 Запис у файл
fs.writeFileSync('hello.txt', 'Привіт від Node.js! 🦉');
console.log('✅ Файл створено!');

// 📖 Читання файлу
const content = fs.readFileSync('hello.txt', 'utf-8');
console.log('📄 Вміст файлу:', content);

// 📂 Читання директорії
const files = fs.readdirSync('.');
console.log('📁 Файли в папці:', files);

// ➕ Додавання до файлу
fs.appendFileSync('hello.txt', '\nДодатковий рядок!');

// 🗑️ Видалення файлу
// fs.unlinkSync('hello.txt');

// ❓ Перевірка чи існує файл
if (fs.existsSync('hello.txt')) {
    console.log('✅ Файл існує!');
}
Sync vs Async

readFileSync — синхронне (блокує код). readFile — асинхронне (не блокує). Для продакшену завжди використовуй асинхронні методи або fs.promises!

📚 Популярні npm пакети

Ось must-have пакети, які використовує кожен Node.js розробник:

🚂

Express

Мінімалістичний веб-фреймворк. Основа більшості Node.js серверів

🔄

Nodemon

Автоперезапуск сервера при змінах. Must-have для розробки

🔐

dotenv

Завантаження змінних оточення з .env файлу. Для секретів!

📡

Axios

HTTP клієнт для запитів до API. Краще за вбудований fetch

🗄️

Mongoose

ODM для MongoDB. Спрощує роботу з базою даних

🔑

jsonwebtoken

JWT токени для автентифікації користувачів

Joi / Zod

Валідація даних. Перевіряй вхідні дані!

📋

Winston

Логування. Записуй логи у файли та консоль

🎯 Що вивчати далі?

🔌

REST API

Створюй API з Express: CRUD операції, middleware, роутинг

🗄️

Бази даних

MongoDB, PostgreSQL, MySQL — зберігай дані

🔐

Автентифікація

JWT, sessions, OAuth — захищай додатки

💬

WebSockets

Real-time комунікація: чати, нотифікації

🧪

Тестування

Jest, Mocha — пиши тести для свого коду

🚀

Деплой

Heroku, Vercel, Railway — запускай у продакшен

🎮 Вивчай Node.js на Koodi!

🚀 Перейти до курсу Node.js
✅ REST API ✅ MongoDB ✅ Реальні проєкти