Деплой 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

  • @Vse-po-Faktu
    @Vse-po-Faktu21 сағат бұрын

    Спасибо большое! Очень грамотно объяснено и приятно слушать !

  • @shizzuki7154
    @shizzuki7154Ай бұрын

    По маршрутизации вообще класс, то что нужно

  • @Ohhhnailsss
    @Ohhhnailsss16 күн бұрын

    суперское объяснение, спасибо!

  • @user-bb1uj1kw6c
    @user-bb1uj1kw6c16 күн бұрын

    Спасибо за видео, очень помогло)

  • @kilnourik
    @kilnourik9 ай бұрын

    Про переменные окружения было бы неплохо посмотреть😊

  • @svet_lana_ta
    @svet_lana_ta4 ай бұрын

    Игорь, спасибо большое за видео! Очень просто и понятно, долго искала информацию, а ваше видео разложило всё по полочкам, всё работает☺

  • @user-iw2ne1ek2u
    @user-iw2ne1ek2u4 ай бұрын

    Первый раз пишу комментарий, на столько зашло видео!))) Спасибо тебе!

  • @tuyaragrigoreva6373
    @tuyaragrigoreva6373Ай бұрын

    очень помогло, спасибо тебе

  • @andrewsam224
    @andrewsam2249 ай бұрын

    Крутяк!!!!! Уже стал переживать, так долго выпусков не было!!!

  • @antonov_i

    @antonov_i

    9 ай бұрын

    Работа + подготовка двух конференций сделали своё дело 😞

  • @iramiami
    @iramiami5 ай бұрын

    огромное спасибооооо!!!!!

  • @user-dz1uq5sd5b
    @user-dz1uq5sd5b8 ай бұрын

    Спасибо!

  • @denzzlleros837
    @denzzlleros8373 ай бұрын

    Спасибо очень круто !!!

  • @user-bh1vf2qy2n
    @user-bh1vf2qy2n8 ай бұрын

    Лучшее видео по деплою для новичков

  • @andrewsam224
    @andrewsam2244 ай бұрын

    Игорь крут!!! Спасибо!!

  • @RyhorVolasau
    @RyhorVolasau6 ай бұрын

    Спасибо за такое видео Очень понятно Очень помогло

  • @Ama-wc9fl
    @Ama-wc9fl5 ай бұрын

    Рад что наткнулся на твоё видео, помог решить проблему с маршутизацией роутера. Большое спасибо за полезный контент и качественную подачу материала

  • @andrewsam224
    @andrewsam2244 ай бұрын

    Спасибо Игорь!!! Сейчас буду пробовать.

  • @liudmilapikhtina219
    @liudmilapikhtina2198 ай бұрын

    Отлично объясняете , все работает !!! Огромное спасибо :)🤩

  • @dotg6618
    @dotg66189 ай бұрын

    Игорь, bull's eye. спасибо

  • @vhs5694
    @vhs56948 ай бұрын

    БЛАГОДАРЮ, ЦЕЛЫЙ ДЕНЬ УБИЛ НА ПОИСК, СПАСИБО

  • @SomeTimesCoding
    @SomeTimesCoding9 ай бұрын

    Как всегда всё круто и интересно! В будущем хотелось бы увидеть что-то подобное для проектов с SSR. Хотя бы в базовом виде. Какие особенности сборки, правильное взаимодействие между клиентом и сервером и т.д.

  • @antonov_i

    @antonov_i

    9 ай бұрын

    Добавлю в список. Давно хочется про Next сделать видео.

  • @user-dq3rc1xu7b
    @user-dq3rc1xu7b2 ай бұрын

    Игорь, огромное вам спасибо!!!!!!!!!! И спасибо этому чуваку rafgraph!!!! Но если бы не вы, Игорь, то как бы мы нашли этого rafgraph! Все работает! Как круто! И теперь при деплое на gh-pages нет ошибки 404 при перезагрузке. УРа!!!!!!!!!!

  • @velikorossnationalist4259
    @velikorossnationalist42598 ай бұрын

    👍

  • @true227
    @true227Ай бұрын

    посмотрел и решил на vercel залить, где все гораздо проще:)

  • @nefed-L
    @nefed-L4 ай бұрын

    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

    @antonov_i

    4 ай бұрын

    Спасибо за дополнение! Кстати, более подробно про виды зависимостей можно посмотреть в отдельном видео - kzread.info/dash/bejne/lWGik7CHkafAYLw.html. Здесь и optional, bundle, peer.

  • @dariamagomedova7123
    @dariamagomedova71238 ай бұрын

    Игорь, спасибо большое за качественные видео! Как преподаватель, учусь увлекательной подаче материала :) Если не секрет, что за модель микрофона? Буду благодарна ответу.

  • @antonov_i

    @antonov_i

    8 ай бұрын

    Спасибо за поддержку )) Начиная с этого видео у меня Rode Procaster (XLR). В прежних был Nady 1CX (USB)

  • @Mrflomaster2011
    @Mrflomaster20118 ай бұрын

    Игорь, почему так часто пропадайте? Очень жду ваших видео :)

  • @antonov_i

    @antonov_i

    8 ай бұрын

    Спасибо за поддержку! Всему причина - работа, которая настигает даже в выходные. Октябрь был временем конференций и гостевых лекций в университете. В ноябре времени будет больше, видео вернуться. Скоро-скоро!

  • @Mrflomaster2011

    @Mrflomaster2011

    8 ай бұрын

    @@antonov_i Благодарю за ответ. Понимаю что работа отнимает у вас свободное время. В любом случае продолжайте вести ваш канал 😀 мне лично нравится ваша подача материала.

  • @Pumpkinpummm
    @Pumpkinpummm4 ай бұрын

    Отличное понятное объяснение) Спасибо! Непонятен важный (!) момент по деплою - что за плагин для vscode дает красивые иконки в панели exlorer ?)

  • @antonov_i

    @antonov_i

    4 ай бұрын

    Я использую расширение vscode-icons (marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons). Есть и другие, можно поискать по ключевому слову icons в списке расширений

  • @LarissaZubkova
    @LarissaZubkova8 ай бұрын

    Спасибо! Очень полезно. Пыталась задеплоить six-cities-13, но почему-то не подгружается logo и pin. С чем это может быть связано?

  • @antonov_i

    @antonov_i

    8 ай бұрын

    Проверьте пути, которые указаны для изображений. Возможно путь строится от корня. Проще всего открыть вкладку «Network» в инструментах разработчика и посмотреть запросики к незагруженным ресурсам.

  • @LarissaZubkova

    @LarissaZubkova

    8 ай бұрын

    @@antonov_i спасибо, помогло)

  • @nadiiabeskurskaya8233
    @nadiiabeskurskaya8233Ай бұрын

    Здравствуйте. Подскажите, пожалуйста, как настроить github pages для проекта с фронтэндом на react(после сборки все файлы в папке build), и бэкэндом ?

  • @antonov_i

    @antonov_i

    29 күн бұрын

    Здравствуйте. Фронтенд разворачивать точно также. А вот back на GitHub Pages развернуть не получится (

  • @firefoxic
    @firefoxic9 ай бұрын

    А как же автоматизация? Можно же не пакет gh-pages вручную каждый раз запускать (что можно и забыть сделать), а написать файлик gh-actions, чтобы гитхаб сам по пушу в main запускал у себя на сервере пересборку приложения и пушил его в ветку gh-pages (на что так же среагирует встроенный экшен деплоя). Пакет gh-pages при этом не нужен совсем.

  • @antonov_i

    @antonov_i

    9 ай бұрын

    Всё верно. Я упоминал о варианте с gh-actions, но в видео его не разбирал. Повод сделать отдельный материал.

  • @andrewsam224
    @andrewsam2244 ай бұрын

    Подскажите как сделать без Vite?? Плиззз

  • @svetoslavbogdanov5115
    @svetoslavbogdanov51154 ай бұрын

    Почему-то у меня нет файла index.tsx

  • @user-jb3bd5zz9g
    @user-jb3bd5zz9g8 ай бұрын

    Спасибо за урок но подскажите когда я сделал деплой по Вашей методеке у меня такая ошибка когда я перехожу по роуту failed to fetch dynamically imported module как можна пофиксить использую (const Tab = ({ tab }) => { const MyTabs = lazy(() => import(`/${tab.path}`)); return ( {tab.title} );) заранее спасибо

  • @antonov_i

    @antonov_i

    8 ай бұрын

    Сложно подсказать не видя всей информации. Но здесь проблема импорте модуля. Возможно модуль, который в импортируете (путь `tab.path`) не существует или лежит не в том месте (например, путь строится с учётом корня). Откройте инструмент Network в инструментах разработчика и посмотрите откуда происходит импорт модуля.

  • @user-jb3bd5zz9g

    @user-jb3bd5zz9g

    8 ай бұрын

    @@antonov_i прикол в том что в dev разработке работаєт на ура а вот в build такая ошибка думал что может какие то настроики для vite есть для функции const MyTabs = lazy(() => import(`/${tab.path}`)); мне кажется здесь проблема с lazy

  • @antonov_i

    @antonov_i

    7 ай бұрын

    @@user-jb3bd5zz9g Возможно. А какую именно ошибку выдаёт?

  • @user-jb3bd5zz9g

    @user-jb3bd5zz9g

    7 ай бұрын

    @@antonov_i failed to fetch dynamically imported module

  • @antonov_i

    @antonov_i

    7 ай бұрын

    @@user-jb3bd5zz9g Хм, странно. Запишу себе, как будет время попробую посмотреть. Но не знаю когда получится. Есть мысль сейчас записать видео про реализации SSR.

Келесі