Деплой SPA (Vite + React + Router) на GitHub Pages
В этом видео детально рассмотрим процесс деплоя 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: t.me/antonovjs
* spa-github-pages от @rafgraph - github.com/rafgraph/
* spa-github-pages
* import.meta - developer.mozilla.org/ru/docs...
* Пакет gh-pages - www.npmjs.com/package/gh-pages
* Переменные окружения и Vite - vitejs.dev/guide/env-and-mode...
* Курс «React. Разработка сложных клиентских приложений» от HTML Academy - htmlacademy.ru/intensive/react.
Пікірлер: 51
Спасибо большое! Очень грамотно объяснено и приятно слушать !
По маршрутизации вообще класс, то что нужно
суперское объяснение, спасибо!
Спасибо за видео, очень помогло)
Про переменные окружения было бы неплохо посмотреть😊
Игорь, спасибо большое за видео! Очень просто и понятно, долго искала информацию, а ваше видео разложило всё по полочкам, всё работает☺
Первый раз пишу комментарий, на столько зашло видео!))) Спасибо тебе!
очень помогло, спасибо тебе
Крутяк!!!!! Уже стал переживать, так долго выпусков не было!!!
@antonov_i
9 ай бұрын
Работа + подготовка двух конференций сделали своё дело 😞
огромное спасибооооо!!!!!
Спасибо!
Спасибо очень круто !!!
Лучшее видео по деплою для новичков
Игорь крут!!! Спасибо!!
Спасибо за такое видео Очень понятно Очень помогло
Рад что наткнулся на твоё видео, помог решить проблему с маршутизацией роутера. Большое спасибо за полезный контент и качественную подачу материала
Спасибо Игорь!!! Сейчас буду пробовать.
Отлично объясняете , все работает !!! Огромное спасибо :)🤩
Игорь, bull's eye. спасибо
БЛАГОДАРЮ, ЦЕЛЫЙ ДЕНЬ УБИЛ НА ПОИСК, СПАСИБО
Как всегда всё круто и интересно! В будущем хотелось бы увидеть что-то подобное для проектов с SSR. Хотя бы в базовом виде. Какие особенности сборки, правильное взаимодействие между клиентом и сервером и т.д.
@antonov_i
9 ай бұрын
Добавлю в список. Давно хочется про Next сделать видео.
Игорь, огромное вам спасибо!!!!!!!!!! И спасибо этому чуваку rafgraph!!!! Но если бы не вы, Игорь, то как бы мы нашли этого rafgraph! Все работает! Как круто! И теперь при деплое на gh-pages нет ошибки 404 при перезагрузке. УРа!!!!!!!!!!
👍
посмотрел и решил на vercel залить, где все гораздо проще:)
13:15 Для тех, кто как я, не знает что значат флаги в npm install: -D сокращение для --save-dev. Устанавливает пакет в дев зависимости, в те которые нужны только для программистов, а не для пользователей конечного продукта. -E сокращение для --save-exact. Устанавливает конкретную версию пакета, а не диапазон семантических версий. Например, конкретная версия в файле package.json будет пронумерована так 16.1.0 (без символа каретки), а семантическая так ^16.1.0 (с кареткой перед цифрами). И если вы например клонируете репозиторий на новой машине, то вам надо будет запустить npm install, чтобы опять все пакеты установить. И в случае семантической версии у вас может установится более новая версия какого-нибудь пакета например версия 16.2.0, которая может конфликтовать, баговать с вашим кодом и пока вы это поймете, потеряете кучу нервов. Пишу, потому что сама не знала что эти флаги значат, вдруг кто-нибудь тоже не знает, хочу помочь. Инфа про версии с сайта plainenglish статья Best Way How To Install NPM Packages With an Exact Version.
@antonov_i
4 ай бұрын
Спасибо за дополнение! Кстати, более подробно про виды зависимостей можно посмотреть в отдельном видео - kzread.info/dash/bejne/lWGik7CHkafAYLw.html. Здесь и optional, bundle, peer.
Игорь, спасибо большое за качественные видео! Как преподаватель, учусь увлекательной подаче материала :) Если не секрет, что за модель микрофона? Буду благодарна ответу.
@antonov_i
8 ай бұрын
Спасибо за поддержку )) Начиная с этого видео у меня Rode Procaster (XLR). В прежних был Nady 1CX (USB)
Игорь, почему так часто пропадайте? Очень жду ваших видео :)
@antonov_i
8 ай бұрын
Спасибо за поддержку! Всему причина - работа, которая настигает даже в выходные. Октябрь был временем конференций и гостевых лекций в университете. В ноябре времени будет больше, видео вернуться. Скоро-скоро!
@Mrflomaster2011
8 ай бұрын
@@antonov_i Благодарю за ответ. Понимаю что работа отнимает у вас свободное время. В любом случае продолжайте вести ваш канал 😀 мне лично нравится ваша подача материала.
Отличное понятное объяснение) Спасибо! Непонятен важный (!) момент по деплою - что за плагин для vscode дает красивые иконки в панели exlorer ?)
@antonov_i
4 ай бұрын
Я использую расширение vscode-icons (marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons). Есть и другие, можно поискать по ключевому слову icons в списке расширений
Спасибо! Очень полезно. Пыталась задеплоить six-cities-13, но почему-то не подгружается logo и pin. С чем это может быть связано?
@antonov_i
8 ай бұрын
Проверьте пути, которые указаны для изображений. Возможно путь строится от корня. Проще всего открыть вкладку «Network» в инструментах разработчика и посмотреть запросики к незагруженным ресурсам.
@LarissaZubkova
8 ай бұрын
@@antonov_i спасибо, помогло)
Здравствуйте. Подскажите, пожалуйста, как настроить github pages для проекта с фронтэндом на react(после сборки все файлы в папке build), и бэкэндом ?
@antonov_i
29 күн бұрын
Здравствуйте. Фронтенд разворачивать точно также. А вот back на GitHub Pages развернуть не получится (
А как же автоматизация? Можно же не пакет gh-pages вручную каждый раз запускать (что можно и забыть сделать), а написать файлик gh-actions, чтобы гитхаб сам по пушу в main запускал у себя на сервере пересборку приложения и пушил его в ветку gh-pages (на что так же среагирует встроенный экшен деплоя). Пакет gh-pages при этом не нужен совсем.
@antonov_i
9 ай бұрын
Всё верно. Я упоминал о варианте с gh-actions, но в видео его не разбирал. Повод сделать отдельный материал.
Подскажите как сделать без Vite?? Плиззз
Почему-то у меня нет файла index.tsx
Спасибо за урок но подскажите когда я сделал деплой по Вашей методеке у меня такая ошибка когда я перехожу по роуту failed to fetch dynamically imported module как можна пофиксить использую (const Tab = ({ tab }) => { const MyTabs = lazy(() => import(`/${tab.path}`)); return ( {tab.title} );) заранее спасибо
@antonov_i
8 ай бұрын
Сложно подсказать не видя всей информации. Но здесь проблема импорте модуля. Возможно модуль, который в импортируете (путь `tab.path`) не существует или лежит не в том месте (например, путь строится с учётом корня). Откройте инструмент Network в инструментах разработчика и посмотрите откуда происходит импорт модуля.
@user-jb3bd5zz9g
8 ай бұрын
@@antonov_i прикол в том что в dev разработке работаєт на ура а вот в build такая ошибка думал что может какие то настроики для vite есть для функции const MyTabs = lazy(() => import(`/${tab.path}`)); мне кажется здесь проблема с lazy
@antonov_i
7 ай бұрын
@@user-jb3bd5zz9g Возможно. А какую именно ошибку выдаёт?
@user-jb3bd5zz9g
7 ай бұрын
@@antonov_i failed to fetch dynamically imported module
@antonov_i
7 ай бұрын
@@user-jb3bd5zz9g Хм, странно. Запишу себе, как будет время попробую посмотреть. Но не знаю когда получится. Есть мысль сейчас записать видео про реализации SSR.