Preface
Starting a new project can be a lot of work. You need to create a repo, install dependencies, configure build tools, and last but not least begin work on the base of your application and/or library. This can take hours or even days to set up properly. Additionally, many products require this process to be done many times to set up the mobile app, web app, backend, component library, etc.
So how can we reduce the amount of effort required to get started on a project? The solution is project scaffolding.
Project Scaffolding
What is project scaffolding?
Project Scaffolding allows us to create fully functional projects from nothing in a matter of minutes or even seconds. It provides ready-to-use configuration for our tools, example and starting code, useful scripts, and much more.
This leads us to the main topic of discussion, Angular Seed.
Angular Seed
Angular Seed was a collection of project scaffolding repositories for both Angular and AngularJS projects. They include everything you need to write, test, and deploy an Angular application. Since the release of the Angular CLI (circa Angular 4), there has been little to no reason to use Angular Seed.
Angular CLI
Angular CLI is the official code scaffolding tool for Angular. It is available for all Angular 4+ projects and is the recommended way to get started for most projects.
The Angular CLI is simple and easy to get started with. Run the following command to create a new project in the folder
npx ng new <your_project_name>
After following the setup steps, you will have a project created by the Angular CLI. Browsing to the new folder will show:
- A hello world app in Angular.
- Basic unit test examples.
- Simple end-to-end test.
- Complete build toolchain using Angular DevKit.
- Static analysis tools. i.e. TSLint
This is far from the only feature of Angular CLI. Unlike Angular Seed, the Angular CLI’s most powerful feature is schematics. Schematics enable Angular CLI to not only generate projects but also generate the building blocks of your project. This includes components, directives, and modules. Additionally, the ng add command can install new dependencies, performing all of the required setup along the way.
Angular CLI: Common Use Cases
The most common use case is for general application development. The CLI has more than enough tools for most project. It’s also great for learning Angular as the majority of tutorials will assume you are using the CLI.
If you making a library for Angular, such as a component framework, the CLI allows for side by side development of the library and a demo / sandbox application for testing.
Nx
Nx expands on the power of the Angular CLI bringing excellent support for multi-app projects. It includes support for Angular, React, NestJS, Java, and Go. Community plugins add support for even more languages and tools covering all aspects of a project.
To get started, run the following command to create a new workspace in the folder your_workspace_name.
npx create-nx-workspace <your_workspace_name>
This will prompt you on how you want your workspace configured, including additional features provided by Nx. In the new folder, you will find:
- Base configuration files used by all projects in the workspace
- A folder for custom NX tools.
- Depending on what configuration you choose, an apps and libs folder containing example applications in your given frameworks, or a packages folder great for managing libraries.
This brings us to the biggest draw of Nx, its best-in-class support for monorepos.
What is a monorepo? A monorepo is simply multiple code repositories stored in one VCS repository. This allows developers to easily share and maintain resources belonging to a product.
Nx’s Approach to Monorepos
The hardest part of working in a monorepo is managing the relationships between your different projects. Now that there are multiple projects sharing a single repo, you need to orchestrate when each should build, test, deploy, etc.
Nx provides the tools to do this easily. All tasks are run based on the output of Nx’s affected command, which lists all projects that are impacted by the current changes. Additionally, the output of these tasks is cached so that the tasks are only rerun if changes have been made.
Other features offered by Nx include:
- All projects within an Nx workspace are usable out of the box without the need to build, or publish. This allows you to leverage the benefits of splitting your code into different packages without the additional overhead of installing them locally or pushing them to an NPM repository. You can later make any project publishable if you need to use it outside the workspace.
- Tags allow you to enforce boundaries between your different projects. For example, you can disallow a back-end library from being imported by a front-end application.
- Improvements on Angular CLI schematics by introducing workspace generators. Workspace generators are identical to schematics in functionality but don’t require the use of an NPM package. This makes creating generators for your project’s common tasks simple.
Nx: Common Use Cases
Nx is great for managing entire products. Mobile and web apps, back-ends, and documentation can all live in the same place, making it easy for everyone to see changes and contribute.
If you have the need to use multiple different technologies, Nx has tooling for all of the major front-end frameworks. This allows each project to use the same patterns for project management, simplifying the need to context switch between different scaffolding tools.
Angular CLI vs Nx: Which should I use?
The most common approach to using Angular is to use the Angular CLI. It’s the best choice if you are learning Angular and want to get your feet wet. It also works great for authoring applications on top of existing libraries and backends.
For example, migrating an Angular JS app to Angular or rewriting an existing app in Angular. If you want to use it, check out Getting Started With the Angular CLI. It also features a simple monorepo / multi-project solution. Multiple angular apps and libraries can be managed using the Angular CLI out of the box. That being said, I recommend Nx for any product with multiple projects.
If monorepos sound like your thing, use Nx. Nx works best with greenfield, no existing code projects, although it can be used in brownfield projects, albeit with a little bit more effort. More information can be found at Getting Started With Nx.
As of January 2022, AngularJS is officially EOL. If you are starting a new project, use the latest version of Angular. If you must use AngularJS, the Angular Team has provided some resources on what to do moving forward.
Resources
– Angular