{"id":3663,"date":"2021-04-30T17:48:13","date_gmt":"2021-04-30T17:48:13","guid":{"rendered":"https:\/\/ionicframework.com\/blog\/?p=3663"},"modified":"2021-04-30T17:48:23","modified_gmt":"2021-04-30T17:48:23","slug":"ionic-angular-monorepos-with-nx","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/ionic-angular-monorepos-with-nx","title":{"rendered":"Ionic Angular monorepos with NX"},"content":{"rendered":"

\n This is part two of a new series on monorepos<\/a>. By the end of the series, you’ll have the tools you need to adopt monorepo setups in your organization.\n<\/p><\/blockquote>\n

Between sharing code, managing dependencies across projects, and more, monorepos can require a lot of investment to get right. Thankfully, there are many different tools out there that can streamline the process and get developers on the right path. There’s Lerna, Yarn workspaces, npm workspaces (with npm v7), and the one we\u2019ll look at today, Nx.<\/p>\n

Let\u2019s look at setting up an Nx workspace and looking at a few packages that can help Ionic Angular developers manage complex app setups and ship their apps faster.<\/p>\n

<\/p>\n

What is Nx?<\/h2>\n

Nx is described as “extensible dev tools for monorepos”<\/a> and is created by Nrwl<\/a>, a company founded by former Angular team members. The tooling has first-class support for Angular, React, Next.js, and more all within a single workspace. This includes generating both applications and libraries for all of these frameworks. The magic comes from the Nx CLI<\/a>. The experience is very similar to the Angular CLI, but with support for far more technologies than just Angular.<\/p>\n

Most monorepo tools are designed to retrofit existing applications, but Nx has a different approach to offer the best monorepo experience possible. While it’s possible to port an existing application or monorepo to an Nx workspace, it’s best to let the Nx CLI generate the base workspace and application due to how the tooling architects multiple projects in the same repo.<\/p>\n

Single Source of Truth<\/h3>\n

Nx strongly enforces the “single package philosophy”. This is when all projects in a monorepo workspace share the same version of all dependencies. When dependencies are mismatched across projects, you can run into errors and inconsistencies. Tools like Lerna and Yarn workspaces help with this, but it can still be confusing to developers because each project typically has its own package.json<\/code>. Nx encourages users to add all dependencies to the workspace root package.json<\/code> to easily keep track of dependency versions and upgrades. While this may seem like a departure from what you are used to, the Nx plugin architecture makes this easier to manage.<\/p>\n

Extensible architecture<\/h2>\n

While frameworks help provide a structure for building applications, Nx realized that there is no \u201cone size fits all\u201d solution, especially with monorepos. To address this, Nx has its own plugin architecture to automate the configuration and tailor your experience to the tools you use. Nx plugins allow you to focus on getting to the code, not dealing with configuration. The default plugins help you generate Angular and React applications\/libraries in a single workspace, but there are also plugins for Storybook, Cypress, ESLint, and more.<\/p>\n

Common Use Cases<\/h2>\n

Okay, so Nx sounds great, but you might be asking, \u201cHow does this benefit me and my Ionic apps?\u201d Some common situations where Nx can help are:<\/p>\n

If your organization develops multiple Ionic applications, then you may be implementing very similar components across these apps. Whether it’s the authentication interface or a similar layout for settings pages, you can benefit from sharing these components across applications. Nx makes it easy to develop shared libraries for React and Angular, and enables you to avoid copying and pasting code. This also unifies your user experiences.<\/p>\n

If your applications do not share many UI components, they still benefit from sharing types, interfaces, and other functions. Sharing code can not only improve the developer experience, it can also improve the reliability of applications and avoid bugs.<\/p>\n

Nx also supports extending configs for TypeScript, ESLint, Webpack, and more. By creating base configuration files that all applications and libraries extend from, you can enforce agreed-upon best practices across your entire organization. This combined with the advanced CLI tooling and plugins makes building applications at scale more maintainable and consistent.<\/p>\n

Nxtend Plugins<\/h2>\n

Building upon the plugin architecture that Nx provides, Nxtend<\/a> is a series of plugins that mostly focus on enabling Ionic<\/a> and Capacitor<\/a> development in an Nx workspace. These plugins include @nxtend\/ionic-react<\/code>, @nxtend\/ionic-angular<\/code>, @nxtend\/capacitor<\/code>, and more. The main functionality that these plugins provide is the generation of Ionic applications in an Nx workspace that fits the standards of other Nx applications.<\/p>\n

While the official documentation<\/a> is the best place to learn how to use the Nxtend plugins, you can begin developing with them with Nx right away. First, you need to start with an Nx workspace. To generate a new workspace from your terminal or command line, execute:<\/p>\n

npx create-nx-workspace my-org --preset=empty\n<\/code><\/pre>\n
The Nx CLI allows you to generate a new workspace with a React or Angular app pre-configured, but since we are going to add the Nxtend plugins manually, we want to generate our workspace with the --preset=empty<\/code> option.<\/p>\n
Generating Applications<\/h3>\n
For this example, we will generate an Ionic Angular application that uses Capacitor. (Generating an Ionic Angular application is very similar, and more information on that can be found on the official documentation<\/a>.)<\/p>\n
First, install the Nxtend Ionic Angular dependency to your workspace:<\/p>\n
npm install --save-dev @nxtend\/ionic-angular\n<\/code><\/pre>\n
From here, initialize the plugin:<\/p>\n
nx generate @nxtend\/ionic-angular:init\n<\/code><\/pre>\n
Finally, generate a new application:<\/p>\n
nx generate @nxtend\/ionic-angular:app my-app\n<\/code><\/pre>\n
The CLI will prompt you for the Ionic starter template you would like to use, and once the command is complete, you can begin serving your Ionic app:<\/p>\n
nx serve my-app\n<\/code><\/pre>\n
Using Capacitor<\/h3>\n
Nxtend Ionic applications are generated with Capacitor support by default. However, before we can use Capacitor, we must build our application:<\/p>\n
nx build my-app\n<\/code><\/pre>\n
Next, we can add a Capacitor platform like iOS:<\/p>\n
nx run my-app:add:ios\n<\/code><\/pre>\n
And finally, we can open that app in Xcode:<\/p>\n
nx run my-app:open:ios\n<\/code><\/pre>\n
Capacitor can also be added to any existing web application in an Nx workspace. Learn more about this on the official documentation<\/a>.<\/p>\n
Shared Libraries<\/h3>\n
The Nxtend Ionic Angular plugins are compatible with Nx Angular libraries, meaning that once a library is generated, you can begin creating components in that library and export them from the index.ts<\/code>  to use them in your applications.<\/p>\n
To generate a new Angular library, execute:<\/p>\n
nx generate @nrwl\/angular:library my-lib\n<\/code><\/pre>\n
Next, we can generate a component in the new library:<\/p>\n
nx generate @nrwl\/angular:component MyComponent --project my-lib\n<\/code><\/pre>\n
Before we can use Ionic components in the new library, we must import the IonicModule<\/code> and export the new component in libs\/my-lib\/src\/lib\/my-lib.module.ts<\/code>:<\/p>\n
import { NgModule } from '@angular\/core';\nimport { CommonModule } from '@angular\/common';\nimport { MyComponentComponent } from '.\/my-component\/my-component.component';\nimport { IonicModule } from '@ionic\/angular';\n\n@NgModule({\n  imports: [CommonModule, IonicModule],\n  declarations: [MyComponentComponent],\n  exports: [MyComponentComponent],\n})\nexport class MyLibModule {}\n<\/code><\/pre>\n
Now, we can update the component we generated with Ionic:<\/p>\n
<ion-header [translucent]="true">\n  <ion-toolbar>\n    <ion-title> Blank <\/ion-title>\n  <\/ion-toolbar>\n<\/ion-header>\n\n<ion-content [fullscreen]="true">\n  <ion-header collapse="condense">\n    <ion-toolbar>\n      <ion-title size="large">Blank<\/ion-title>\n    <\/ion-toolbar>\n  <\/ion-header>\n\n  <div id="container">\n    <h1>Welcome to my-app!<\/h1>\n    <strong>Ready to create an app?<\/strong>\n    <p>\n      Start with Ionic\n      <a\n        target="_blank"\n        rel="noopener noreferrer"\n        href="https:\/\/ionicframework.com\/docs\/components"\n        >UI Components<\/a\n      >\n    <\/p>\n  <\/div>\n<\/ion-content>\n<\/code><\/pre>\n
And finally, import the module in your app:<\/p>\n
import { MyLibModule } from '@my-org\/my-lib';\n<\/code><\/pre>\n
And that’s it! Using this strategy, you can share components, interfaces, utils, and more.<\/p>\n
Wrapping Up<\/h2>\n
Nx is an excellent tool for workspaces, and the plugin architecture opens the door for applications and libraries to feel at home in a monorepo. Developing Ionic apps in an Nx workspace can offer many benefits, and the Nxtend suite of plugins is designed to make that a smooth process. Between generating apps, libs, managing dependencies, as well as the ability to share code across projects, Nx benefits projects both large and small.<\/p>\n