Ось твій урок у стилі CS50. Вмикай уяву — ми на сцені в Гарварді (або в Zoom, що реалістичніше), я знімаю піджак, закочую рукави, і ми починаємо!

🎓 Урок: Збірка (Build) та Деплой Angular-додатку

Привіт, друзі! 👋

1. 🔥 Вступ: "У мене на комп'ютері працює!"

Уявіть ситуацію. Ви провели останні два тижні без сну. Ви написали геніальний додаток — скажімо, "Uber для доставки котів". Ви запускаєте ng serve, відкривате http://localhost:4200, і все літає! Кнопки натискаються, котики додаються в кошик. Ви в захваті.

Ви дзвоните замовнику (або мамі) і кажете: "Заходь, дивись!". А вони питають: "Куди заходити?". Ви: "Ну як куди? На localhost:4200!".

Риторичне питання: Що вони побачать? Правильно — нічого. Або помилку браузера.

Чому? Тому що localhost — це ваша "кухня". Там безлад: розкидані інгредієнти (TypeScript-файли), стоять каструлі (Node_modules), і все це працює тільки тому, що у вас на кухні стоїть спеціальний шеф-кухар (Angular CLI), який готує страву на льоту.

Але клієнти не приходять на кухню. Вони приходять у ресторан (Інтернет), де їм подають готову, красиво оформлену страву.

Сьогодні ми навчимося перетворювати вашу "кухню" на "ресторан". Ми поговоримо про Build (як упакувати код) та Deploy (як викласти його в світ). Без цього ваш код — це просто текст на вашому жорсткому диску. Поїхали! 🚀

2. 🧠 Теоретична база: Що відбувається "під капотом"?

Давайте заглянемо всередину процесу.

Коли ви пишете код, ви використовуєте TypeScript, купу окремих файлів, коментарі, довгі зрозумілі назви змінних. Браузер (Chrome, Safari) не розуміє TypeScript. І йому байдуже на ваші красиві відступи. Йому потрібен чистий, оптимізований JavaScript.

