Как задеплоить React-приложение на GitHub Pages

Описание: ❤️ Отблагодарить за курс / доступ к видео на неделю раньше и закрытый чат: https://boosty.to/friendly-frontend

✏️ В финальном уроке соберём всё воедино и выложим наше приложение в интернет. Обсудим, что такое деплой для фронтенда и чем отличается dev-сервер от production-сборки. Вернём хранение задач в localStorage, чтобы приложение работало без бэкенда. Настроим переключение API под разные окружения. Соберём production-бандл и проверим его через vite preview. Доработаем маршрутизацию, чтобы ссылки работали корректно после выкладки. Подготовим vite.config.js к продакшену и настроим base под GitHub Pages. Добавим копию 404.html, чтобы SPA-роутинг не ломался. Установим и настроим пакет gh-pages, пропишем удобные npm-скрипты и задеплоим проект. В итоге получаем полноценное React-приложение в продакшене, готовое для портфолио.

🔴 Timeline:
▶ 00:00 | Введение
▶ 00:48 | Что такое деплой для фронтенда
▶ 02:37 | Возвращаем localStorage перед деплоем
▶ 16:30 | Дорабатываем маршрутизацию
▶ 20:05 | Деплой на GitHub Pages (через пакет gh-pages)
▶ 28:05 | Заключение

📚 Ссылки из видео:
➖ Код на конец урока: https://github.com/aleksanderlamkov/t...
➖ Мой To Do List на GitHub Pages: https://aleksanderlamkov.github.io/to...

🧑‍💻 Основной телеграм-канал:
https://t.me/AleksanderLamkov

💬 Коммьюнити-чат в телеграме (помощь новичкам):
https://t.me/FriendlyFrontend

🗂️ Бесплатные курсы на канале:
🟠 HTML:    • HTML курс 2025  
🔵 CSS:    • CSS курс 2025  
🟡 JS:    • JavaScript курс 2025  
🟢 A11y:    • Accessibility курс 2025  
🗺 Frontend Roadmap:    • Frontend Roadmap 2024 | Что должен учить ф...  
⚪️ Мастер-класс по верстке для новичков:    • Адаптивная верстка сайта с нуля для начина...  
🔘 Мастер-класс по верстке для продвинутых (БЭМ, SCSS):    • Вёрстка сайта с 0 до результата | HTML, БЭ...  
⚫️ Мастер-класс по верстке с практикой по JavaScript:    • Вёрстка сайта с нуля • HTML, SCSS, JS прак...  
🔴 Мастер-класс по верстке на стеке JSX, SCSS, JS, Vite, Minista (SSG), БЭМ: https://stepik.org/a/228315

📌 Автор:
➖ Личный сайт: https://aleksanderlamkov.ru/
➖ Telegram: https://t.me/AleksanderLamkov
➖ Boosty: https://boosty.to/friendly-frontend
➖ GetMentor: https://getmentor.dev/mentor/aleksand...
➖ Stepik (платные курсы и мастер-классы): https://stepik.org/a/228315

#frontend #фронтенд #react #reactjs