Как задеплоить 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

Props в React. Что такое пропсы, как передавать данные и зачем нужен children
▶︎

Props в React. Что такое пропсы, как передавать данные и зачем нужен children

Устраиваюсь кодером НЕ УМЕЯ кодить [ Пранк работодателей ]
▶︎

Устраиваюсь кодером НЕ УМЕЯ кодить [ Пранк работодателей ]

Git — Простым Языком на Понятном Примере
▶︎

Git — Простым Языком на Понятном Примере

"Enter" store on Django/DRF #2. Working with templates and static files
▶︎

"Enter" store on Django/DRF #2. Working with templates and static files

Context in React: The useContext Hook and Getting Rid of Prop Drilling
▶︎

Context in React: The useContext Hook and Getting Rid of Prop Drilling

ASMR Mysterious Growth ❓ CLOSE Medical Exam 👩‍⚕️Professional Doctor Facial Examination
▶︎

ASMR Mysterious Growth ❓ CLOSE Medical Exam 👩‍⚕️Professional Doctor Facial Examination

Самое опасное когнитивное искажение [Veritasium]
▶︎

Самое опасное когнитивное искажение [Veritasium]

Функциональные компоненты в React. Как разбить интерфейс на переиспользуемые части
▶︎

Функциональные компоненты в React. Как разбить интерфейс на переиспользуемые части

Тиньков и Варламов — о деньгах, Трампе и Путине | Интервью из Мексики: Plata, визы, наследство
▶︎

Тиньков и Варламов — о деньгах, Трампе и Путине | Интервью из Мексики: Plata, визы, наследство

React Security: XSS Protection and Working with Sensitive Data. Search Fragment Highlighting
▶︎

React Security: XSS Protection and Working with Sensitive Data. Search Fragment Highlighting

How To Deploy A React Vite App To Github Pages (Simple)
▶︎

How To Deploy A React Vite App To Github Pages (Simple)

Маршрутизация в React без библиотек. Как реализовать переходы между страницами
▶︎

Маршрутизация в React без библиотек. Как реализовать переходы между страницами

China’s Secret | The Most Unbelievable Megaprojects in China | 4K Travel Documentary
▶︎

China’s Secret | The Most Unbelievable Megaprojects in China | 4K Travel Documentary

ASMR Addictive Fast Tapping Collection For Deep Sleep & Anxiety Relief (No Talking) — 2.5 Hours
▶︎

ASMR Addictive Fast Tapping Collection For Deep Sleep & Anxiety Relief (No Talking) — 2.5 Hours

5 продвинутых паттернов в React
▶︎

5 продвинутых паттернов в React

JSX в React: особенности синтаксиса, подводные камни, условный рендеринг и списки
▶︎

JSX в React: особенности синтаксиса, подводные камни, условный рендеринг и списки

React JS с 0 для начинающих. Введение. Что такое React? Преимущества React. Зачем React нужен?
▶︎

React JS с 0 для начинающих. Введение. Что такое React? Преимущества React. Зачем React нужен?

God Says:"I JUST CONFIRMED — ONLY YOU CAN SEE THIS LETTER"/God Message Now/God Message
▶︎

God Says:"I JUST CONFIRMED — ONLY YOU CAN SEE THIS LETTER"/God Message Now/God Message

ВСЁ про JAVA-СОБЕСЕДОВАНИЯ В 2026. ЗАРПЛАТЫ, ЛОВУШКИ, ВОПРОСЫ
▶︎

ВСЁ про JAVA-СОБЕСЕДОВАНИЯ В 2026. ЗАРПЛАТЫ, ЛОВУШКИ, ВОПРОСЫ