This is my personal fullstack practice repo using NX Monorepo. It's a sandbox environment where I experiment with various frontend and backend technologies, building raw implementations and testing ideas. This repo is managed using Nx, allowing me to organize all apps and libraries within a single monorepo.
This is not a production-ready project — it's a raw practice ground where I:
- Explore how different frameworks work
- Try out component libraries and state management
- Build shared utilities across apps
- Connect frontends to a NestJS backend
- Learn and make mistakes in a controlled space
Expect messy code and lots of WIP — this is where I break things to learn how to fix them. Feel free to clone, explore, and use as a reference if you're also diving into multi-framework development with Nx.
- Node
22.14.0 - Nx
v20.7.1To make the nx command available globally, install nx via
npm install -g nx.
- How to generate Apps Nx Plugin Registry
- How to generate Library
nx g @nx/angular:library libs/LIBRARY_NAME
- How to remove Library
nx g @nx/workspace:remove LIBRARY_NAME
Here are some common Nx commands you might find useful:
-
Generate a new application (example using React):
nx generate @nx/react:app my-react-app
-
Generate a new library (example using generic
@nx/jsplugin):nx generate @nx/js:library my-js-lib --unitTestRunner=jest
-
Remove a library:
nx generate @nx/workspace:remove LIBRARY_NAME
-
Upgrade Nx to the latest version:
nx migrate latest
Follow the instructions in the terminal after running this command.
-
Run migrations after upgrading Nx:
nx migrate --run-migrations
-
Add a package to a specific project's package.json (example adding
lodashtomy-js-lib):nx generate @nx/workspace:add-package-to-package-json --package=lodash --project=my-js-lib
-
Install packages for a specific project using pnpm:
pnpm install primeng @primeng/themes --filter=@loop-space/loop-angular
This command uses pnpm to install
primengand@primeng/themesonly within the context of the@loop-space/loop-angularproject. The--filterflag limits the installation to the specified project. -
Learn more about this workspace setup and its capabilities or run
npx nx graphto visually explore what was created. Now, let's get you up to speed!
To run the dev server for your app, use:
npx nx serve APP_NAMETo create a production bundle:
npx nx build APP_NAMETo see all available targets to run for a project, run:
npx nx show project APP_NAMEThese targets are either inferred automatically or defined in the project.json or package.json files.
More about running tasks in the docs »
While you could add new projects to your workspace manually, you might want to leverage Nx plugins and their code generation feature.
You can use npx nx list to get a list of installed plugins. Then, run npx nx list <plugin-name> to learn about more specific capabilities of a particular plugin. Alternatively, install Nx Console to browse plugins and generators in your IDE.
Learn more about Nx plugins » | Browse the plugin registry »
Learn more:
- Learn more about this workspace setup
- Learn about Nx on CI
- Releasing Packages with Nx release
- What are Nx plugins?
And join the Nx community: