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

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

Его цель - позволить разработчикам создавать приложения для реагирования с нулевой конфигурацией сборки.

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

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

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

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

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

Начнем!

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

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

Затем браузер должен автоматически открыть страницу по адресу http: // localhost: 3000 /. Если вы видите запущенную страницу Добро пожаловать в React, значит, все в порядке.

Настройка CircleCI

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

version: 2
jobs:
  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 https://codeclimate.com/downloads/test-reporter/test-reporter-latest-linux-amd64 > ./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. Заканчивается Круг 1.0 31 августа 2018 года.

Шаг 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 [email protected]: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 Coverage. Скопируйте Test Reporter ID, никому не передавая его.

В CircleCI перейдите к Project > Settings > Environment variable и добавьте CC_TEST_REPORTER_ID с скопированным Test Reporter ID.

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

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

$ heroku create REPLACE_APP_NAME_HERE — buildpack https://github.com/mars/create-react-app-buildpack.git
$ git push heroku master
$ heroku open

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

Затем нам нужно будет перейти к вновь созданному приложению в Heroku Dashboard, чтобы настроить автоматическое развертывание. На панели управления сделайте следующее:

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

Готово!

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

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

Заключение

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

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

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