Процес Збірки (Build) робить три магічні речі (запам'ятайте цю трійцю):

1. Компіляція (Compilation): Перетворює TypeScript ("креслення") на JavaScript ("готовий механізм").
2. Об'єднання (Bundling): Бере ваші 100 файлів і зшиває їх у кілька компактних файлів (bundle.js).
   • Аналогія: Уявіть, що ви їдете у відпустку. Ви ж не несете в руках окремо шкарпетки, окремо зубну щітку, окремо футболку? Ви все пакуєте в одну валізу. Бандлінг — це пакування валізи.
3. Оптимізація та Tree-shaking (Трясіння дерева):
   • Це суперважливо: Angular "трусить" ваш проєкт. Усе, що ви імпортували, але не використали (зайві функції, бібліотеки), відпадає, як сухе листя. У фінальну валізу потрапляє тільки те, що дійсно потрібно.
   • Також код мініфікується (Minification) — видаляються всі пробіли та переноси рядків. Код стає нечитабельним для людини, але супершвидким для робота.

Що треба запам'ятати залізно: Результат збірки Angular — це статичні файли (index.html, .js, .css). Їм не потрібен Node.js на сервері, їм не потрібна база даних, щоб просто відкритися. Це просто файли, які можна покласти на будь-який веб-сервер, як картинку.

3. 🧪 Приклади: Від магії до реальності

🔹 Приклад 1: Звичайний запуск (те, що ви робили)

Ви пишете в терміналі:

ng serve

Що відбувається? Angular створює віртуальну збірку в пам'яті комп'ютера (RAM). Файли не записуються на диск. Це JIT (Just-in-Time) компіляція. Швидко для розробки, але повільно для користувача.

🔹 Приклад 2: Справжня збірка (Production Build)

Як зробити "валізу" для подорожі в інтернет? Ви пишете:

ng build

(Раніше треба було писати --prod, але в нових версіях Angular це стандарт).

Чого ви очікуєте? Що в папці проекту з'явиться щось нове. Що маємо: З'являється папка dist/ (distribution).

Давайте заглянемо всередину dist/my-app/: * index.html — вхідні двері. * main.js — ваш код. * styles.css — ваші стилі. * polyfills.js — милиці для старих браузерів.

Якщо відкрити main.js, ви побачите щось таке: function n(e){return e.z+1}... Страшно? Так. Але це важить у 10 разів менше, ніж ваш вихідний код!

🔹 Приклад 3: Середовища (Environments)

У реальному житті у вас є: 1. Localhost: API звертається до localhost:3000. 2. Production: API звертається до api.super-app.com.

Як Angular знає, куди стукати? У папці src/environments є файли. Коли ви робите ng build, Angular автоматично підміняє environment.ts на environment.prod.ts.

Це як мати два комплекти ключів: одні від тестового гаража, інші — від справжнього офісу. Angular сам бере потрібний ключ під час збірки.

4. 🛠 Практична частина

Час бруднити руки! Відкривайте термінал.

Завдання 1: Перший білд 1. У вашому проекті зупиніть ng serve (Ctrl+C). 2. Запустіть ng build. 3. Знайдіть папку dist. 4. Спробуйте відкрити index.html у браузері просто подвійним кліком. * Спойлер: Швидше за все, ви побачите білий екран. Чому? (Підказка: шляхи до файлів). Це нормально, браузер блокує завантаження скриптів з файлової системи напряму з міркувань безпеки, або шляхи в <base href="/"> не збігаються.

Завдання 2: "Зважування" 1. Подивіться розмір папки dist. 2. Порівняйте з папкою node_modules. 3. Відчуйте різницю. node_modules може важити 500 Мб, а dist — 2 Мб. Це сила Tree-shaking.

Завдання 3: Імітація сервера (http-server) Щоб побачити, як працює dist, нам потрібен маленький веб-сервер. 1. Встановіть (якщо нема): npm install -g http-server 2. Зайдіть у папку білда: cd dist/назва-вашого-проекту 3. Запустіть: http-server 4. Відкрийте посилання, яке він дасть (зазвичай http://127.0.0.1:8080). 5. Вуаля! Ваш додаток працює як у продакшені.

Завдання 4: Міні-кейс — GitHub Pages Давайте викладемо це в інтернет безкоштовно. 1. Встановіть утиліту: ng add angular-cli-ghpages 2. Ця команда сама налаштує все. 3. Запустіть: ng deploy --base-href=/назва-репозиторію/ 4. За хвилину ви отримаєте посилання. Надішліть його другу. Тепер це "ресторан"!

Завдання "А що, якщо..." Що, якщо користувач зайде на vash-site.com/profile і натисне "Оновити сторінку" (Refresh)? * Очікування: Сторінка перезавантажиться. * Реальність: Помилка 404 Not Found. * Чому: Сервер (GitHub Pages, Nginx) шукає файл profile.html, а його не існує! У нас SPA (Single Page Application), у нас тільки index.html. * Рішення: Треба налаштувати сервер так, щоб на будь-який запит він віддавав index.html, а далі Angular сам розбереться з маршрутом.

5. 💡 Мислення як у розробника

Як відрізнити новачка від профі в цій темі?

❌ Помилка новачка: Закомітити папку dist або node_modules у Git. Чому це погано: Це сміття. Репозиторій має містити лише "рецепт" (код), а не "готову страву". Кожен розробник збирає страву у себе свіжу. Додайте /dist у .gitignore.

❌ Помилка новачка №2: Змінювати URL бекенду вручну перед кожним деплоєм. "Ой, забув переключити з localhost на api.com". Як думає профі: Він використовує environment.ts. Автоматизація — наш найкращий друг.

🧠 Як думає Senior: "Я не хочу робити ng build і заливати файли по FTP руками". Він налаштовує CI/CD (Continuous Integration / Deployment). Логіка така: Я пушу код у GitHub -> GitHub бачить зміни -> Сам запускає тести -> Сам робить ng build -> Сам заливає на сервер. Ви п'єте каву, а робот працює.

6. 🧩 Підсумок

Отже, що ми сьогодні зробили? 1. Зрозуміли, що код і продукт — це різні речі. 2. Дізналися про Build: перетворення TS в JS, мініфікацію та tree-shaking (скидання зайвої ваги). 3. Створили папку dist і запустили її на локальному веб-сервері. 4. Навчилися деплоїти це в реальний світ.

Тепер ви не просто "кодер", який пише в стіл. Ви — "розробник", який вміє доставляти цінність людям.

🔜 У наступній серії: Ваш додаток вже в інтернеті, але він важить 5 мегабайтів і завантажується 10 секунд на мобільному інтернеті? Користувачі тікають? На наступному уроці ми поговоримо про Lazy Loading (Ліниве завантаження) та оптимізацію швидкодії. Ми навчимо Angular завантажувати шматочки додатку тільки тоді, коли вони дійсно потрібні!

А поки що — ng build і до зустрічі! 💻✨