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 в Nx

Зададим следующие опции:

• в качестве названия workspace выберем название — banx:

• среди предлагаемых опций, выберем опцию angular, которая при генерации создаст простое Angular приложение.

• зададим название нашему приложению — russian/cabinet:

• в качестве препроцессора SCSS Выберем:

Nx список доступных препроцессоров CSS

• выберем Eslint как линтер проекта

• откажемся от облака Nx:

В результате получим следующую конфигурацию:

В ходе выполнения, будут сгенерированы основные файлы монорепозитория и Angular приложения:

Резюме

В данной статье:

• Создали новый монорепозиторий Nx, который назвали banx;
• Добавили Angular в монорепозиторий
• Добавили базовую конфигурацию tslint

В следующей статье, мы поговорим о настройке eslint’а — Banx. Настройка базовых правил в eslint в Nx в Angular.

Исходники

Все исходники находятся на github, в репозитории:

Fafnur/banx

Для того, чтобы посмотреть состояние проекта на момент написания статьи, нужно выбрать соответствующий тег — 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