Building Angular and React Applications Together With Nx
Large companies often use multiple frontend frameworks to build their products. One product can be built with Angular, another one with React. These products, even though are built by different teams using different stacks, often share components and utilities.
Setting this up traditionally is challenging. Companies put a lot of effort in making sure teams can collaborate and use each other's work. Nx drastically simplifies this.
To show how Nx does it, let's build two applications (one in Angular, and one in React) that will use a library of shared web components.
Creating a New Nx Workspace
Let's start by creating a new Nx workspace. The easiest way to do this is to use npx.
npx --ignore-existing create-nx-workspace happynrwl --preset=empty
Add Angular Capabilities
An empty workspace does not have any capabilities to create applications. Add capabilities for Angular development via:
npm i -D @nrwl/angular
Creating an Angular Application
An empty workspace has no application or libraries: nothing to run and nothing to test. Let's add an Angular application into it via:
nx g @nrwl/angular:app angularapp
The result should look like this:
happynrwl/
├── apps/
│ ├── angularapp/
│ │ ├── src/
│ │ │ ├── app/
│ │ │ │ ├── app.components.css
│ │ │ │ ├── app.components.html
│ │ │ │ ├── app.components.spec.ts
│ │ │ │ ├── app.components.ts
│ │ │ │ └── app.module.ts
│ │ │ ├── assets/
│ │ │ ├── environments/
│ │ │ ├── favicon.ico
│ │ │ ├── index.html
│ │ │ ├── main.ts
│ │ │ ├── polyfills.ts
│ │ │ ├── styles.scss
│ │ │ └── test.ts
│ │ ├── jest.conf.js
│ │ ├── tsconfig.app.json
│ │ ├── browserslist
│ │ ├── tsconfig.json
│ │ ├── tsconfig.spec.json
│ │ └── tslint.json
│ └── angularapp-e2e/
├── libs/
├── README.md
├── angular.json
├── nx.json
├── package.json
├── tools/
├── tsconfig.base.json
└── tslint.json
The generated main.ts
, will look as follows:
1import { enableProdMode } from '@angular/core';
2
3import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
4import { AppModule } from './app/app.module';
5
6import { environment } from './environments/environment';
7
8if (environment.production) {
9 enableProdMode();
10}
11
12platformBrowserDynamic()
13 .bootstrapModule(AppModule)
14 .catch((err) => console.error(err));
And the template of the generated component will look as follows:
1<div style="text-align:center">
2 Welcome to {{title}}!
3 <img
4 width="300"
5 src="https://raw.githubusercontent.com/nrwl/nx/master/images/nx-logo.png"
6 alt="Nx - Smart, Fast and Extensible Build System"
7 />
8</div>
9
10<p>This is an Angular app built with <a href="https://nx.dev">Nx</a>.</p>
Adding React Capabilities
Generating a React application is just as easy. First, add capabilities for React development via:
npm i -D @nrwl/react
Creating a React Application
Create a React application via:
nx g @nrwl/react:app reactapp
and this is what we will see:
happynrwl/
├── apps/
│ ├── angularapp/
│ ├── angularapp-e2e/
│ ├── reactapp/
│ │ ├── src/
│ │ │ ├── app/
│ │ │ │ ├── app.css
│ │ │ │ ├── app.spec.tsx
│ │ │ │ └── app.tsx
│ │ │ ├── assets/
│ │ │ ├── environments/
│ │ │ ├── favicon.ico
│ │ │ ├── index.html
│ │ │ ├── main.ts
│ │ │ ├── polyfills.ts
│ │ │ ├── styles.scss
│ │ │ └── test.ts
│ │ ├── browserslist
│ │ ├── jest.conf.js
│ │ ├── tsconfig.app.json
│ │ ├── tsconfig.json
│ │ ├── tsconfig.spec.json
│ │ └── tslint.json
│ └── reactapp-e2e/
├── libs/
├── README.md
├── angular.json
├── nx.json
├── package.json
├── tools/
├── tsconfig.base.json
└── tslint.json
Where main.ts
looks like this:
1import * as React from 'react';
2import * as ReactDOM from 'react-dom';
3
4import { App } from './app/app';
5
6ReactDOM.render(<App />, document.querySelector('happynrwl-root'));
and app.tsx
contains the following component:
1import * as React from 'react';
2import { Component } from 'react';
3
4import './app.css';
5
6export class App extends Component {
7 render() {
8 const title = 'reactapp';
9 return (
10 <div>
11 <div style={{ textAlign: 'center' }}>
12 <h1>Welcome to {title}!</h1>
13 <img
14 width="300"
15 src="https://raw.githubusercontent.com/nrwl/nx/master/images/nx-logo.png"
16 />
17 </div>
18 <p>
19 This is a React app built with <a href="https://nx.dev">Nx</a>.
20 </p>
21 </div>
22 );
23 }
24}
Nx provides a uniform tool for development the commands used for React development are the same as the commands used to develop Angular applications.
nx serve reactapp
serves the React appnx build reactapp
builds the React appnx test reactapp
tests the React app using Jestnx e2e reactapp-e2e
tests the React app using Cypress
TypeScript support, Jest, Cypress, source maps, watch mode--all work with React out of the box. If we run ng serve reactapp, we will see the following:
Creating Shared Components
Nx makes sharing code between applications easy. What used to take days or even weeks, with Nx takes minutes. Say we want to create a ui library of shared components that we will use in both the React and Angular applications.
nx g @nrwl/workspace:lib ui
and this is what we will see:
happynrwl/
├── apps/
│ ├── angularapp/
│ ├── angularapp-e2e/
│ ├── reactapp/
│ └── reactapp-e2e/
├── libs/
│ └── ui
│ ├── src/
│ │ ├── lib/
│ │ └── index.ts
│ ├── jest.conf.js
│ ├── tsconfig.lib.json
│ ├── tsconfig.json
│ ├── tsconfig.spec.json
│ └── tslint.json
├── README.md
├── angular.json
├── nx.json
├── package.json
├── tools/
├── tsconfig.base.json
└── tslint.json
Let's create a greeting.element.ts
in the lib folder:
1export class GreetingElement extends HTMLElement {
2 public static observedAttributes = ['title'];
3
4 attributeChangedCallback() {
5 this.innerHTML = `<h1>Welcome to ${this.title}!</h1>`;
6 }
7}
8
9customElements.define('happynrwl-greeting', GreetingElement);
and reexport it in the index.ts
file:
1export * from './lib/greeting.element';
The updated library should look like this
happynrwl/
├── apps/
└── libs/
└── ui
├── src/
│ ├── lib/
│ │ └── greeting.element.ts
│ └── index.ts
├── jest.conf.js
├── tsconfig.lib.json
├── tsconfig.json
├── tsconfig.spec.json
└── tslint.json
Using the Greeting Element in our Angular App
Importing the Library
Next, let's include the new library.
1import '@happynrwl/ui'; // <-- the new library
2
3import { enableProdMode } from '@angular/core';
4
5import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
6import { AppModule } from './app/app.module';
7
8import { environment } from './environments/environment';
9
10if (environment.production) {
11 enableProdMode();
12}
13
14platformBrowserDynamic()
15 .bootstrapModule(AppModule)
16 .catch((err) => console.error(err));
Registering CUSTOM_ELEMENTS_SCHEMA
Next, let's register the CUSTOM_ELEMENTS_SCHEMA
schema, which will tell the Angular compiler not to error when seeing non-standard element tags in components' templates.
1@NgModule({
2 declarations: [AppComponent],
3 imports: [BrowserModule],
4 providers: [],
5 schemas: [CUSTOM_ELEMENTS_SCHEMA],
6 bootstrap: [AppComponent],
7})
8export class AppModule {}
Using the Greeting Element
Finally, we can update app.component.html
to use our shared web component.
1<div style="text-align:center">
2 <happynrwl-greeting [title]="title"></happynrwl-greeting>
3 <img
4 width="300"
5 src="https://raw.githubusercontent.com/nrwl/nx/master/images/nx-logo.png"
6 alt="Nx - Smart, Fast and Extensible Build System"
7 />
8</div>
9
10<p>This is an Angular app built with <a href="https://nx.dev">Nx</a>.</p>
Using the Greeting Element in our React App
Using Greeting in the react app requires similar steps.
Importing Library
Next, let's include the new library in main.ts
.
1import '@happynrwl/ui';
2
3import * as React from 'react';
4import * as ReactDOM from 'react-dom';
5
6import { App } from './app/app';
7
8ReactDOM.render(<App />, document.querySelector('happynrwl-root'));
Adding Intrinsic Types
Instead of registering CUSTOM_ELEMENTS_SCHEMA
, let's add intrinsic.d.ts file
, which serves a similar purpose to CUSTOM_ELEMENTS_SCHEMA
, next to main.tsx
.
1declare namespace JSX {
2 interface IntrinsicElements {
3 [elemName: string]: any;
4 }
5}
Using the Greeting Element
Finally, we can update app.tsx
to use our shared web component.
1import * as React from 'react';
2import { Component } from 'react';
3
4import './app.css';
5
6export class App extends Component {
7 render() {
8 const title = 'reactapp';
9 return (
10 <div>
11 <div style={{ textAlign: 'center' }}>
12 <happynrwl-greeting title={title} />
13 <img
14 width="300"
15 src="https://raw.githubusercontent.com/nrwl/nx/master/images/nx-logo.png"
16 />
17 </div>
18 <p>
19 This is a React app built with <a href="https://nx.dev">Nx</a>.
20 </p>
21 </div>
22 );
23 }
24}
Nx Intelligence
What we have shown is already quite remarkable. We built two applications in two different framework using a shared library of web components. We can use same commands to serve, build, test the applications.
But Nx can do a lot more than that.
If we run yarn dep-graph
, we will see the following:
Nx understands how our applications and libraries depend on each other. This is extremely important! To really improve the collaboration between teams and make sure that they can use each other's work, the following two things must be true:
- If the Angular team makes a change to the Angular app itself. Only the Angular app has to be rebuilt and retested. Same is true for the React team. Any tool that requires us to rebuild and retest everything on every PR won't scale beyond a small repository.
- If any of the teams changes the ui library, both the Angular and the React applications should be rebuilt and retested before the PR gets merged into main. This is the only way to guarantee that the PR is safe to merge.
To see how Nx helps with this, let's commit the changes we have made so far.
git add .
git commit -am 'great commit'
Next, let's create a new branch git checkout -b angularchange
. In this branch, let's introduce any change to app.component.html and run yarn nx affected:dep-graph
.
As you can see, Nx knows that this change only affects the angularapp
and nothing else. Nx can use this information to rebuild and retest only the angularapp:
yarn nx affected --target test # only tests angularapp
yarn nx affected --target build # only builds angularapp
Now, let's introduce a change to greeting.element.ts
and run yarn nx affected:dep-graph
.
Both angularapp
and reactapp
are affected by this change because they both depend on the greeting component.
yarn nx affected --target test # tests ui, angularapp, reactapp
yarn nx affected --target build # only builds angularapp, reactapp
This is what we just saw:
- If we only touch our code, we only have to retest and rebuild our code.
- If we touch something that affects other teams, we'll have to rebuild and retest their applications as well.
Because this is a simple example, the impact is easily deductible. But a real workspace can have a dozen applications and hundred of libraries. Ad-hoc solutions do not work at such scale--we need tools like Nx, that can help us manage those workspaces.
Summary
With Nx, we can build multiple applications using different frontend frameworks in the same workspace. These applications can share components, services, utilities. In this example we looked at a library of web components that we used in Angular and React applications. But we could go further: we could build the shared component using Angular Elements and then use it in the React application. Nx also allows us to build the backend next to our frontend and share code between them.
Nx analyses the code base to figure out how libraries and applications depend on each other. This analysis happens across frameworks and across client-server boundaries.
Example App
You can find the example application here.