КАК РАЗВЕРНУТЬ ВАШЕ ПЕРВОЕ ПРИЛОЖЕНИЕ REACT НА СТРАНИЦАХ GITHUB!
Всем привет,
Это мой первый блог, и я новичок в React. Так что этот пост, вероятно, будет просто случайным набором слов и может не иметь особого смысла ;).
Но в любом случае я пишу этот пост в основном потому, что мне было трудно развернуть свое приложение React на страницах GitHub, и я хотел бы облегчить страдания новых разработчиков React, которые просто хотят развернуть свою работу.
Теперь первое, что большинство из вас увидит при поиске развертывания React на GitHub, — это «gh-pages». Что, если я скажу вам, что нам это не нужно?
Говоря о «gh-pages», это зависимость от разработчиков, которая делает всю работу за нас. Это автоматизировано и создает ветку с именем «gh-pages» в нашем репозитории github, в которой будет размещаться наше приложение. Довольно круто, верно? :D Я тоже так думал, пока у меня не сработало.
Суть проблемы заключалась в том, что я не знал, как работают gh-pages или что они делают для нас за спиной, чтобы понять и исправить ошибку. Поэтому я придумал этот DIY, который работает очень круто для меня.
Итак, давайте углубимся в это. Прежде всего, нам нужен репозиторий github, верно? Идите вперед и создайте его, и как только вы это сделаете, вы можете перейти на вкладку настроек своих страниц github и продолжить прокрутку вниз. Обратите внимание на заголовок GitHub Pages. Нашли? Теперь измените параметр «Источник» на «Папка Master/docs».
Вуаля! Ваш сайт готов к публикации. Теперь у вас есть адрес, где будет развернут ваш сайт. Так что сохраните копию, чтобы похвастаться :D.
Возвращаясь к нашему приложению React, нам нужно иметь свойство с именем «домашняя страница» в нашем файле «package.json», которое мы укажем на адрес нашей окончательной развернутой работы, которую, я полагаю, вы уже скопировали. Что-то вроде этого должно быть в вашем файле package.json:
«домашняя страница»: «https://mygithubaccount.github.io/my-app/»
Теперь вам может быть интересно, почему? Что ж, когда React создаст для нас объединенную структуру, он добавит этот путь к необходимым дополнительным зависимостям, чтобы все было доступно по указанному выше адресу.
Итак, все, что вам нужно сделать сейчас, это запустить команду:
«Выполнить сборку npm»
В структуре вашего приложения будет создана папка «build». Эта папка требуется страницам Github для развертывания вашего приложения, но поскольку для развертывания GitHub задан путь master/docs, мы переименуем папку «build» в «docs».
Теперь вы можете отправить свой локальный репозиторий в мастер, и все готово. Теперь ссылка будет служить вашему приложению. Возможно, вам придется подождать некоторое время, пока файлы будут загружены на сервер.
Вот и все! Дайте мне знать, если это работает для вас. :)
