ENGINEERING 08 SEP 2026 · 5 MIN READ

Running Angular, React, Vue, Svelte, Qwik, and Solid in One Nx Monorepo

Ali Gamal Ali

Lead Front-End Developer · Luftborn

// QUICK REACTIONS

Enjoyed this article? Leave a signal without writing a comment.

Hey everyone

So I was looking at one of Angular GDEs Connie Leung, and she did something amazing, which involved coding in the main frameworks and seeing the difference between them. This really was inspiring to me to do the same and learn the difference between all frameworks.

I decided to take it a step further and add more framework, so I will be using it on the way

Angular
React
Vue
svelte
Qwik
Solid

Instead of making them in different projects, I decided to create 1 mono-repo that can run all of them with Harmony

NX

NX is one of the awesome tools you can choose to make this possible and work seamlessly

According to their website, Nx is a powerful, open-source, technology-agnostic build platform designed to efficiently manage codebases of any scale. From small single projects to large enterprise monorepos, Nx provides the platform to efficiently get from starting a feature in your editor to a green PR.

The journey of creating all of the applications together and working in harmony

Started by creating an NX- mono-repo so I can add all my applications inside of it

npx create-nx-workspace@latest

It will ask you a couple of questions before it initializes the workspace

These are the options I chose, which are

the name of the workspace
the stack is none (we will install that later)
I chose to use Prettier
and I skipped the CI provider (we will do it later)
and I chose yes for caching and we will see why later?!

To install The different stack applications we need to add the plugin for each stack let’s start with Angular (My favorite framework)

Now let’s go step by step

First we need to install Angular plugin by running

npx nx add @nx/angular

Now this plugin will allow us to use some pre-built schematics that can build applications , libraries, etc.

Let’s initialize the Angular application now by running this command

npx nx g @nx/angular:app apps/angular-project

Watch for the :app, it is the suffix responsible for choosing the right schematics to be built. This can be :lib, and there is more.

It will ask you some questions regarding Angular; choose whatever you see suitable for you

Now congratulations, you have an Angular application inside the apps folder called angular-project

let’s do the same steps for react Installing React plugin and then react application

npx nx add @nx/react

Now, let’s create a React app inside our apps folder.

npx nx g @nx/react:app apps/react-project

let’s repeat the same steps for Vue plugins and generate application

npx nx add @nx/vue

Now, let’s initialize the application in Vue in the apps folder.

npx nx g @nx/vue:app apps/vue-project

As for svelte it has community plugin support to do the same steps

Click on the Svelte word, and it will take you to the GitHub page of the plugin

Let’s now install the plugin

npm install @nxext/svelte --save-dev --legacy-peer-deps

Now, let’s initialize the Svelte application inside our apps folder

npx nx g @nxext/svelte:app apps/svelte-project

Also Qwik And Solid the same as svelte we will install the community plugins

Let’s do that and initialize projects for both of them

// this is for installing solid plugin
npm install @nxext/solid --save-dev --legacy-peer-deps

// to create an application for solid 
nx g @nxext/solid:app apps/solid-project

// this is for installing the qwik plugin
npm install qwik-nx --save-dev --legacy-peer-deps

// to create an application for Qwik 
nx generate qwik-nx:app apps/qwik-project

Run tasks

To run a specific project’s dev server, use one of the following commands:

Angular:

npx nx serve angular-project

React:

npx nx serve react-project

Vue:

npx nx serve vue-project

Qwik:

npx nx serve qwik-project

Solid:

npx nx serve solid-project

Svelte:

npx nx serve svelte-project

Congratulations, now you are running different stack apps in 1 repo. To expand further and truly leverage the benefits of this setup, consider implementing a shared UI library that can be used across the different frameworks, enhancing consistency and reducing development time.

Another exciting challenge could be setting up cross-framework testing to ensure each app integrates seamlessly within the monorepo.

Finally, integrating a Continuous Integration (CI) system will automate your builds and tests, ensuring that every change made to any of the frameworks maintains functionality and quality.