Деплой SPA (Vite + React + Router) на GitHub Pages

Опубликовано: 04 Ноябрь 2024
на канале: Игорь Антонов — про JavaScript и разработку

7,319

447

В этом видео детально рассмотрим процесс деплоя SPA (Single Page Application) на GitHub Pages. Вы узнаете какие необходимо выполнить настройки для публикации (Vite, React Router) приложения, а также научитесь конфигурировать React Router для корректной работы на GitHub Pages. Немного затронем переменные окружения (BASE_URL) и узнаем чем они могут нам помочь при настройке деплоя приложения.

Содержание:

00:00 Интро
02:08 Что будем деплоить
04:13 Готовим репозиторий
07:21 Как работает деплой на GitHub Pages
10:36 Настройки GitHub Pages
12:33 Пакет gh-pages. Конфигурация
16:25. Деплой. Попытка №1
19:55 Проблема №1. Подключение ресурсов
22:29 Проблема №2. Маршрутизация
25:32 Проблема №3. И снова React Router
33:51 Задействуем переменные окружения
36:71 Оутро и итоги

Полезные ссылки:

Мой блог в Telegram: https://t.me/antonovjs
spa-github-pages от @rafgraph — https://github.com/rafgraph/
spa-github-pages
import.meta — https://developer.mozilla.org/ru/docs...
Пакет gh-pages — https://www.npmjs.com/package/gh-pages
Переменные окружения и Vite — https://vitejs.dev/guide/env-and-mode...
Курс «React. Разработка сложных клиентских приложений» от HTML Academy — https://htmlacademy.ru/intensive/react.