How to start with NX and Angular?

Introduction

Nx is designed to help you create and build enterprise-grade Angular applications. It provides an opinionated approach to application project structure and patterns.

NX provides you easy support for:

1. Storybook: You can create multiple libraries and can write stories for them. This will help other devs to understand how a component or a library works
2. Shell | App Concept: This concept links with the Microfrontend architecture, Where one of your apps can work as a shell and another can host. This shell application can be used in multiple host applications for example: If you have an auth module already ready, you can use that in another host application as well.
3. Monorepo: This provides you support to create multiple workspaces in the same application, which can increase the reusability and reduce the complexity of the project.
4. NGRX support: With just one command you can create the ready to use to boilerplate for ngrx
5. NOT ONLY THIS: It also gives you ready to use workspace for core-js, nest, react, typescript…

What are we going to learn here?

In this article, we will learn about

1. Host shell concept using NRWL
2. Data sharing using libraries

Let's….boom boom bam start….

First of all…run the below command.

npx create-nx-workspace mfe-app

and in prompt, you’ll see:

“What to create in the new workspace”: select apps and Enter;

“Use Nx Cloud?”: No

NX created a monorepo project structure, and since we’ll be using Angular, we’ll need to install all of the required Angular libraries, which can be done with just one command:

cd mfe-app/ 
npm install --save-dev @nrwl/angular

Now from here, you can choose 2 options:

1. NX with command line
2. NX with Plugin

We will be using the plugin support as it gives a lot more options and in the end, will create npx command for you. For this, go to the plugin section of VScode and search NX or Directly install from here https://marketplace.visualstudio.com/items?itemName=nrwl.angular-console

Now once it is installed, you’ll be able to see the NX word on your sidebar

• Click on that
• Click on generate, this option will give you a lot of other options
• type @nrwl/angular:application and fill the form as :

appName: [Any App Name]
mfe: true
mfeType: Host/Remote (We will be creating the host app first so choose Host)
port: 4200
e2eProjectName: [Any App Name]-e2e
routing: true
// misc
You can choose for test and style as well.

and click on run, you’ll see a command running similar to this

npx nx generate @nrwl/angular:application main-app --port=4200 --e2eTestRunner=protractor --mfe --mfeType=host --routing --unitTestRunner=karma --no-interactive <

Now follow the same setups and create a shell application that can be used in the host application except for the part instead of choosing the mfeType host choose remote and mention the host application name where you want this to be linked.

and done….

Now run

npx nx run [host app name/ your main app]:serve

This will run both the application automatically and this is how it works

Go to localhost:4200 and you’ll see the main app now add /auth-module

and you can see the shell app in the host.

Wohhhoooo !!!!!!

Now the next part is creating the shared libraries, shared Scss (theming), Shared assets

Creating Shared Library in NX/nrwl

1. Branding
2. Sharing Data

So my first requirement is branding, All of my applications will have the same branding, same fonts, and same assets and it doesn’t make sense to create or copy the same things again and again if we have the power of ̶S̶u̶p̶e̶r̶m̶a̶n̶ NX ;)

Right-click on the library folder and create a new folder with name themes

• Add a new global-style.scss (this file be theme CSS for our application)
• for testing, purpose add

body {
    background-color: red;
}

Now, the Important step is to add the stylePreprocessorOptions so that, our webpack can pick the global style from the library folder.

Add this line to project.json file

"stylePreprocessorOptions": {
  "includePaths": [
    "libs/theme" //main path of your scss folder
   ]
},

and now Import the gloabl-scsss in your main style.scss

@import 'global-style.scss';

and Yureka!! it's working… this way you can create the variables, mixins, and other branding scss and can reuse in the MFE or Monorepo.

Now let’s talk about assets, How can I use the same shared assets for all the projects using NX.

How can I use the same shared assets for all the projects using NX?

We will create a JS library in the library folder with name assets and that folder can be used a shared assets but how lets see

nx generate @nrwl/workspace:library

after running this, create a folder structure like this

Now we have an assets library let’s see how can we import it.

go to your project.json file and add

"assets": [
    {
       "glob": "**/*",
       "input": "libs/assets/src/lib/assets/",
       "output": "./assets/"
    }
],

This means whatever I have in my library assets folder, serve them.

Now let's use this asset

<img src="./assets/images/test.jpeg" style="height: 100px">

and boom, you can see the image :)

Now, the last but important part… We have an auth module and main app, How do we know from the auth module or share the data like tokens from auth module to the main app. Not a big thing

How to share data between shell or host app?

Create another library with a name shared and create a service at root level injection. This service can be used to notify about the token or any shared data that we want to share in between and done….

Initially, it seems very tough to start but thanks to NRWL team for creating this awesome tool. Hope you guys like my article and by the way, you can appreciate me by giving claps 😁😁😁😁

Github link — https://github.com/nikhil-kapoor-quo/nx-demo

Tadddaaaaa !!!