Деплой SPA (Vite + React + Router) на GitHub Pages
HTML-код
- Опубликовано: 30 июн 2024
- В этом видео детально рассмотрим процесс деплоя 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.
По маршрутизации вообще класс, то что нужно
Спасибо за видео, очень помогло)
суперское объяснение, спасибо!
очень помогло, спасибо тебе
Игорь, спасибо большое за видео! Очень просто и понятно, долго искала информацию, а ваше видео разложило всё по полочкам, всё работает☺
Про переменные окружения было бы неплохо посмотреть😊
Первый раз пишу комментарий, на столько зашло видео!))) Спасибо тебе!
Крутяк!!!!! Уже стал переживать, так долго выпусков не было!!!
Работа + подготовка двух конференций сделали своё дело 😞
Рад что наткнулся на твоё видео, помог решить проблему с маршутизацией роутера. Большое спасибо за полезный контент и качественную подачу материала
огромное спасибооооо!!!!!
Как всегда всё круто и интересно! В будущем хотелось бы увидеть что-то подобное для проектов с SSR. Хотя бы в базовом виде. Какие особенности сборки, правильное взаимодействие между клиентом и сервером и т.д.
Добавлю в список. Давно хочется про Next сделать видео.
Игорь, огромное вам спасибо!!!!!!!!!! И спасибо этому чуваку rafgraph!!!! Но если бы не вы, Игорь, то как бы мы нашли этого rafgraph! Все работает! Как круто! И теперь при деплое на gh-pages нет ошибки 404 при перезагрузке. УРа!!!!!!!!!!
Спасибо за такое видео
Очень понятно
Очень помогло
Лучшее видео по деплою для новичков
Отлично объясняете , все работает !!! Огромное спасибо :)🤩
Спасибо Игорь!!! Сейчас буду пробовать.
Игорь крут!!! Спасибо!!
Спасибо очень круто !!!
Спасибо!
БЛАГОДАРЮ, ЦЕЛЫЙ ДЕНЬ УБИЛ НА ПОИСК, СПАСИБО
Игорь, bull's eye. спасибо
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.
Спасибо за дополнение! Кстати, более подробно про виды зависимостей можно посмотреть в отдельном видео - ruclips.net/video/c-n1NNaDZ0Y/видео.html. Здесь и optional, bundle, peer.
посмотрел и решил на vercel залить, где все гораздо проще:)
👍
Игорь, почему так часто пропадайте? Очень жду ваших видео :)
Спасибо за поддержку! Всему причина - работа, которая настигает даже в выходные. Октябрь был временем конференций и гостевых лекций в университете. В ноябре времени будет больше, видео вернуться. Скоро-скоро!
@@antonovjs Благодарю за ответ.
Понимаю что работа отнимает у вас свободное время.
В любом случае продолжайте вести ваш канал 😀 мне лично нравится ваша подача материала.
Игорь, спасибо большое за качественные видео! Как преподаватель, учусь увлекательной подаче материала :)
Если не секрет, что за модель микрофона? Буду благодарна ответу.
Спасибо за поддержку )) Начиная с этого видео у меня Rode Procaster (XLR). В прежних был Nady 1CX (USB)
Отличное понятное объяснение) Спасибо! Непонятен важный (!) момент по деплою - что за плагин для vscode дает красивые иконки в панели exlorer ?)
Я использую расширение vscode-icons (marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons). Есть и другие, можно поискать по ключевому слову icons в списке расширений
А как же автоматизация? Можно же не пакет gh-pages вручную каждый раз запускать (что можно и забыть сделать), а написать файлик gh-actions, чтобы гитхаб сам по пушу в main запускал у себя на сервере пересборку приложения и пушил его в ветку gh-pages (на что так же среагирует встроенный экшен деплоя).
Пакет gh-pages при этом не нужен совсем.
Всё верно. Я упоминал о варианте с gh-actions, но в видео его не разбирал. Повод сделать отдельный материал.
Спасибо! Очень полезно. Пыталась задеплоить six-cities-13, но почему-то не подгружается logo и pin. С чем это может быть связано?
Проверьте пути, которые указаны для изображений. Возможно путь строится от корня. Проще всего открыть вкладку «Network» в инструментах разработчика и посмотреть запросики к незагруженным ресурсам.
@@antonovjs спасибо, помогло)
Здравствуйте. Подскажите, пожалуйста, как настроить github pages для проекта с фронтэндом на react(после сборки все файлы в папке build), и бэкэндом ?
Здравствуйте. Фронтенд разворачивать точно также. А вот back на GitHub Pages развернуть не получится (
Подскажите как сделать без Vite?? Плиззз
Почему-то у меня нет файла index.tsx
Спасибо за урок но подскажите когда я сделал деплой по Вашей методеке у меня такая ошибка когда я перехожу по роуту failed to fetch dynamically imported module как можна пофиксить использую
(const Tab = ({ tab }) => {
const MyTabs = lazy(() => import(`/${tab.path}`));
return (
{tab.title}
);)
заранее спасибо
Сложно подсказать не видя всей информации. Но здесь проблема импорте модуля. Возможно модуль, который в импортируете (путь `tab.path`) не существует или лежит не в том месте (например, путь строится с учётом корня). Откройте инструмент Network в инструментах разработчика и посмотрите откуда происходит импорт модуля.
@@antonovjs прикол в том что в dev разработке работаєт на ура а вот в build такая ошибка думал что может какие то настроики для vite есть для функции const MyTabs = lazy(() => import(`/${tab.path}`)); мне кажется здесь проблема с lazy
@@user-jb3bd5zz9g Возможно. А какую именно ошибку выдаёт?
@@antonovjs failed to fetch dynamically imported module
@@user-jb3bd5zz9g Хм, странно. Запишу себе, как будет время попробую посмотреть. Но не знаю когда получится. Есть мысль сейчас записать видео про реализации SSR.