Я размещал свои статические веб-страницы на GitHub и использую CNAME, чтобы указать хостированный проект на GH-страницах на моем собственном доменном имени.
Я новичок в современной веб-разработке и недавно активно изучал полную веб-разработку. Ранее просто подталкивая мои статические файлы HTML, CSS и JS в GitHub, используемые для непосредственного развертывания статического содержимого. Но когда я впервые подтолкнул приложение React в репозиторий GitHub, оно просто не опубликовало мою страницу. Мне больше не потребовалось, чтобы понять, что должен существовать какой -то другой способ опубликовать статическое поколение из приложения React.
Ну, это проще, чем я считал. Я показываю, как развернуть приложение React на GH-страницы в кратчайшие сроки.
Начиная:
Я создал приложение, принимающее приложение с использованием Firebase и React. Ничего особенного, кроме очень хорошего стартового проекта.
У вас должна быть установлена учетная запись GitHub, а также GIT и узел. Я предполагаю, что, поскольку вы с нетерпением ждете возможности разместить существующее приложение React, поэтому вы должны установить их.
Двигаясь вперед, я быстро перейду к установке пакета страниц GitHub GH-Pages Анкет Есть два вида среды разработки при работе над каким -либо приложением.
- Среда разработки
- Производственная среда
Чтобы практиковать хорошие привычки кодирования, мы заботимся о производственной и разработке, и поэтому мы будем устанавливать GH-Pages в среду разработки.
Давайте быстро перейдем к текущему рабочее каталог нашего приложения React, а затем установим GH-Pages с диспетчера пакетов NPM.
NPM Установка GH-Pages--save-dev или пряжа добавить GH-Pages-save-dev
Этот пакет в основном создает GH-Pages Ветвь на GitHub, а также обслуживает наши комплекты React в филиале.
В любом приложении узла, Package.json используется для управления свойствами и зависимостями проекта. Давайте найдем Package.json Файл в корневом каталоге, добавьте эту строку кода в свой скрипт: «Домашняя страница»: «ссылка на ваш репозиция» и сохранить. В моем случае это выглядит так: { «Имя»: «Приложение Notes», "Версия": "1.0.0", "Private": True, «Домашняя страница»: «https://akhilesh-k.github.io/notes», ... } Как я писал ранее, я использовал свой пользовательский домен до истечения, поэтому в случае, если у вас тоже есть пользовательский домен, вы можете добавить домен Домашняя страница свойство.
Вы также заметили, что внутри вашего Package.json Файл Существует объект скрипта, в основном он содержит сценарии, которые использует наше приложение React для запуска.
Снова в Package.json Файл, давайте найдем "Сценарии" и добавьте эти строки там: { ... «Предзнание»: «NPM Run Build», «Развертывание»: «GH -Pages -d Build», ... } Это зависит от вас, какой менеджер пакетов вы используете, вы можете написать Сборка пряжи тоже, если вы используете пряжа . В моем случае это было npm Анкет
Теперь наш сценарий выглядит так:
“Сценарии”: { “Start”: “React-Scripts Start”, «Предзнание»: «NPM Run Build», «Развертывание»: «GH -Pages -D Build», “Build”: “React-Scripts Build”, «Тест»: «Испытание на реагирование», выбросить “:” React-Scripts Eject ” },
Предзнание Команда в основном работает за кулисами, чтобы объединить приложение React, в то время как развернуть Команда начинает использование приложения в комплекте.
Предполагая, что у вас инициализировал репозиторий GIT и добавлено удаленное место в каталоге, мы теперь запустим развернуть Команда развернуть его на страницах GitHub!
Итак, давайте сделаем это!
В терминале запустите NPM запустить развертывание
В качестве альтернативы вы также можете использовать пряжа развернут развертывание Если ты пряжа, парень. развернуть в основном толкает файл после сборки в GH-Pagesbranch На нашем репозитории отдаленного GitHub.
Тем временем мы успешно опубликовали наше приложение React на страницы GitHub, не забудьте совершить код!
Годсть
Оригинал: “https://dev.to/akhileshk/deploying-react-app-to-github-pages-2jg5”