Создание приложения React на вашем локальном хосте или компьютере — одна из тех вещей, которые мы делаем как разработчики. После создания этого замечательного приложения на своем ноутбуке вы захотите, чтобы мир увидел это удивительное приложение в прямом эфире во всемирной паутине. Мы собираемся использовать процесс Create React App (CRA) для создания и развертывания нашего приложения с использованием страниц Github (gh-pages).

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

Необходимое условие

Вот некоторые из приятных вещей, которые нужно иметь, прежде чем мы начнем.

Аккаунт Гитхаб

Установите Git для Mac и ПК с Windows и настройте его

Также убедитесь, что на вашем ПК установлены Node и npm для установки зависимости, gh-pages для развертывания.

Цели

В этом уроке мы рассмотрим этапы запуска вашего проекта в Интернете. Вот ссылки на демонстрацию и исходный код размещенной страницы Rolodex.

* "Источник"

* Демо

Начиная

Шаг 1:

Чтобы быстро приступить к работе, мы будем использовать Создать приложение React для настройки среды.

Примечание: Rolodex — это просто имя, которое я решил использовать для своего приложения React, вы можете использовать любое имя по вашему выбору.

Шаг 2:

Установите пакет Github pages. Этот пакет помогает создать ветку (gh-pages) в созданном репозитории на Github, чтобы обрабатывать сборку нашего приложения по его действующему URL-адресу, когда мы будем готовы к его развертыванию.

Шаг 3

Добавьте следующие свойства в файл `package.json`

В разделе scripts файла package.json добавьте следующее.

Шаг 4

Запустите команду npm run deploy, которая создаст для нас папку сборки и наше приложение со всеми файлами, необходимыми для развертывания, такими как файлы HTML, JavaScript и CSS.

Измените ветку по умолчанию на gh-pages в настройках репозитория.

Один очень важный момент, который следует отметить в приведенных выше шагах, — зафиксировать и отправить изменения в Github с тем же именем созданного репозитория, которое вы использовали при развертывании этого приложения.

Вывод

Подводя итог, мы прошли этапы развертывания нашего приложения React с помощью gh-pages. И с помощью этих шагов вы можете использовать этот метод со всеми вашими приложениями React, которые вы создаете, и просто показать миру, из чего вы сделаны.

Если это помогло вам в любом случае, пожалуйста, оставьте отзыв. Это всегда приветствуется. Свяжитесь со мной в Твиттере.