React свого часу призвів до революційних змін в розробці веб-сайтів.
Стало доволі легко зробити гарний інтерактивний веб-сайт. Але у новачків часто виникає питання — як так зробити, щоб мій сайт могли побачити інші користувачі в інтернеті. Звичайно, можна купити платний хостинг і розгорнути додаток там. Але не поспішайте витрачати гроші — розгорнути React додаток можна і абсолютно безкоштовно.
React додаток у своєму фінальному стані насправді являє собою статичний веб-сайт. Статичним називається сайт, в якому лише статичні файли: такі як HTML, JS, CSS та картинки.
Для того, щоб отримати цей статичний сайт, потрібно виконати команду npm run build. Після цього ми отримаємо папку build, в якій будуть зібрані всі файли, які потрібні для роботи нашого статичного сайту. Основним файлом є index.html. Справа в тому, що більшість веб-серверів налаштовані так, що коли ми відкриваємо якийсь URL в браузері, то веб-сервер шукає за вказаною адресою файл index.html або index.htm. Якщо веб-сайт динамічний, то веб-сервер може бути налаштований на пошук файлів типу index.php, index.apsx, тощо.
Спробуйте відкрити ось такі посилання:
Ви побачите однакові сторінки сайту.
Все це потрібно для розуміння, що в статичному веб-сайті в папці має бути файлик index.html, який буде віддаватися веб-сервером.
У випадку SPA (Single Page Application), яким є наш React додаток, цей файлик зазвичай має пусте тіло, лише з одним елементом, в який монтується JavaScript додаток, основний код якого зберігається у JS файлі, який зазвичай називається bundle.
Тож коли ми отримали папку build, ця папка є нашим статичним веб-сайтом. Залишається лише знайти веб-сервер, який може хостити статичні веб-сайти.
Насправді таких серверів та сервісів дуже багато, при чому як хостинг провайдерів, що надають безкоштовний хостинг, до сервісів типу Heroku, Amazon S3, Firebase, тощо. Ми розглянемо два найбільш популярних сервіси у Front-end спільності — GitHub Pages та Netlity.
GitHub Pages
Думаю, навіть більшість початківців вже знають, що таке GitHub і як ним користуватися. Але небагато розробників знає про додатковий сервіс GitHub Pages.
GitHub Pages дозволяє розгорнути статичний веб-сайт прямо в GitHub, отримати доменну адресу і навіть при потребі підключити свій власний домен. Так як React додаток — це також статичний веб-сайт, то його також можна тут хостити.
Є кілька способів як розгорнути свій React додаток на GitHub Pages.
Основні способи це:
- В окремій бранчі, або в спеціальній папці (наприклад, docs) основної бранчі. Про ці способи ви можете прочитати в документації GitHub Pages
- Мій улюблений автоматичний спосіб — використовуючи npm пакет gh-pages
Спочатку його треба встановити:
npm install gh-pages -DПотім в scripts вашого package.json файлу додайте такі скрипти:
"predeploy": "npm run build",
"deploy": "gh-pages -d build",Після цього збережіть зміни і закомітьте їх. Ви зможете розгортати React додаток однією командою:
npm run deployЦя команда сама зробить білд (build) вашого React додатку і, якщо немає ніяких помилок, то створить (або оновить) додаткову гіт гілку gh-pages і закомітить туди останню версію зборки вашого додатку.
Сторінка вашого додатку буде доступною за адресою.
Наприклад, я колись деплоїв простенький додаток для вивчення англійських слів, фраз і умовних виразів на GitHub Pages і ось, яку адресу має веб-додаток: https://sergii-zhuravel.github.io/learning-cards/
Netlify
Netlify — це послуга, яка автоматизує збірку, розгортання та управління статичними веб-сайтами. Це одне з найшвидших і найпростіших розгортань на сьогоднішній день.
Netlify пропонує безкоштовний тариф, тому спробувати його може кожен бажаючий. Його навіть стартапи використовують як, наприклад, тестове середовище. Увійти в Netlify також дуже просто, можна використати будь-який із параметрів (Github, Gitlab, Bitbucket, Email), вказаних на сторінці входу.
Існує декілька способів розгорнути наш веб-додаток на Netlify.
Декілька основних варіантів:
Перетягнути папку build в веб інтерфейс сервісу Netlify
Використовуючи netlify-cli інструмент (https://www.npmjs.com/package/netlify-cli)
Імпортувати проєкт з GitHub (або іншого Git репозиторію)
Імпортувати проєкт з GitHub дуже просто. Для цього потрібно натиснути кнопку «Import from Git» та слідувати інструкціям.
Але мабуть найшвидший і найпростіший варіант — це метод «перетягни і відпусти». Для цього потрібно лише збілдити React додаток (npm run build) і перетягнути папку build в спеціальну область на сторінці Netlify (з написом «Drag and drop your site output folder here»).
Як ми бачимо, розгорнути React додаток можна швидко, легко і безкоштовно. До речі, Netlify має також сервіс Netlify CMS, що є headless CMS, і може виступати бекендом для вашого React додатку, з можливістю адмініструвати контент.
Це дуже крута та популярна штука. Але це вже інша історія :)
