Ember.js Installation — Setting Up Ember CLI

In this tutorial, you will learn about Ember.js Installation. We cover key concepts, practical examples, and best practices to help you master this topic.

Ember.js installation starts with Ember CLI, the official command-line tool for creating and managing Ember projects. Ember CLI provides scaffolding, build pipeline, testing, and development server — everything needed to start building immediately.

What You'll Learn

You will install Ember CLI, create a new project, understand the generated file structure, and run the development server with live reload.

Why It Matters

Ember CLI is not optional. It is the only supported way to create Ember applications. It sets up Broccoli for builds, QUnit for testing, and the development server for live reload.

Real-World Use

Every Ember project — from LinkedIn to Intercom — starts with ember new. The CLI ensures every project follows the same structure, making it easy for developers to move between teams.

flowchart LR
    A[npm install -g ember-cli] --> B[ember new my-app]
    B --> C[Project scaffolded]
    C --> D[ember serve]
    D --> E[localhost:4200]
    D --> F[Live reload ready]

Step 1: Install Node.js and npm

Ember requires Node.js 18+ and npm (comes with Node). Verify installation:

node --version
npm --version

Expected output:

v18.17.0
9.6.7

Step 2: Install Ember CLI

Install Ember CLI globally:

npm install -g ember-cli

# Verify installation
ember --version

Expected output:

ember-cli: 5.x.x
node: 18.x.x
os: linux x64

Step 3: Create a New Project

ember new my-ember-app
cd my-ember-app

Expected output:

installing app
  create .eslintrc.js
  create .watchmanconfig
  create config/environment.js
  create app/app.js
  create app/index.html
  create app/router.js
  create app/styles/app.css
  create app/templates/application.hbs
  ...
Successfully initialized git.

Step 4: Start the Development Server

ember serve

Expected output:

Build successful (1234ms)
Serving on http://localhost:4200/

Open http://localhost:4200 in your browser. You will see the default Ember welcome page. Changes to any file trigger automatic rebuild and browser reload.

Step 5: Generate Files

Use Ember CLI generators to create routes, components, models, and more.

# Generate a route
ember generate route about

# Generate a component
ember generate component my-button

# Generate a model
ember generate model user

# Generate a service
ember generate service session

Expected output:

installing route
  create app/routes/about.js
  create app/templates/about.hbs
  update router
  installing route-test
  create tests/unit/routes/about-test.js

Project Structure

Understanding the generated project structure:

my-ember-app/
  app/              # Application code
    components/      # Reusable components
    controllers/     # Controllers (optional)
    helpers/         # Template helpers
    models/          # Ember Data models
    routes/          # Route handlers
    styles/          # CSS files
    templates/       # Handlebars templates
    app.js           # Application entry point
    router.js        # Route configuration
  config/
    environment.js   # Environment configuration
  public/            # Static assets
  tests/             # Test files
  ember-cli-build.js # Build configuration
  package.json       # Dependencies

Available Commands

ember serve          # Development server (localhost:4200)
ember build          # Build for production (dist/)
ember test           # Run tests
ember generate       # Generate files
ember destroy        # Remove generated files
ember help           # List all commands

Using Addons

Ember's addon ecosystem extends functionality:

# Install popular addons
ember install ember-auto-import    # Import npm packages
ember install ember-source         # Latest Ember version
ember install @ember-data/model    # Ember Data models
ember install ember-cli-mirage     # Mock server for testing

Common Mistakes

1. Installing Ember.js via npm without Ember CLI. The ember npm package is deprecated. Always install ember-cli.
2. Running ember serve before installing dependencies. Always run npm install after cloning a project. Ember CLI does not auto-install.
3. Editing files outside app/. Files in config/, public/, and tests/ have specific purposes. Read the comments before editing.
4. Using sudo with npm install. Never use sudo. Configure npm for global installs without sudo or use nvm.
5. Forgetting to restart ember serve after adding addons. Some addons require a server restart. Stop and restart if new addons do not work.

Practice Questions

1. What command creates a new Ember project?
2. What is the default development server URL?
3. How do you generate a route in Ember?
4. What directory contains Handlebars templates?
5. Challenge: Create a new Ember project, generate a route called profile, a component called user-avatar, and a model called profile. Start the dev server and verify all files exist in the correct directories.

FAQ

Mini Project

Install Ember CLI, create a new project called ember-dashboard, install ember-auto-import, generate a dashboard route and a chart-widget component. Run ember serve and verify the app loads at localhost:4200.

What's Next

Now that Ember CLI is installed, learn about Ember Project Structure in detail. Then start working with Ember Routes.