Перейти к содержимому

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

Александр Ламков — Friendly Frontend

0:00 / 0:00

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

5 215 просмотров · 6 месяцев назад
Александр Ламков — Friendly Frontend
58 тыс. подписчиков
5 215 просмотров · 6 месяцев назад
❤️ Отблагодарить за курс / доступ к видео на неделю раньше и закрытый чат: 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