How to Setup an Angular UI Library to Scale using the CLI

Purpose

When creating a brand new library, the Angular CLI helps us tremendously in creating the proper web app structure to support a UI library for growth. In this how-to, we will follow the monorepo style of creating multiple projects inside a single workspace. The latest versions of the Angular CLI allow for us to do this style of development very easily.

What we want is to have two projects exist in our web workspace. The first project will be our actual UI library, which will hold all of our reusable components, layouts, and styles. The second project will be the library showcase. The showcase project is an app that renders and displays the components. I recommend Storybook.js to help organize and (literally) showcase your components. It also helps you with development of your components within a sandbox environment. We will leave the integration of Storybook for a separate tutorial.

Preparation

Node.js — Just download it from the main Node homepage. It will tell you which version is LTS.

NPM — It’s needed to download all the packages for Node.js.

NPX — This sweet little package comes along with NPM. Make sure you have NPM version greater than 5.2.0. What does it do? NPX executes node package binaries without having to pollute the global namespace. No more “npm install -g” anything. Win-win!

Angular 9.x — FTW!

How To

First, create your app workspace from within a terminal.

npx @angular/cli new library-workspace-name --create-application=false --strict=true

Navigate into your newly created project folder to generate the UI library and showcase applications for the workspace. I like to append the text “ui” to the end of the library project and “showcase” to the end of the application project.

cd library-workspace-name
npx ng generate library library-workspace-name-ui
npx ng generate application library-workspace-name-showcase --style=scss --routing=true

You should now have a project structure that separates your different projects and allows you to work and build them separately. Here’s what your folder hierarchy should look like.

library-workspace-name/
  ...             (workspace-wide config files)
  projects/       (generated applications and libraries)
    library-workspace-name-showcase/ --(an explicitly generated application)
      ...         --(application-specific config)
      e2e/        ----(corresponding e2e tests)
         src/     ----(e2e tests source)
         ...      ----(e2e-specific config)
      src/        --(source and support files for application)
    library-workspace-name-ui/       --(a generated library)
      ...         --(library-specific config)
      src/        --source and support files for library)

Want to watch a video on how to do this setup? Click here.

Conclusion

You should now have a monorepo style Angular workspace with one project used for the UI library and the other used to showcase the library. If you ever need to add another project, like an HTML Web Components project, then you will be able to simply add a new application using the Angular CLI to the same workspace.

I highly recommend the Angular documentation on how to use the monorepo style for a new library. This is helpful when you are not only building the reusable UI library, but also an application that will showcase it.