Durable and modular Frontend applications

with Nx

 Luca Del Puppo 

Luca Del Puppo

  • Senior Software Developer
  • JavaScript enthusiast
  • TypeScript lover
  • “Youtuber”
  • “Writer”

Love sport: running, hiking

Love animals

What is Nx?_

Nx is a build system with built-in tooling and advanced CI capabilities.

It helps you maintain and scale monorepos, both locally and on CI.

  • build system
    optimized for monorepos
  • built-in tooling
    for code scaffolding, module boundary enforcement, automated updates
  • advanced CI capabilities
    with caching and distribution

Nx is a CLI with many commands

Run Task_

Cache task results_

Run task only affected code_


  • Automated update
  • Module Boundaries
  • Nx Release
  • Nx Replay
  • Nx Agent

Who can run with Nx?_

  • Angular
  • WebComponent
  • React
  • NextJs
  • Node
  • Fastify
  • Express
  • NestJs

And many others





  1. Standalone Apps
    A repository with a single application
  2. Package-Based Repos
    A repository with multiple projects that depend on each other via package.json and often have nested node_modules
  3. Integrated Repos
    A repository with multiple projects that depend on each other via typescript imports and often employ a single version policy

How to choose your style_

Standalone application

For when you want a single project that can be nicely structured and modularized. It's a good starting point if you're not looking into a monorepo but with the option to expand later

Package-based repos

Ideally when you already have a monorepo (e.g. yarn/npm/pnpm workspace) and you want Nx primarily for speed and task scheduling. Also, when you want Nx to stay mostly out of your way and you set up everything on your own

Integrated repos

When you want more help from Nx. It takes away the configuration burden by developing a pre-configured setup that scales well, and provides scaffolding support and automated code migrations. Organizations choose this approach if they are bought into monorepos and want to scale up. Integrated repos might restrict some choices to allow Nx to help you more but result in better maintainability and more value in the long run.

Nx itself doesn't care which style you choose

How Integrated repo


Applications are the glue(containers) of our libraries


  • Angular
  • VanillaJs
  • React
  • NextJS
  • Fastify
  • Playwright
  • Cypress

Real Applications

E2E Applications


Libraries are
the containers of specific business domains or utilities

Library types_




How to split your workspace_

  • 20% applications
  • 80% libraries




Nx Graph/Tasks_


  • Creates the deps graph in a Tab of the Browser
  • Shows the affected libraries
  • Helps to monitor the structure of the codebase

nx graph

Automated update_

Automate Updating Dependencies_

nx migrate

  • package versions in your package.json
  • configuration files (e.g. your Jest, ESLint or Nx config)
  • your source code (e.g. fixing breaking changes or migrating to new best practices)


  • Jest
  • Vitest
  • Storybook
  • Playwright
  • Cypress
  • EsLint
  • Prettier
  • Nx Console





  • Give you more control over the structure of your codebase
  • Help to split into libraries/modules your codebase
  • Mono-repo is not mandatory
  • Run task only if effected
  • Extensible
  • Configurable


  • You have to study and understand how it works
  • You have to configure your own rules (optional)


About this presentation_

About demo_

Luca Del Puppo


Luca Del Puppo



We are hiring

Thank you!_

Durable and modular Frontend application with Nx

By Luca Del Puppo

Durable and modular Frontend application with Nx

  • 184