Настройка среды разработки 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.
Спасибо за прочтение! Если вам это нравится, нажмите 👏👏👏
Мне нравится читать и писать о технологиях и продуктах, особенно связанных с повышением производительности разработчиков. Вы можете поздороваться со мной в моем Твиттере или в моем блоге.