ReactJS + github pages – разворачиваем проект deploy на GitHub

Чтобы создать продакшен-сборку (версию для заливки на сервер) приложения используется команда npm run build . Это можно также запустить и кнопкой в VSC или WebStorm внизу слева, там где вызываются скрипты из package.json. В результате появится папочка build с файлами js и css.

Но если в таком виде просто залить содержимое папки на GitHub, то могут быть проблемы с работой. Поэтому ниже приведен более правильный алгоритм.

Как развернуть приложение в том же репозитории, где находится версия для разработки?

1. Установить пакет gh-pages, чтобы можно было использовать одноименную функцию. Для этого прописываем npm install gh-pages --dev либо yarn add gh-pages --dev. Нужно писать именно с –dev, чтобы пакет установился и прописался в package.json в разделе “devDependencies“, а не просто “dependencies“. Именно туда он попадает, если устанавливать по инструкции с документации при помощи npm install gh-pages --save-dev , поэтому использовать нужно одну из команд выше, а не эту.
2. Согласно той же документации, добавляем 2 строчки в раздел “scripts” нашего файла package.json:

   "predeploy": "npm run build",
   "deploy": "gh-pages -d build"

   Благодаря этому теперь внизу слева возле кнопок build, start и т.д.  появлятся еще две – predeploy и deploy.

3. Теперь, чтобы не было проблем с путями после деплоя приложения на GitHub, добавляем строчку с указанием домашней страницы в корень package.json:
   "homepage": "https://nameaccount.github.io/namerepository". Как видно, путь должен ссылаться на на аккаунт гитхапаба и ваш репозиторий, в котором лежит приложение. Это не тот же самый путь, где лежит репозиторий для разработчика (master)! Посмотреть нужный путь можно в настройках репозитория в разделе GitHub Pages
   
4. Теперь мы можем нажимать на deploy либо вручную выполнить gh-pages -d build. В результате будет создана папочка build, содержимое которой параллельно попадет на ветку gh-pages на GitHub и она в настройках активируется (не мешая ветке master, применяемой для разработки).
   Обратите внимание, что оно по адресу https://nameaccount.github.io/namerepository появится не мгновенно. GitHub сначала закэширует файлы, на что может уйти несколько минут. До этого будет пустая белая страница, чего не стоит сразу бояться. Если приложение работало локально, то заработает и здесь, если, конечно, не стоит ограничений на сервере с бэкендом для получения запросов с другого адресса. Это можно будет увидеть в консоли.
5. Вроде все работает, но есть важный нюанс. Если мы с главной страницы перейдем на какую-то вложенную в приложении и обновим ее, то получим 404 ошибку. Почему так? Дело в том, что на GitHub так “криво” работает наше приложение. Оно не может понять, что сначала нужно загрузить /index.html, который находится по уровню вложенности выше. На другом сервере такой проблемы не будет. Но на ГитХабе придется от нее избавляться при помощи уже в принципе устаревшего маршрутизатора HashRouter, которым нужно заменить
   BrowserRouter в нашем app.js:
   До
   

   import {BrowserRouter} from 'react-router-dom';
   ....
   const NewApp = (props) => {
     return  <BrowserRouter basename={process.env.PUBLIC_URL}>
         <Provider store={store}>
             <AppContainer />
         </Provider>
       </BrowserRouter>
    }
   ...

   После
   

   import {HashRouter} from 'react-router-dom';
   .....
   
   const NewApp = (props) => {
     return  <HashRouter basename={process.env.PUBLIC_URL}>
         <Provider store={store}>
             <AppContainer />
         </Provider>
       </HashRouter>
    }
   .....

   Теперь наши url(ы) в приложении будут выглядеть не вот так https://yourname.github.io/social/dialogs, а вот так https://ourname.github.io/social/#/social/dialogs и ошибки при обновлении страницы больше не будет. Теперь нам можно и не прописывать homepage в package.json – все заработает и так. Но, повторюсь, на обычном хостинге или сервере такого делать не нужно.

    

Как развернуть приложение не в том репозитории, где находится версия для разработки?

1. Создаем новый пустой репозиторий.
2. Клонируем его (пустым) в папку на ПК.
3. Копируем в папку все файлы с исходным кодом нашего приложения (кроме скрытого файлика .git).
4. Комитим, пушим.
5. Делаем deploy, как описано в предыдущем разделе, и все происходит так же, как уже было описано выше.