How to setup monorepo with Angular And React running together

As a frontend engineer you must have wondered at least once in your life how big companies can run multiple architectures in a single code repo and how to develop all together, making the teams collaborate from a single codebase. For example some teams can develop applications with React, some with Angular and others with Vue.

Hundreds of developers are trying to merge something into code, thousands of lines of code and files are changing... It should be a hell of a mess. But how can they manage all these things?

Well here is the answer:

First things first

What is in my mind is to first create Angular and React applications together. First I tried to create a folder and in that folder, I created two folders called angular and react (I'm also confused when I write this). Next I tried to start the applications in their folder. But it creates a mess. And it’s so hard to handle.

For instance every application has a package.json file and node_modules folders. And you know the meme right?

So if I want to have a single package.json and node_modules folder and single configuration file etc I have to find a solution. And here comes to concept of monorepo:

What is monorepo

In a normal multi repo structure, many projects are held in entirely separated, version-controlled repositories. But monorepo is a single version-controlled repository which contains many applications, living together side by side and helping each other to become better applications (Ok, I know this is a little exaggerated).

Choosing monorepo tool

So now we learned about the existence of monorepo. That's cool but how can we create a monorepo? Is there a tool for it? Or do I need to make it manually? If you do search for monorepo tools like I did, you'll probably look like this:

Because there are many good monorepo tools such as:

• Bazel
• Gradle
• Lage
• Lerna
• moon
• Nx
• Pants
• Rush
• TurboRepo

Well I did my research and decided to choose Nx, because:

• Full support of Javascript and Typescript.
• Fast
• Code Sharing
• Code standards
• Deployments
• Versioning

and many more features. Check out their website for the details.

So let's dive in, shall we?

Creating workspace

Now we will do some magic with Nx CLI. First we have to create a workspace. We'll create a workspace with Angular. You can also start with React or Vue, it's your choice. I'm familiar with Angular so I'll start with that.

You don't need to install the entire Nx CLI. With the npx feature you can directly run the Nx CLI command with npx create-nx-workspace@latest.

It will ask some questions to set up your workspace. The most important thing is selecting integrated monorepo. Because we will add a React application and a UI library later. Then let the magic happen.

For the other settings, you can select whatever you prefer. For example you can skip installing e2e tests or you can select esbuild over webpack.

Now we have created our monorepo with an Angular app 🎉. Wanna see your angular app? Just run the nx serve angular command.

Before we continue

I have to tell this because it saves a lot of time. Since we are continuing with Nx there is a great extension for your favorite IDE or editor. You can download Nx extensions for VSCode or JetBrains IDE's (like Webstorm and IntelliJ) from the NX website.

Adding React Application

Now we have an Angular app. But let's do something fun... Adding a React application into our monorepo. Why? Because we can. And it shows that in real life use, it is possible for different teams within the same company to choose their preferred frontend framework.

To add a React application we need to install the nx/react package. In order to do that just install a normal npm package with npm add -D @nx/react. Note: we are installing for dev only because we don't need it in the runtime. Just for generating a React application. Then create a React application with the command nx g @nx/react:app my-new-app.

After Nx finishes the setup, we now have a React and an Angular app 🥳.

You can run the React application with nx serve react.

Run Angular and React app together

We had a great start. We have an Angular app and a React app in a single monorepo. What if we want to run them together? They are using the same port and also we want to run them with a single command. As I stated before, Nx has great features. You can run all your applications with nx run-many --target=serve --all. Or if you want to select which applications to run just add them as projects nx run-many --parallel --target=serve --projects=angular,react. But wait. We forgot to change the port. I have changed the React application port by opening the project.json file in the apps/react/ folder. And under the serve/options just add "port":4201 (of course you can select your preferred port).

"options": {
   "buildTarget": "react:build",
   "hmr": true,
   "port": 4201
},

Now when I run the serve command again we will have both applications up and running.

In my next article we will add a UI library into our monorepo and use it in our applications. So stay tuned!