Banx. Создание Nx workspace для Angular
В данной статье поговорим о создании workspace монорепозитория NX. Создадим workspace вместе с простым Angular приложением.
Если вы уже знакомы с разворачиванием Nx, то можете сразу перейти к следующей статье — Banx. Настройка базовых правил в eslint в Nx в Angular.
Введение
В новом цикле статей мы будем рассматривать и создавать новое enterprise приложение на Angular по всем канонам Angular и Nx.
В качестве проекта, мы будем реализовывать небольшое банковское приложение, которое будет представлено в нескольких странах.
Что будет включать в себя приложение:
- Nx — монорепозиторий для Angular
- Ngrx — реализация redux в Angular
- l18n — Angular localization
В проекте не будет* использоваться Universal, так как правильное использование Server Side Rendering’а очень затратно как для фронтенд части, так и для бекенда.
Иначе можно получить SSR Шрёдингера, где SSR вроде бы есть, но с другой стороны его нет. Например, этого эффекта легко достичь, если добавить prerender для ряда статичных страниц, а на всех динамических страницах, просто отдавать index.original.html в server.ts.
Ранее, я уже писал несколько статей, посвященных разворачиванию монорепозитория Nx:
- Angular Universal и NX или как подружить SSR с monorepo в Angular
- Angular 9, Universal и Nx. Новые правила сборки SSR приложения
Однако, данные статьи были направлены больше на демонстрацию работы Nx и сопутствующих библиотек (universal, l18n, apollo и др.). В данном цикле, мы разберем полноценное приложение, которое будет использовать Nx на полную мощь.
Создание workspace
Для создания workspace достаточно запустить команду:
yarn create nx-workspace --package-manager=yarn
Также можно использовать npx, запустив команду:
npx create-nx-workspace --package-manager=yarn
После скачивания скрипта, запуститься меню, в котором нужно указать имя организации, которое в дальнейшем станет префиксом в путях:
Зададим следующие опции:
- в качестве названия workspace выберем название —
banx
:
- среди предлагаемых опций, выберем опцию angular, которая при генерации создаст простое Angular приложение.
- зададим название нашему приложению —
russian/cabinet
:
- в качестве препроцессора SCSS Выберем:
- выберем Eslint как линтер проекта
- откажемся от облака Nx:
В результате получим следующую конфигурацию:
В ходе выполнения, будут сгенерированы основные файлы монорепозитория и Angular приложения:
Резюме
В данной статье:
- Создали новый монорепозиторий Nx, который назвали banx;
- Добавили Angular в монорепозиторий
- Добавили базовую конфигурацию tslint
В следующей статье, мы поговорим о настройке eslint’а — Banx. Настройка базовых правил в eslint в Nx в Angular.
Исходники
Все исходники находятся на github, в репозитории:
Для того, чтобы посмотреть состояние проекта на момент написания статьи, нужно выбрать соответствующий тег — create-monorepo.
git checkout create-monorepo
Ссылки
Подписывайтесь на блог, чтобы не пропустить новые статьи про Angular, веб-разработку и новости из мира фронтенда.
Medium: https://medium.com/fafnur
Добавляйтесь в группу ВК: https://vk.com/fafnur
Добавляйтесь в группу в Fb: https://www.facebook.com/groups/fafnur/
Телеграм канал: https://t.me/f_a_f_n_u_r
Twitter: https://twitter.com/Fafnur1
Instagram: https://www.instagram.com/fafnur
LinkedIn: https://www.linkedin.com/in/fafnur