Angular vs. React: The CLI

Angular and React both have a “semi-official” CLI: Angular CLI and create-react-app. Both are invaluable tools to setup a production-ready project based on the corresponding framework.

This post is part of a series. Check out the other posts in Observations about Angular vs. React.

Modern frontend programming has become immensely complicated and setting up a project with compilation, linting, testing and production optimisation in the current JavaScript ecosystem is a challenging task that requires a lot of experience and a lot of time. The CLI of Angular or React help to get productive quickly: With some simple commands you get a setup with a great developer experience and ready for production.

Angular CLI and create-react-app are both not an official part of the framework. They are not developed by the core team of the framework and they are not released together with the framework. They are both independent open-source projects that are closely affiliated with the corresponding framework.

Goal & Similarities

In my experience both the Angular CLI and create-react-app achieve their primary goal: It’s really easy to set up a production-ready project for the corresponding framework.

I can’t think of a reason not to use Angular CLI or create-react-app for starting a new project.

Both CLIs abstract the underlying build tools and configurations to a certain extend and are therefore more than a typical scaffolding tool. The goal of both projects is to enable an easy upgrade mechanism for the build infrastructure. Ideally you just have to update one npm dependency to upgrade the build infrastructure.

Ejecting

Both CLIs implement a very important feature: The ability to “eject” the project from the harness of the CLI. Once a project is ejected all the underlying setup and configuration that was hidden by the CLI is now exposed and available for customization. Once a project is ejected the simple upgrade path of the CLI is lost and all the build dependencies and configuration have to be managed explicitly. This also implies that the build tools and configurations have to be understood.

The “eject” feature is an essential mechanism to minimise the risk for choosing the CLI to start a project: If later in the project the abstraction of the CLI turns out to be a blocker, you can always eject and take ownership of the build infrastructure.

Differences

There are differences between the Angular CLI and create-react-app.

create-react-app strives to be as simple as possible while still being production-ready. It succeeds in providing a good abstraction of the build infrastructure but the resulting project is rather minimalistic and opinionated and the setup does not allow much flexibility.

The Angular CLI is in some points less opinionated and as a result the project setup is more flexible. On the other hand the abstraction of the Angular CLI is much less complete than with create-react-app.

The Angular CLI has also a broader scope than create-react-app: it does not only scaffold your initial project but also intends to be a code generator for generating new assets later during development. However this is a feature I only use for demos while teaching, in real projects I mostly use IDE plugins for this.

The Angular CLI (with Schematics ) is also the base for more complex scaffolding tools like Nx, adding server-side rendering and even custom code generation.

Abstraction

Both Angular CLI and create-react-app are abstractions on top of a complicated modern JavaScript project setup. It’s a common mistake (example) to think that they make working with the framework easy, I think that is a wrong line of thought. These tools just hide the complexity, there is a big chance that the complexity will leak through the abstraction at some point.

Typing “create-react-app” is easy but it’s intensely complex!
(Joel on egghead.io)

The above quote is even more true for the Angular CLI, since the build tooling of the Angular CLI is more complex than that of React (i.e. ngtools, build-optimizer, different typescript configs …)

create-react-app abstracts more of the build setup than the Angular CLI. If you compare the package.json of a create-react-app project with one from the Angular CLI this becomes obvious: create-react-app has just three dependencies, the whole build tooling is hidden behind the dependency to react-scripts. The Angular CLI gives you 12 dependencies for the Angular platform (there is probably not much to change about that) but also 19 dev-dependencies for the build tooling. These dependencies are directly exposed to the user.

As a consequence the babel-compilation of a react-project is completely abstracted while the Angular CLI project exposes several tsconfig files to configure the typescript compilation process. This is the same with linting and testing: The Angular CLI exposes all those configuration files, while create-react-app hides the configuration behind react-scripts.

The disadvantage of the Angular CLI approach is, that those configuration files are only generated initially and the user has then to maintain them himself. With create-react-app the tooling can evolve those configurations and the user just has to upgrade the dependency to react-scripts to get the latest configuration.

The big advantage of the Angular CLI is, that it integrates better with existing tooling and IDEs: Most IDEs expect and work with the configuration files for Typescript, ESLint, TSLint, Karma, Jest … which results in a better development experience than with create-react-app (which does not expose those configuration files).

Flexibility

The Angular CLI is quite flexible and supports a wider range of project setups. By exposing the TypeScript configuration you can (to a certain extent) configure the compilation process (i.e. enforcing some stricter rules). It also supports the most prominent styling options out of the box (plain css, sass, less and stylus). It is easy to change the testing infrastructure to Jest. You have an easy way to integrate legacy libraries with global scripts and global styles.

The Angular CLI supports code splitting into a vendor- and a app-bundle. Which I think is a good default optimisation for business applications.

create-react-app allows almost no deviation from its default setup. For the projects I was working on the default setup was too limiting: there is no real integration of less or sass, there is no possibility to configure the babel compiler or to use additional babel plugins, typescript is not supported, there is no way to customise linting, decorators are not supported and there is no code splitting into a vendor- and a app-bundle.
You can do all the above things, but you have to eject and configure them yourself.

Maturity

create-react-app is a very polished project. The documentation is great. The changelog of create-react-app is also a pleasure to read. I have used create-react-app to set up different enterprise projects and I have never come across a bug.

The documentation of Angular CLI is very crude. Often documentation is missing or outdated. The changelog is not very helpful from the perspective of an application programmer.

Worse than the lacking documentation is in my experience the fact that Angular CLI releases often new versions with critical bugs. I already wrote a post about that before. A more recent example: With Angular CLI 1.5 I quickly stumbled across two critical bugs (8359 and 8495) which prevented the usage in a “real” project.

Conclusion

The Angular CLI and create-react-app are both tools I always use for setting up new single-page application projects.

I am not aware of a scenario where I would not recommend to get started with one of those tools.

In my experience the Angular CLI can take you much further down the road than create-react-app. For severals enterprise projects I am aware of, the project setup you get with the Angular CLI is a good fit and there is no need to eject.

With create-react-app I always come quickly to the point where I need to eject because I need some features that create-react-app does not support (typically sass & typescript integration). Create-react-app is a good starting point, but I typically need a bit more flexibility.

When you are using the Angular CLI my advice is to be conservative with upgrading to new releases, make sure that there are no blocking bugs and be prepared to roll back. Also be prepared to wade through GitHub issues to get current information about new features and bugs when using the Angular CLI, since the documentation is typically lacking.