Sitemap

Basic Project Creation: Angular vs React

4 min readOct 1, 2025

--

Press enter or click to view image in full size

Angular Project Creation

We typically create a new Angular project using CLI.

  1. Prerequisites

Ensure Node.js and npm (Node Package Manager) are installed on your system.

2. Install Angular CLI

npm install -g @angular/cli

3. Create a New Angular Project

ng new my-app

4. During Project Creation, Angular CLI Will Ask Several Questions:

Which stylesheet format would you like to use?

  • CSS
  • Sass (SCSS)
  • Sass (Indented)
  • Less
Press enter or click to view image in full size

Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)?

Press enter or click to view image in full size

5. Post-Creation Defaults

After creating the project

  • npm install runs automatically, creating the node_modules folder.
  • Git is automatically initialized (git init).

6. Run the Angular Project

cd my-app
ng serve
Press enter or click to view image in full size
Press enter or click to view image in full size

project will be run on port 4200 by default

Default Port: 4200 URL: http://localhost:4200

if we want to assign a different port we can use

ng serve — port <port-number>

ng serve — port 4500

Press enter or click to view image in full size

🔔 Important Note (Angular 17+)

As of Angular v17, projects are standalone by default (using standalone components, not NgModules).

⚙️ Common Variations of ng new

You can customize project creation with various CLI flags:

. ng new my-app — routing this will add angular router setup and creates AppRoutingModule

. ng new my-app — standalone this will enables standalone components and no NgModules are generated

. ng new my-app — no-standalone this will enables NgModules and no standalone components are disabled

. ng new my-app — style=scss

. ng new my-app — style=sass

. ng new my-app — style=less

. ng new my-app — style=css this will set default stylesheet

. ng new my-app — skip-install this will avoid running npm install after project creation

. ng new my-app — skip-git this will avoid initializing git after project creation

. ng new my-app — directory=my-folder this will create the new project in a specified folder

React Project Creation

As of 2025, the most popular way to create a React project is using Vite

React with Vite

1. Prerequisites

Get Ravithamara’s stories in your inbox

Join Medium for free to get updates from this writer.

Ensure Node.js and npm are installed.

2. Create React Project Using Vite

npm create vite@latest my-app

3. During Setup, Vite Will Ask Several Questions:

Select a framework:

  • Vanilla
  • Vue
  • React
  • Preact
  • Lit
  • Svelte
  • Solid
  • Qwik
  • Angular
  • Marko
  • Others

Select a variant:

  • TypeScript
  • TypeScript + SWC
  • JavaScript
  • JavaScript + SWC
  • React Router v7
  • TanStack Router
  • RedwoodSDK
  • RSC

4. Run The Project

cd my-app
npm install
npm run dev
Press enter or click to view image in full size
Press enter or click to view image in full size

using Vite the project will be run on port 5173 by default

Default Port: 5173 URL: http://localhost:5173

if we want to assign a different port we can use

npm run dev — — port= <port-number>

npm run dev — — port=3000

Old Way: React with Create React App (CRA)

1. Prerequisites

Ensure Node.js and npm are installed.

2. Create React Project

npx create-react-app my-app

no need to run npm install/create-react-app automatically runs npm install

3. Run the Project

cd my-app
npm start

using CRA the project will be run on port 3000 by default

Default Port: 3000 URL: http://localhost:3000

⚙️ CRA Optional Variants

. npx create-react-app my-app — template typescript this will enable typescript in react project

--

--