автор Зак Кван

Настройка a Отреагировать Среда разработки может быть запутанной и сложной для новичков. Возможно, вы слышали, как разработчики говорят о том, как разные пакеты любят babel, Webpack и так далее, тоже нужны (но это спорное).

Поскольку React становится все более популярным, существует несколько типовых проектов, которые имеют целью помочь разработчикам создать соответствующую среду разработки React. create-react-app является одним из самых популярных стартовых шаблонов.

Он направлен на то, чтобы разрешить разработчикам создавать приложение для реакции нулевая конфигурация сборки.

Разработчикам больше не придется беспокоиться о том, как webpack должно быть настроено, что должно быть настроено babel использовать es6или какой linter и test пакет для использования. Все будет работать из коробки. Да, это так легко!

Для разработчиков, которым нужно управлять базовой конфигурацией, он имеет a npm run eject это позволяет им возиться с конфигурацией и делать то, что они не могли делать раньше. Единственное, что стоит отметить, это один раз eject запущен, его невозможно изменить.

Стек разработки для React

Я написал следующее руководство, чтобы помочь разработчикам создать a Стек непрерывной интеграции и непрерывной развертки для их программы React. Мы будем использовать CircleCI, CodeClimate, и Героку. Если у вас нет аккаунта ни в одной из указанных выше служб, перейдите, чтобы зарегистрироваться — они БЕСПЛАТНЫ!

В конце концов у нас будет программа React в репозитории Github, которая автоматически развернет любые изменения. master отделение в Героку после прохождения всех тестов. Вот образец развернутых Отреагировать веб-сайт.

Давайте начнем!

Первым шагом является соблюдение create-react-app руководство по созданию новой программы React. Сделать это:

$ npm install -g create-react-app$ create-react-app my-react-app$ cd my-react-app/$ npm start

Тогда браузер должен автоматически открыть страницу по адресу. Если вы видите a Добро пожаловать на React страница работает, все хорошо.

Настройка CircleCI

Далее нам нужно добавить небольшую конфигурацию к настройке CircleCI для нашего проекта. Создать .circleci папку да а config.yml в этом каталоге и добавьте следующее:

version: 2jobs:  build:    docker:      - image: circleci/node:8    steps:      - checkout      - restore_cache: # special step to restore the dependency cache          key: dependency-cache-{{ checksum "package.json" }}      - run:          name: Setup Dependencies          command: npm install      - run:          name: Setup Code Climate test-reporter          command: |            curl -L  > ./cc-test-reporter            chmod +x ./cc-test-reporter      - save_cache: # special step to save the dependency cache          key: dependency-cache-{{ checksum "package.json" }}          paths:            - ./node_modules      - run: # run tests          name: Run Test and Coverage          command: |            ./cc-test-reporter before-build            npm test -- --coverage            ./cc-test-reporter after-build --exit-code $?

Это настройка для CircleCI 2.0. Они закрывают Circle 1.0 31 августа 2018 года.

The build шаг устанавливает а node:8 с изображением Docker. Это требует v6 или выше для работы.

в steps, мы сначала проверяем проект, восстанавливаем из кэша, если есть, затем устанавливаем зависимости. Мы также устанавливаем cc-test-reporterинструмент, предоставленный CodeClimate для отправки отчета о покрытии.

Затем запускаем test между before-build и after-build команд в соответствии с документами CodeClimate. Это уведомляет CodeClimate об отчете, ожидающем рассмотрение, а после завершения отправляет отчет или статус сбоя.

Настройте Git

Создайте репо в Github и сделайте следующее:

$ git init$ git remote add origin git@github.com:username/new-repo-here$ git add .$ git commit -m “first commit”$ git push -u origin master

Это перенесет созданный нами проект на GitHub.

Создайте и протестируйте проект

Перейдите к CircleCI, войдите и создайте только что созданный проект. В конце сборника вы должны увидеть сбой на Run Test and Coverage.

Настройка CodeClimate

Вышеуказанная ошибка связана с тем, что у нас еще нет права публиковать отчет в CodeClimate. Итак, теперь перейдите к CodeClimate, войдите и создайте созданный проект GitHub. Мы должны получить это в конце анализа:

Чтобы устранить проблему CircleCI и использовать Test Coverage отзыв, нам понадобится Test Reporter ID. Это можно получить на странице Settings > Test Coverвкладка возраст. Копия тhe Test Reporter Идентификатор, не уведомляя его никому.

в CircleCIперейдите к Project > Settings > Environment variable and add CC_TEST_REPORTER_ID из copied Test Reporтер ID.

Настройка развертывания Heroku

Чтобы развернуть React на Героку , мы будем использовать buildpack. Выполните следующее:

$ heroku create REPLACE_APP_NAME_HERE — buildpack  git push heroku master$ heroku open

Мы выдвинули последнее master отделение в heroku с git push heroku master. В конце откроется веб-страница, на которой будет показано Добро пожаловать на React страница.

Далее нам придется перейти к только что созданному приложению Приборная панель Heroku для настройки автоматического развертывания. Выполните следующее на приборной панели:

• Идти в Развернуть вкладка и Подключить в правильное репо GitHub.
• Включить Автоматическое развертывание и проверить Wait for CI to pass before deploy.

Мы кончили!

Через несколько шагов мы полностью автоматизирован пакет непрерывной интеграции и развертывания. Теперь с каждым комитом, к которому нужно подтолкнуть GitHubон пришлет триггер к CircleCI и CodeClimate. После прохождения теста, если он был в главной ветке, он также будет автоматически развернут на Героку.

Просмотрите образец репо здесь и развернутый веб-сайт здесь!

Вывод

Это обновление моей предыдущей публикации почти год назад. Использование CircleCI было обновлено до 2.0 и мы также используем обновленную cc-test-reporter за CodeClimate. Если вас интересует миграция, вы можете просмотреть запрос на подъемник.

Спасибо, что прочли! Если вам нравится, нажмите???

Мне нравится читать и писать о технологиях и продуктах, особенно связанных с повышением производительности разработчиков. Вы можете поздороваться со мной в моем Twitter или блоге.