ОБНОВЛЕНИЕ II: микро-список был переименован в serve, и репо обновлено, чтобы отразить это. Для получения последней информации о том, как его запустить, обратитесь непосредственно к файлу README, поскольку эта статья содержит устаревшие сведения.

ОБНОВЛЕНИЕ: now-serve был заменен пакетом micro-list для поддержки развертывания Now с переменными среды. Вместо использования now-serve для развертывания производственной сборки теперь используется интерфейс командной строки Now для развертывания производственной сборки вместе с некоторыми настраиваемыми переменными среды. Затем микро-список используется для обслуживания этих статических файлов с помощью команды list build /. Обратитесь непосредственно к изменениям кодов, чтобы понять эти изменения.

С выпуском create-react-app (CRA) командой React первой мыслью, которую я придумал, было: вау, это здорово! теперь, как я могу использовать замечательную службу Zeit «▲ now для развертывания проекта, созданного с помощью CRA? »

В то время, когда был выпущен CRA, я следил за этой новой замечательной услугой по развертыванию приложений NodeJS под названием ▲ сейчас. Я попробовал это сам, и первое впечатление, которое у меня было: Ух ты. Это по-настоящему? наконец-то кто-то это сделал! Развертывание проекта NodeJS с помощью одной команды: сейчас

На фоне этого ажиотажа возникла другая новость, которая еще больше взволновала меня, проект create-react-app. Вот где я решила придумать, как поженить их вместе.

Представляем: create-react-app-now

PS: нет необходимости строить свой проект поверх create-react-app-now (хотя вы можете, если хотите), он служит скорее примером того, как люди могут использовать ▲ сейчас с проектами, созданными CRA. Эта статья поможет вам настроить его самостоятельно. Это очень просто, поверьте мне.

Первое, что вам нужно сделать, это выполнить readme-файл create-response-app, чтобы начать работу:

$ npm install -g create-react-app
$ create-react-app <projectname>
$ cd <projectname>

Затем вы можете использовать «npm start» для локального запуска проекта, «npm run build» для сборки для производства и другие команды, поддерживаемые CRA.

Вам нужно следить за «npm run build», поскольку эта команда сгенерирует новую папку с именем «build» в корневой папке вашего проекта, чтобы сохранить производство. готовый код.

По сути, вы хотите развернуть этот готовый к производству код на хосте. Он может быть где угодно, пока может обслуживать статический html + js + css.

В этом случае мы собираемся использовать now-serve для его размещения (убедитесь, что вы все еще находитесь в корневой папке ‹projectname›):

$ npm install -g now now-serve
$ npm run build
$ ns build

Вот и все! Ваше приложение React будет готово через несколько минут, если не секунд!

Здесь происходит следующее: теперь мы установили cli и теперь обслуживаем cli по всему миру. Далее следует создание проекта, который будет готов к производству. Наконец, now-serve используется для развертывания папки build в ▲ now и передачи ее в WWW.

Всякий раз, когда вам нужно выполнить повторное развертывание, просто запустите:

$ npm run build
$ ns build

Это так просто! Действительно, нулевая конфигурация.

Но давайте сделаем еще один шаг, чтобы упростить ситуацию. Вместо того, чтобы постоянно повторять команды для сборки и развертывания в ▲ сейчас, почему бы не добавить простой сценарий в package.json, который автоматизирует процесс с помощью одной единственной команды?

Установите сейчас cli и теперь используйте cli как devDependencies:

$ npm install now now-serve --save-dev

Затем добавьте собственный сценарий npm:

{
  ...
  "scripts": {
    ...,
    "deploy": "npm run build && ns build"
  }
}

Всякий раз, когда вы хотите развернуть (или повторно развернуть) приложение React, просто запустите эту 1 команду:

$ npm run deploy

PS: если вам нравится это чтение, может быть, полюбите его? или загляните в мой github и поставьте звезду create-react-app-now? Если у вас есть какие-либо отзывы, не стесняйтесь оставлять отзывы ниже. Ура!