Skip to content

Home

Jump to bottom
Leonid Fenko edited this page Mar 25, 2019 · 23 revisions

NB: Необходимо установить хуки гита перед работой над проектами.

NB: Каждый package является отдельным проектом и должен открываться в отдельном окне IDE.

NB: "Подъем" общих зависимостей отсутствует. Каждый package следует рассматривать отдельно (указывать все зависимости проекта в его package.json).

Инструменты

  • Yarn v1.9.4;
  • Node v8.11.1 (with npm v5.6.0);
  • Последний WebStorm или Visual Studio Code;

Устройство репозитория

Корневой проект нужен для высокоуровневых операций:

  • версионирования;
  • установки хуков гита;
  • конфигурирования гита.

Бойлерплейт состоит из двух отдельных проектов (packages):

  • Frontend Server - сервер для отдачи статики, SSR, сессий и склеивания GraphQL-схем. Им занимаются бэкенд-разработчики.
  • Frontend - клиентская часть фронтенда, предоставляет Frontend Server статику и middleware для SSR. Им занимаются фронтенд-разработчики.

При сборке нужно сначала собрать Frontend, а затем Frontend Server. При этом Frontend скопируется в node_modules Frontend Server, т.е. деплоить нужно только его.

Почему Frontend Server - это отдельный проект

  • Он делается другими людьми и в другом контексте, нежели Frontend.
  • Никто не хочет оставлять его в Backend или Frontend.
  • Получилось вынести его, не ломая текущий деплой.

Почему монорепозиторий

  • Frontend и Frontend Server должны четко соответствовать друг другу.
  • Так проще управлять ветками.

Начало нового проекта

  • Форкнуть или скопировать бойлерплейт.
  • В корневом проекте изменить название WebStorm-проекта (и директории).
  • В корневом проекте изменить название проекта в README.md.
  • Во всех package изменить префикс переменных окружения (REACT_BOILERPLATE).
  • В корневом проекте и всех package изменить название проекта в package.json.
  • В Frontend изменить APP_NAME, APP_SHORT_NAME и APP_DESCRIPTION в конфиге вебпака.
  • В Frontend изменить fallback для REACT_BOILERPLATE_CANONICAL_ROBOTS_HOST или удалить его.
  • В Frontend сгенерировать файлы для favicon, заменить существующие файлы иконок и убедиться в правильности тегов в InitialHelmet. См. Favicon.
  • Во всех package заменить react-boilerplate в конфигах nginx и supervisor, а также в файле build.xml.
  • Настроить сборку через Jenkins. Готовый пример джоба для деплоя Frontend Server.
    • Нужно прилинковать конфиги nginx
    • Могут быть проблемы с исполняемостью environment.sh

Версионирование

Использовать yarn lerna version. Обычного yarn lerna version minor должно быть достаточно. Сначала нужно установить зависимости: yarn i.

Установка хуков гита

Нужно просто выполнить yarn i.

Конфигурирование гита

Использовать yarn git:configure. Сначала нужно установить зависимости: yarn i.

Сообщение коммита

Как писать сообщение коммита.

Номер задачи автоматически подставляется в сообщение (subject) коммита, поэтому работать надо в ветке задачи (AB-123).

Сообщение коммита валидируется с помощью хуков гита. Оно должно быть вида AB-123: Add feature (префикс задачи с пробелом ставится автоматически). Длина строк, отделение subject от body и отсутствие точки в subject также валидируются.

Скритпы Yarn

Управление пакетами

NB: Необходимо использовать yarn i вместо yarn или yarn install

  • yarn i: сокращение для yarn install --frozen-lockfile;
  • yarn a: сокращение для yarn add -E -D;
  • yarn r: сокращение для yarn remove.

Prettier

NB: Prettier форматирует код перед коммитом.

  • prettier:all: форматировать все, что возможно.

Линтеры

NB: Код проверяется перед коммитом.

  • lint:js: eslint;

Конфигурирование гита

  • yarn git:configure: установить глобальный конфиг в соответствии с соглашениями (интерактивно).

Хуки гита (только для дебага)

NB: скрипт pre-commit должен быть определен в каждом проекте (package) и должен использовать lint-staged. Все скрипты pre-commit будут запущены с помощью husky перед коммитом.

  • yarn prepare-commit-msg: добавить в сообщение коммита номер тикета, если необходимо;
  • yarn commit-msg: валидировать сообщение коммита;
  • yarn pre-commit: линтеры, ошибки типов, prettier, проверка соответствия yarn.lock и package.json, и т.п. (в рутовом и дочерних проектах);
  • yarn post-commit: хак для корректного взаимодействия IDE с гитом.

Назад | Наверх | Внутрь | Далее

Спасибо за чтение документации ✨

Clone this wiki locally