
Содержание статьи
автор Зак Кван

Настройка 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 va
riable and add CC_TEST_REPOR
TER_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 или блоге.