Architectural Trade-offs in Frontend Scaffolding: Angular CLI vs Vue CLI vs Create React App

When starting a new frontend project, the tool you choose to scaffold your application sets the tone for your entire development lifecycle. @angular/cli, @vue/cli, and create-react-app represent three distinct philosophies in how build tools should behave. While they all aim to get you from "empty folder" to "running app," their underlying architectures, flexibility, and current maintenance statuses differ significantly.

Let's break down how these tools handle project creation, configuration, and build processes, and where they stand in the modern ecosystem.

🏗️ Project Initialization: Opinionated vs. Interactive vs. Static

@angular/cli takes a highly opinionated approach. It assumes you want a full-featured Angular workspace with routing, styles, and testing pre-configured based on flags you pass. There is no interactive wizard; you define your stack via command arguments.

# angular: Explicit flags define the stack
ng new my-app --routing --style=scss --strict

@vue/cli offers an interactive mode by default. When you run the command without presets, it launches a prompt asking which features you want (Babel, TS, Router, Vuex, etc.) and how you want to configure them.

# vue: Interactive prompt selects features
vue create my-app
# -> Picker: Choose default, manual, or saved preset
# -> Checkboxes: Babel, Router, Vuex, CSS Pre-processors

create-react-app provides a static, zero-config experience. You get one standard setup with JavaScript (or TypeScript via a flag), Jest, and a basic file structure. There are no prompts to choose specific linters or style preprocessors during init; you add those later manually.

# react: Single command, standard output
npx create-react-app my-app
# Or for TypeScript specifically
npx create-react-app my-app --template typescript

⚙️ Configuration Philosophy: Hidden vs. Modular vs. Ejected

@angular/cli keeps configuration centralized in angular.json. This single file controls build targets, serve options, test runners, and deployment builders. You rarely touch the underlying webpack config directly, as the CLI abstracts it through "builders."

// angular: angular.json
{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/my-app",
            "styles": ["src/styles.scss"]
          }
        }
      }
    }
  }
}

@vue/cli uses a modular plugin system. Configuration lives in vue.config.js, where you can chain webpack loaders or modify the config directly. It strikes a balance between hiding complexity and allowing escape hatches for advanced users.

// vue: vue.config.js
const { defineConfig } = require('@vue/cli-service');

module.exports = defineConfig({
  transpileDependencies: true,
  chainWebpack: config => {
    config.plugin('html').tap(args => {
      args[0].title = 'My Vue App';
      return args;
    });
  }
});

create-react-app famously hides all configuration. There is no config file to edit by default. If you need to customize webpack, you must "eject," a one-way operation that copies all build dependencies and config into your repo, transferring the maintenance burden to you.

# react: Ejecting exposes hidden config
npm run eject
# Now you own webpack.config.js, babel.config.js, etc.
# Warning: This cannot be undone.

🚀 Build Performance and Modern Standards

@angular/cli has aggressively adopted modern build tools. Recent versions utilize esbuild for faster development server startups and webpack 5 for production builds. It supports differential loading automatically to serve optimized code to older browsers.

# angular: Fast dev server via esbuild
ng serve
# Output: Initial compilation done. (often < 2s for medium apps)

@vue/cli relies primarily on webpack 4 or 5 (depending on version). While stable, it can feel slower compared to newer bundlers when dealing with large component trees. It does not natively support Vite unless you switch to the newer @vitejs/plugin-vue ecosystem outside of the standard CLI.

// vue: Standard webpack build
npm run build
// Uses webpack under the hood; tree-shaking and code-splitting configured via plugins

create-react-app is currently stuck on older webpack versions and lacks native support for modern features like Hot Module Replacement (HMR) speed improvements found in Vite or esbuild. This is a primary reason for its decline in popularity for new projects.

// react: Standard webpack build
npm run build
// No native esbuild support; slower cold starts compared to modern alternatives

🛠️ Adding Features: Generators vs. Plugins vs. Manual Install

@angular/cli includes powerful generators (schematics) to create components, services, and modules with correct boilerplate and test files automatically.

# angular: Generate a component with test and style files
ng generate component user-profile
// Creates: user-profile.component.ts, .html, .scss, .spec.ts

@vue/cli uses plugins to add functionality. You can install official plugins for PWA, SSR, or unit testing, which automatically modify your config and install dependencies.

# vue: Add PWA support via plugin
vue add pwa
# Installs workbox, registers service worker, updates config

create-react-app requires manual installation for most extras. While it supports some community templates, adding features like Redux, Sass, or PWA usually means installing packages and configuring them yourself.

# react: Manual installation
npm install sass
npm install @reduxjs/toolkit react-redux
// You must create config files and import them manually

⚠️ Maintenance Status and Future Outlook

@angular/cli is actively maintained and version-locked with the Angular framework. It receives regular updates alongside major Angular releases, ensuring compatibility with the latest language features and security patches.

@vue/cli is in a transitional state. While still maintained for Vue 2 and legacy Vue 3 projects, the Vue core team now recommends create-vue (based on Vite) for new projects. The CLI remains valid for specific webpack-based requirements but is no longer the default recommendation for greenfield Vue 3 apps.

create-react-app is officially in maintenance mode. The React team and community have signaled that it is no longer the recommended way to start new React apps. Security patches may still occur, but no new features or performance improvements are planned. Migrating to Vite or a framework like Next.js is strongly advised for new work.

📊 Summary: Key Differences

💡 The Big Picture

Choosing a scaffolding tool is not just about starting a project; it's about choosing your long-term maintenance path.

@angular/cli remains the gold standard for Angular development. Its tight integration and powerful generators make it indispensable for teams building complex, structured applications. If you are in the Angular ecosystem, there is no alternative.

@vue/cli still holds value for maintaining existing codebases or teams deeply invested in the webpack plugin ecosystem. However, for new Vue 3 projects, the industry has shifted toward Vite-based starters for superior speed and simplicity.

create-react-app has served the community well for years, but its time as the default choice has passed. Its inability to evolve quickly and its rigid configuration model have led the community to embrace more modern, faster tools. Starting a new project with CRA today introduces technical debt before you even write your first component.

Final Thought: For new architecture, prioritize tools that offer speed, flexibility, and active evolution. Stick with @angular/cli for Angular, consider Vite-based solutions for Vue and React, and treat create-react-app as a legacy artifact rather than a foundation for the future.