Ember.js

https://guides.emberjs.com/
Admin
Ember.js is a productive, battle-tested JavaScript framework for building ambitious web...
Tokens:581,401
Snippets:7,616
Trust Score:10
Update:1 year ago
Show doc for...
Tokens:
Raw
### Ember.js Application Template Example

Source: https://guides.emberjs.com/v6.7.0/tutorial/part-1/orientation

An example of an Ember.js application template file (`application.gjs`). This template sets the page title, renders an outlet, and includes a placeholder for the welcome page component along with custom 'Hello World!!!' text. It demonstrates basic template structure and content.

```javascript
import pageTitle from 'ember-page-title/helpers/page-title';
import WelcomePage from 'ember-welcome-page/components/welcome-page';

<template>
  {{pageTitle "SuperRentals"}}

  {{outlet}}

  {{! The following component displays Ember's default welcome message. }}
  <WelcomePage />
  {{! Feel free to remove this! }}
  Hello World!!!
</template>
```

--------------------------------

### Example Output of Addon Installation

Source: https://guides.emberjs.com/v3.12.0/tutorial/installing-addons

This output shows the successful installation of the `ember-cli-tutorial-style` addon. It indicates the files created, such as `public/assets/images/teaching.png` and `vendor/ember-tutorial.css`, and confirms the addon package installation.

```text
NPM: Installed ember-cli-tutorial-style
installing ember-cli-tutorial-style
  create public/assets/images/teaching.png
  create vendor/ember-tutorial.css
Installed addon package.
```

--------------------------------

### Install Ember CLI using npm

Source: https://guides.emberjs.com/release/getting-started/quick-start

Installs the Ember CLI globally on your system using npm. This command makes the 'ember' script available for use in your terminal. Ensure Node.js and npm are installed beforehand.

```bash
npm install -g ember-cli
```

--------------------------------

### Start Ember Development Server

Source: https://guides.emberjs.com/v3.12.0/getting-started/quick-start

Navigates into the newly created Ember application directory and starts the development server. This command enables live reloading and serves the application at a local URL.

```bash
cd ember-quickstart
ember serve
```

--------------------------------

### Verify Ember CLI Installation

Source: https://guides.emberjs.com/v6.7.0/tutorial/part-1/orientation

Checks the installed version of Ember CLI and related environment details (Node.js version, OS). This command helps confirm that Ember CLI has been successfully installed and is ready for use. The output displays version information.

```bash
$ ember --version
```

--------------------------------

### Start Ember development server

Source: https://guides.emberjs.com/release/getting-started/quick-start

Navigates into the application directory and starts the development server. The server provides live reloading and enables rapid development by serving the application at a local URL.

```bash
cd ember-quickstart
npm start
```

--------------------------------

### Ember.js Test Helpers Import Example

Source: https://guides.emberjs.com/v3.12.0/tutorial/routes-and-templates

This JavaScript snippet demonstrates importing various application test helpers provided by Ember.js. It includes `visit`, `currentURL`, and `click` from `@ember/test-helpers`, along with `setupApplicationTest` from `ember-qunit`. This setup is crucial for writing automated tests that interact with the Ember application.

```javascript
import { visit, currentURL } from '@ember/test-helpers';
import { setupApplicationTest } from 'ember-qunit';
import {
  click,
  currentURL,
  visit
} from '@ember/test-helpers';
```

--------------------------------

### Verify Ember CLI Installation

Source: https://guides.emberjs.com/v3.12.0/getting-started

After installation, this command checks if Ember CLI has been installed correctly by displaying its version number. A successful output indicates that Ember is ready for use.

```bash
ember -v
```

--------------------------------

### GET /api/rentals

Source: https://guides.emberjs.com/v3.12.0/tutorial/installing-addons

This endpoint is configured using ember-cli-mirage to simulate a GET request for rental data. It returns a predefined JSON object adhering to the JSON-API specification.

```APIDOC
## GET /api/rentals

### Description
Mirage endpoint to fetch a list of rental properties. This is a mock endpoint used for development and testing.

### Method
GET

### Endpoint
/api/rentals

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```json
{
  "example": "No request body for GET /api/rentals"
}
```

### Response
#### Success Response (200)
- **data** (array) - An array of rental objects.
  - **type** (string) - The resource type, always 'rentals'.
  - **id** (string) - The unique identifier for the rental.
  - **attributes** (object) - The properties of the rental.
    - **title** (string) - The title of the rental property.
    - **owner** (string) - The name of the owner.
    - **city** (string) - The city where the rental is located.
    - **category** (string) - The category of the rental (e.g., Estate, Condo, Apartment).
    - **bedrooms** (number) - The number of bedrooms.
    - **image** (string) - URL to an image of the rental.
    - **description** (string) - A description of the rental.

#### Response Example
```json
{
  "data": [
    {
      "type": "rentals",
      "id": "grand-old-mansion",
      "attributes": {
        "title": "Grand Old Mansion",
        "owner": "Veruca Salt",
        "city": "San Francisco",
        "category": "Estate",
        "bedrooms": 15,
        "image": "https://upload.wikimedia.org/wikipedia/commons/c/cb/Crane_estate_(5).jpg",
        "description": "This grand old mansion sits on over 100 acres of rolling hills and dense redwood forests."
      }
    },
    {
      "type": "rentals",
      "id": "urban-living",
      "attributes": {
        "title": "Urban Living",
        "owner": "Mike Teavee",
        "city": "Seattle",
        "category": "Condo",
        "bedrooms": 1,
        "image": "https://upload.wikimedia.org/wikipedia/commons/2/20/Seattle_-_Barnes_and_Bell_Buildings.jpg",
        "description": "A commuters dream. This rental is within walking distance of 2 bus stops and the Metro."
      }
    },
    {
      "type": "rentals",
      "id": "downtown-charm",
      "attributes": {
        "title": "Downtown Charm",
        "owner": "Violet Beauregarde",
        "city": "Portland",
        "category": "Apartment",
        "bedrooms": 3,
        "image": "https://upload.wikimedia.org/wikipedia/commons/f/f7/Wheeldon_Apartment_Building_-_Portland_Oregon.jpg",
        "description": "Convenience is at your doorstep with this charming downtown rental. Great restaurants and active night life are within a few feet."
      }
    }
  ]
}
```
```

--------------------------------

### Import Mirage Test Setup Function in Ember.js

Source: https://guides.emberjs.com/v3.6.0/tutorial/ember-data

This code snippet demonstrates importing the necessary test setup function from Ember CLI Mirage. This import is crucial for enabling Mirage's mocking capabilities within your Ember.js application tests. Ensure `ember-cli-mirage` is installed as a dependency.

```javascript
import { module, test } from 'qunit';
import { setupApplicationTest } from 'ember-qunit';
import setupMirage from 'ember-cli-mirage/test-support/setup-mirage';
import {
  click,
  currentURL,
  visit
} from '@ember/test-helpers'
```

--------------------------------

### Ember Acceptance Test Example (QUnit)

Source: https://guides.emberjs.com/v3.6.0/tutorial/acceptance-test

This JavaScript code demonstrates a basic Ember application test using QUnit. It sets up the test environment, visits the root URL of the application, and asserts that the current URL matches the expected root. This serves as a starting point for verifying application behavior.

```javascript
import { module, test } from 'qunit';
import { visit, currentURL } from '@ember/test-helpers';
import { setupApplicationTest } from 'ember-qunit';

module('Acceptance | list rentals, function(hooks) {
  setupApplicationTest(hooks);

  test('visiting /', async function(assert) {
    await visit('/');
    assert.equal(currentURL(), '/');
  });
});
```

--------------------------------

### Ember.js Acceptance Test Setup

Source: https://guides.emberjs.com/v5.12.0/tutorial/part-1/component-basics

Initializes an Ember.js acceptance test module using 'qunit'. This setup is standard for writing end-to-end tests for the application's behavior.

```javascript
import { module, test } from 'qunit';

```

--------------------------------

### Check Node.js and npm Versions

Source: https://guides.emberjs.com/v3.12.0/getting-started

This command-line snippet verifies the installed versions of Node.js and npm, which are essential dependencies for Ember CLI. Ensure you have the latest LTS version of Node.js installed.

```bash
node --version
npm --version
```

--------------------------------

### Install ember-cli-mirage Addon

Source: https://guides.emberjs.com/v3.12.0/tutorial/installing-addons

Command to install the ember-cli-mirage addon into an Ember project. This enables client-side HTTP stubbing and data mocking.

```bash
ember install ember-cli-mirage

```

--------------------------------

### Install Surge CLI

Source: https://guides.emberjs.com/v3.6.0/tutorial/deploying

This command installs the Surge.sh command-line interface (CLI) globally using npm. Surge.sh is a service for publishing static websites.

```shell
npm install -g surge

```

--------------------------------

### Create New Ember.js Project with Ember CLI

Source: https://guides.emberjs.com/v6.7.0/tutorial/part-1/orientation

Generates a new Ember.js project named 'super-rentals' using Ember CLI. The `--lang en` flag sets the primary language to English for accessibility, and `--strict` enforces stricter coding practices. This command creates a new project directory with a default file structure and installs necessary dependencies.

```bash
$ ember new super-rentals --lang en --strict
installing classic-build-app-blueprint
@ember-tooling/classic-build-app-blueprint v6.7.0

Creating a new Ember app in /home/runner/work/super-rentals-tutorial/super-rentals-tutorial/dist/code/super-rentals:
  create .editorconfig
  create .ember-cli
  create .github/workflows/ci.yml
  create .prettierignore
  create .prettierrc.js
  create .stylelintignore
  create .stylelintrc.js
  create .template-lintrc.js
  create .watchmanconfig
  create README.md
  create /home/runner/work/super-rentals-tutorial/super-rentals-tutorial/dist/code/super-rentals/eslint.config.mjs
  create app/app.js
  create app/components/.gitkeep
  create app/controllers/.gitkeep
  create app/deprecation-workflow.js
  create app/helpers/.gitkeep
  create app/index.html
  create app/models/.gitkeep
  create app/router.js
  create app/routes/.gitkeep
  create app/styles/app.css
  create /home/runner/work/super-rentals-tutorial/super-rentals-tutorial/dist/code/super-rentals/app/templates/application.gjs
  create config/ember-cli-update.json
  create config/environment.js
  create config/optional-features.json
  create config/targets.js
  create ember-cli-build.js
  create .gitignore
  create package.json
  create public/robots.txt
  create testem.js
  create tests/helpers/index.js
  create tests/index.html
  create tests/integration/.gitkeep
  create tests/test-helper.js
  create tests/unit/.gitkeep

Installing packages... This might take a couple of minutes.
npm: Installing dependencies ...
npm: Installed dependencies

Initializing git repository.
Git: successfully initialized.

Successfully created project super-rentals.
Get started by typing:

  $ cd super-rentals
  $ npm start

Happy coding!
```

--------------------------------

### Build Ember Application for Production

Source: https://guides.emberjs.com/release/getting-started/quick-start

This command initiates the production build process for an Ember.js application using npm. It leverages Vite to bundle and optimize all application assets for deployment.

```bash
npm run build
```

--------------------------------

### Install ember-cli-tutorial-style Addon

Source: https://guides.emberjs.com/v3.12.0/tutorial/installing-addons

This command installs the `ember-cli-tutorial-style` addon into your Ember project. It adds the addon's package to `node_modules`, updates `package.json`, and generates necessary files like `vendor/ember-tutorial.css`.

```shell
ember install ember-cli-tutorial-style
```

--------------------------------

### Start Ember Development Server

Source: https://guides.emberjs.com/v3.12.0/tutorial/index

Starts the Ember.js development server, which compiles the application and makes it available at `http://localhost:4200`. This command allows for live reloading during development.

```bash
ember serve
```

```bash
ember s
```

--------------------------------

### Verify Ember CLI Installation

Source: https://guides.emberjs.com/v5.12.0/tutorial/part-1/orientation

Checks the installed version of Ember CLI and related environment details (Node.js version, OS). This command helps confirm a successful installation.

```bash
$ ember --version
ember-cli: 5.12.0
node: 18.20.4
os: linux x64
```

--------------------------------

### Configure Netlify URL Handling with _redirects

Source: https://guides.emberjs.com/release/getting-started/quick-start

This configuration creates a `_redirects` file in the `ember-quickstart/public` folder. It redirects all incoming URLs to `index.html`, allowing the Ember.js application to handle client-side routing.

```text
/* /index.html 200
```

--------------------------------

### Verify Ember CLI Installation Version

Source: https://guides.emberjs.com/release/tutorial/ember-cli

Checks the installed version of Ember CLI and related environment details (Node.js version, OS). This is a verification step to confirm a successful installation. It outputs version information if the installation was successful.

```shell
$ ember --version
ember-cli: 6.8.0
node: 18.20.8
os: linux x64
```

--------------------------------

### Create New Ember App

Source: https://guides.emberjs.com/v5.12.0/upgrading/current-edition/index

Creates a new Ember application with all Octane features enabled. This command assumes the Ember CLI has already been installed.

```bash
ember new my-app-name
```

--------------------------------

### Build Ember.js Application for Production

Source: https://guides.emberjs.com/v5.12.0/getting-started/quick-start

This command builds an Ember.js application for production. The `--environment=production` flag optimizes the application by concatenating and minifying assets, preparing them for deployment. The output is typically found in the `dist/` directory.

```bash
ember build --environment=production
```

--------------------------------

### Ember.js Component Integration Test Setup (JavaScript)

Source: https://guides.emberjs.com/v3.12.0/tutorial/simple-component

Sets up an Ember.js component integration test module. It imports necessary testing utilities and defines test scenarios for component behavior. The setup includes rendering the component and accessing its element.

```javascript
import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { render } from '@ember/test-helpers';
import hbs from 'htmlbars-inline-precompile';



module('Integration | Component | rental listing', function (hooks) {
  setupRenderingTest(hooks);

  test('should display rental details', async function(assert) {

  });

  test('should toggle wide class on click', async function(assert) {

  });
});
  test('it renders', async function(assert) {
    // Set any properties with this.set('myProperty', 'value');
    // Handle any actions with this.set('myAction', function(val) { ... });

    await render(hbs`<RentalListing />`);

    assert.equal(this.element.textContent.trim(), '');

    // Template block usage:
    await render(hbs`
      <RentalListing>
        template block text
      </RentalListing>
    `);

    assert.equal(this.element.textContent.trim(), 'template block text');
  });
});
```

--------------------------------

### Ember application template content

Source: https://guides.emberjs.com/release/getting-started/quick-start

Defines the main HTML template for an Ember application. It includes a heading and an {{outlet}} helper, which serves as a placeholder for route content to be rendered.

```gjs
<template>
  <h1>PeopleTracker</h1>
  {{outlet}}
</template>
```

--------------------------------

### Ember Application Template Example

Source: https://guides.emberjs.com/v5.12.0/tutorial/part-1/orientation

An example of an Ember.js Handlebars template file located at 'app/templates/application.hbs'. This template defines the page title, outlet, and includes a component for the welcome message, along with custom content.

```handlebars
{{page-title "SuperRentals"}}

{{outlet}}

{{! The following component displays Ember's default welcome message. }}
<WelcomePage />
{{! Feel free to remove this! }}
Hello World!!!
```

--------------------------------

### Install Latest Ember CLI

Source: https://guides.emberjs.com/v5.12.0/upgrading/current-edition/index

Installs the latest version of Ember CLI globally. This command first uninstalls any existing version and then installs the newest one. It's a prerequisite for creating new Octane apps.

```bash
npm uninstall ember-cli
npm install -g ember-cli
```

--------------------------------

### GET /api/rentals

Source: https://guides.emberjs.com/v3.6.0/tutorial/installing-addons

This endpoint is configured using Ember CLI Mirage to simulate fetching rental data. When a GET request is made to `/api/rentals`, Mirage intercepts it and returns a predefined JSON object containing rental listings.

```APIDOC
## GET /api/rentals

### Description
This endpoint simulates fetching a list of rental properties. Mirage intercepts the request and returns mock data conforming to the JSON-API specification.

### Method
GET

### Endpoint
/api/rentals

### Parameters
No path or query parameters are defined for this endpoint.

### Request Body
This endpoint does not accept a request body.

### Request Example
```json
(No request body for GET request)
```

### Response
#### Success Response (200)
- **data** (array) - An array of rental objects.
  - Each rental object has:
    - **type** (string) - The type of resource, e.g., 'rentals'.
    - **id** (string) - The unique identifier for the rental.
    - **attributes** (object) - Contains the rental's properties:
      - **title** (string) - The title of the rental.
      - **owner** (string) - The name of the owner.
      - **city** (string) - The city where the rental is located.
      - **category** (string) - The category of the rental (e.g., 'Estate', 'Condo', 'Apartment').
      - **bedrooms** (number) - The number of bedrooms.
      - **image** (string) - The URL of the rental's image.
      - **description** (string) - A description of the rental.

#### Response Example
```json
{
  "data": [
    {
      "type": "rentals",
      "id": "grand-old-mansion",
      "attributes": {
        "title": "Grand Old Mansion",
        "owner": "Veruca Salt",
        "city": "San Francisco",
        "category": "Estate",
        "bedrooms": 15,
        "image": "https://upload.wikimedia.org/wikipedia/commons/c/cb/Crane_estate_(5).jpg",
        "description": "This grand old mansion sits on over 100 acres of rolling hills and dense redwood forests."
      }
    },
    {
      "type": "rentals",
      "id": "urban-living",
      "attributes": {
        "title": "Urban Living",
        "owner": "Mike Teavee",
        "city": "Seattle",
        "category": "Condo",
        "bedrooms": 1,
        "image": "https://upload.wikimedia.org/wikipedia/commons/2/20/Seattle_-_Barnes_and_Bell_Buildings.jpg",
        "description": "A commuters dream. This rental is within walking distance of 2 bus stops and the Metro."
      }
    },
    {
      "type": "rentals",
      "id": "downtown-charm",
      "attributes": {
        "title": "Downtown Charm",
        "owner": "Violet Beauregarde",
        "city": "Portland",
        "category": "Apartment",
        "bedrooms": 3,
        "image": "https://upload.wikimedia.org/wikipedia/commons/f/f7/Wheeldon_Apartment_Building_-_Portland_Oregon.jpg",
        "description": "Convenience is at your doorstep with this charming downtown rental. Great restaurants and active night life are within a few feet."
      }
    }
  ]
}
```
```

--------------------------------

### Install Ember CLI Globally with npm

Source: https://guides.emberjs.com/release/tutorial/ember-cli

Installs the latest version of Ember CLI globally on your system using npm. This command ensures that the 'ember' command is available in your terminal for creating and managing Ember projects. No specific inputs or outputs are detailed beyond the installation process itself.

```shell
$ npm install -g ember-cli
```

--------------------------------

### Restart Ember Development Server

Source: https://guides.emberjs.com/v3.12.0/tutorial/installing-addons

After installing an addon, it's crucial to restart the Ember development server for the changes to take effect. This involves stopping the current server process and then launching it again.

```shell
ember server
```

--------------------------------

### Configure Mirage API Endpoints and Data

Source: https://guides.emberjs.com/v3.12.0/tutorial/installing-addons

JavaScript configuration for ember-cli-mirage, defining the API namespace and mock data for the '/api/rentals' endpoint. This mimics a backend response for frontend development and testing.

```javascript
export default function() {
  this.namespace = '/api';

  this.get('/rentals', function() {
    return {
      data: [{
        type: 'rentals',
        id: 'grand-old-mansion',
        attributes: {
          title: 'Grand Old Mansion',
          owner: 'Veruca Salt',
          city: 'San Francisco',
          category: 'Estate',
          bedrooms: 15,
          image: 'https://upload.wikimedia.org/wikipedia/commons/c/cb/Crane_estate_(5).jpg',
          description: "This grand old mansion sits on over 100 acres of rolling hills and dense redwood forests."
        }
      }, {
        type: 'rentals',
        id: 'urban-living',
        attributes: {
          title: 'Urban Living',
          owner: 'Mike Teavee',
          city: 'Seattle',
          category: 'Condo',
          bedrooms: 1,
          image: 'https://upload.wikimedia.org/wikipedia/commons/2/20/Seattle_-_Barnes_and_Bell_Buildings.jpg',
          description: "A commuters dream. This rental is within walking distance of 2 bus stops and the Metro."
        }
      }, {
        type: 'rentals',
        id: 'downtown-charm',
        attributes: {
          title: 'Downtown Charm',
          owner: 'Violet Beauregarde',
          city: 'Portland',
          category: 'Apartment',
          bedrooms: 3,
          image: 'https://upload.wikimedia.org/wikipedia/commons/f/f7/Wheeldon_Apartment_Building_-_Portland_Oregon.jpg',
          description: "Convenience is at your doorstep with this charming downtown rental. Great restaurants and active night life are within a few feet."
        }
      }]
    };
  });
}

```

--------------------------------

### Ember.js Integration Test for Rental Component Setup

Source: https://guides.emberjs.com/v5.12.0/tutorial/part-2/route-params

This Ember.js integration test demonstrates setting up a rental property object using the `beforeEach` hook. This common setup is then utilized by multiple tests to verify component rendering and detailed information display. It requires `@ember/test-helpers` and `ember-cli-htmlbars`.

```javascript
import { module, test } from 'qunit';
import { setupRenderingTest } from 'super-rentals/tests/helpers';
import { render } from '@ember/test-helpers';
import { hbs } from 'ember-cli-htmlbars';

module('Integration | Component | rental/detailed', function (hooks) {
  setupRenderingTest(hooks);

  // Set any properties with this.set('myProperty', 'value');
  // Handle any actions with this.set('myAction', function(val) { ... });
  hooks.beforeEach(function () {
    this.setProperties({
      rental: {
        id: 'grand-old-mansion',
        title: 'Grand Old Mansion',
        owner: 'Veruca Salt',
        city: 'San Francisco',
        location: {
          lat: 37.7749,
          lng: -122.4194,
        },
        category: 'Estate',
        type: 'Standalone',
        bedrooms: 15,
        image:
          'https://upload.wikimedia.org/wikipedia/commons/c/cb/Crane_estate_(5).jpg',
        description:
          'This grand old mansion sits on over 100 acres of rolling hills and dense redwood forests.',
      },
    });
  });

  test('it renders a header with a share button', async function (assert) {
    await render(hbs`<Rental::Detailed @rental={{this.rental}} />`);

    assert.dom().hasText('');
    assert.dom('.jumbo').exists();
    assert.dom('.jumbo h2').containsText('Grand Old Mansion');
    assert
      .dom('.jumbo p')
      .containsText('a nice place to stay near San Francisco');
    assert.dom('.jumbo a.button').containsText('Share on Twitter');
  });

  test('it renders detailed information about a rental property', async function (assert) {
    await render(hbs`<Rental::Detailed @rental={{this.rental}} />`);

    assert.dom().hasText('template block text');
    assert.dom('article').hasClass('rental');
    assert.dom('article h3').containsText('About Grand Old Mansion');
    assert.dom('article .detail.owner').containsText('Veruca Salt');
    assert.dom('article .detail.type').containsText('Standalone – Estate');
    assert.dom('article .detail.location').containsText('San Francisco');
    assert.dom('article .detail.bedrooms').containsText('15');
    assert.dom('article .image').exists();
    assert.dom('article .map').exists();
  });
});

```

--------------------------------

### Create New Ember App with Ember CLI

Source: https://guides.emberjs.com/v5.12.0/tutorial/part-1/orientation

Generates a new Ember project named 'super-rentals' with the primary language set to English. This command initializes the project structure and installs necessary dependencies.

```bash
$ ember new super-rentals --lang en
installing app
Ember CLI v5.12.0

Creating a new Ember app in /home/runner/work/super-rentals-tutorial/super-rentals-tutorial/dist/code/super-rentals:
  create .editorconfig
  create .ember-cli
  create .eslintignore
  create .eslintrc.js
  create .github/workflows/ci.yml
  create .prettierignore
  create .prettierrc.js
  create .stylelintignore
  create .stylelintrc.js
  create .template-lintrc.js
  create .watchmanconfig
  create README.md
  create app/app.js
  create app/components/.gitkeep
  create app/controllers/.gitkeep
  create app/helpers/.gitkeep
  create app/index.html
  create app/models/.gitkeep
  create app/router.js
  create app/routes/.gitkeep
  create app/styles/app.css
  create app/templates/application.hbs
  create config/ember-cli-update.json
  create config/environment.js
  create config/optional-features.json
  create config/targets.js
  create ember-cli-build.js
  create .gitignore
  create package.json
  create public/robots.txt
  create testem.js
  create tests/helpers/index.js
  create tests/index.html
  create tests/integration/.gitkeep
  create tests/unit/.gitkeep

Installing packages... This might take a couple of minutes.
npm: Installing dependencies ...
npm: Installed dependencies

Initializing git repository.
Git: successfully initialized.

Successfully created project super-rentals.
Get started by typing:

  $ cd super-rentals
  $ npm start

Happy coding!
```

--------------------------------

### Generate Ember.js Component

Source: https://guides.emberjs.com/release/getting-started/quick-start

This command generates a new Ember.js component named 'people-list', creating both the component file (`.gjs`) and its corresponding integration test file.

```bash
ember generate component people-list
```

--------------------------------

### Ember Acceptance Test Example using QUnit

Source: https://guides.emberjs.com/v3.12.0/tutorial/acceptance-test

An example of an Ember application test written using the QUnit test framework. It utilizes Ember's test helpers like `visit` and `currentURL` to simulate user interaction and verify application state. The test ensures the application loads correctly at the root URL and checks the current URL.

```javascript
import { module, test } from 'qunit';
import { visit, currentURL } from '@ember/test-helpers';
import { setupApplicationTest } from 'ember-qunit';

module('Acceptance | list rentals', function(hooks) {
  setupApplicationTest(hooks);

  test('visiting /', async function(assert) {
    await visit('/');
    assert.equal(currentURL(), '/');
  });
});
```

--------------------------------

### Ember PeopleList Component Template

Source: https://guides.emberjs.com/v3.12.0/getting-started/quick-start

A reusable Ember component template that displays a title and a list of people. It accepts `@title` and `@people` as arguments, making it dynamic and decoupled from specific data.

```handlebars
<h2>{{@title}}</h2>

<ul>
  {{#each @people as |person|}}
    <li>{{person}}</li>
  {{/each}}
</ul>
```

--------------------------------

### Start Ember Development Server with npm

Source: https://guides.emberjs.com/v5.12.0/tutorial/part-1/orientation

Launches the Ember.js development server to compile and serve the application locally. It listens on http://localhost:4200. The server automatically recompiles and refreshes the browser when application files are modified.

```bash
$ npm start

> super-rentals@0.0.0 start
> ember serve

building...

Build successful (9761ms) – Serving on http://localhost:4200/
```

--------------------------------

### Install @ember/optional-features Addon

Source: https://guides.emberjs.com/v3.12.0/configuring-ember/optional-features

Installs the @ember/optional-features addon, which provides command-line tools for managing optional features in an Ember project. This makes `feature:list`, `feature:enable`, and `feature:disable` commands available.

```shell
ember install @ember/optional-features
```

--------------------------------

### Basic Ember.js Acceptance Test Structure (JavaScript)

Source: https://guides.emberjs.com/release/testing/acceptance

An example of a basic Ember.js acceptance test using QUnit. It demonstrates how to set up the test environment, visit a route, and assert the current URL.

```javascript
import { module, test } from 'qunit';
import { visit, currentURL } from '@ember/test-helpers';
import { setupApplicationTest } from 'my-app-name/tests/helpers';

module('Acceptance | login', function(hooks) {
  setupApplicationTest(hooks);

  test('visiting /login', async function(assert) {
    await visit('/login');
    assert.equal(currentURL(), '/login');
  });
});
```

--------------------------------

### Ember.js Template Syntax Example

Source: https://guides.emberjs.com/v3.6.0/getting-started/core-concepts

Demonstrates basic Ember.js template syntax using Handlebars. Templates can contain raw HTML and display properties from their context using double curly braces.

```html
<div>Hi, this is a valid Ember template!</div>
```

```html
<div>Hi {{this.name}}, this is a valid Ember template!</div>
```

--------------------------------

### Package.json Scripts for TypeScript Addons (V1)

Source: https://guides.emberjs.com/release/typescript/application-development/addons

Example of package.json configurations for V1 Ember addons using TypeScript. Includes scripts for managing type declarations during the packaging process.

```json
{
  "scripts": {
    "lint:types": "tsc --noEmit",
    "prepack": "rm -rf lib && tsc -p tsconfig.declarations.json",
    "postpack": "rm -rf lib"
  },
  "typesVersions": {
    "*": {
      "*": [
        "lib/*",
        "src/*"
      ]
    }
  }
}
```

--------------------------------

### Create a New Ember Project with Ember CLI

Source: https://guides.emberjs.com/release/tutorial/ember-cli

Generates a new Ember.js project named 'super-rentals' with English as the primary language and strict mode enabled. This command uses Ember CLI's 'new' command to scaffold a new application, including generating necessary files and installing dependencies. The output details the files created and the installation progress.

```shell
$ ember new super-rentals --lang en --strict
installing app-blueprint
Creating a new Ember app in /home/runner/work/super-rentals-tutorial/super-rentals-tutorial/dist/code/super-rentals:
  create .editorconfig
  create .ember-cli
  create .env.development
  create .github/workflows/ci.yml
  create .prettierignore
  create .prettierrc.mjs
  create .stylelintignore
  create .stylelintrc.cjs
  create .template-lintrc.mjs
  create .watchmanconfig
  create README.md
  create /home/runner/work/super-rentals-tutorial/super-rentals-tutorial/dist/code/super-rentals/babel.config.cjs
  create /home/runner/work/super-rentals-tutorial/super-rentals-tutorial/dist/code/super-rentals/eslint.config.mjs
  create app/app.js
  create app/components/.gitkeep
  create app/config/environment.js
  create app/controllers/.gitkeep
  create app/deprecation-workflow.js
  create app/helpers/.gitkeep
  create app/models/.gitkeep
  create app/router.js
  create app/routes/.gitkeep
  create app/styles/app.css
  create /home/runner/work/super-rentals-tutorial/super-rentals-tutorial/dist/code/super-rentals/app/templates/application.gjs
  create config/ember-cli-update.json
  create config/environment.js
  create config/optional-features.json
  create config/targets.js
  create ember-cli-build.js
  create .gitignore
  create index.html
  create package.json
  create public/robots.txt
  create testem.cjs
  create tests/helpers/index.js
  create tests/index.html
  create tests/integration/.gitkeep
  create tests/test-helper.js
  create tests/unit/.gitkeep
  create vite.config.mjs

Installing packages... This might take a couple of minutes.
npm: Installing dependencies ...
npm: Installed dependencies

Initializing git repository.
Git: successfully initialized.

Successfully created project super-rentals.
Get started by typing:

  $ cd super-rentals
  $ npm start

Happy coding!
```

--------------------------------

### Setup Ember Component Rendering Test

Source: https://guides.emberjs.com/v3.6.0/testing/testing-components

Sets up an integration test module for the 'pretty-color' Ember component using `ember-qunit`. It utilizes `setupRenderingTest` to prepare the testing environment, including DOM access and cleanup.

```javascript
import { module } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';

module('Integration | Component | pretty color', function(hooks) {
  setupRenderingTest(hooks);

});
```

--------------------------------

### Ember.js: Initialize Object Instance with `init()` Method

Source: https://guides.emberjs.com/v3.12.0/object-model/classes-and-instances

Demonstrates initializing an Ember Object instance using the `init()` method. This method is automatically invoked when a new instance is created and is the recommended place for setup logic. It ensures that any custom setup or initialization occurs before the instance is fully ready for use.

```javascript
import EmberObject from '@ember/object';

const Person = EmberObject.extend({
  init() {
    alert(`${this.name}, reporting for duty!`);
  }
});

Person.create({
  name: 'Stefan Penner'
});

// alerts "Stefan Penner, reporting for duty!"

```

--------------------------------

### Ember.js Basic Router Map Example

Source: https://guides.emberjs.com/v3.12.0/routing/redirection

A fundamental Ember.js router configuration mapping a single 'posts' route. This serves as a basic example for defining application routes and is often a starting point for more complex routing structures.

```javascript
Router.map(function() {
  this.route('posts');
});
```

--------------------------------

### Create a New Ember Application

Source: https://guides.emberjs.com/v5.12.0/getting-started/quick-start

Generates a new Ember.js application named 'ember-quickstart' with English as the primary language. This command sets up a complete development environment including a development server, template compilation, and asset minification.

```bash
ember new ember-quickstart --lang en
```

--------------------------------

### Create New Ember Application

Source: https://guides.emberjs.com/v3.12.0/getting-started/quick-start

Creates a new Ember.js application and its project directory using the ember CLI. This command sets up a complete development environment with a built-in development server, template compilation, and asset minification.

```bash
ember new ember-quickstart
```

--------------------------------

### Ember.js: Nesting 'get' and 'concat' Helpers

Source: https://guides.emberjs.com/v3.6.0/templates/built-in-helpers

This example demonstrates nesting the `get` and `concat` helpers in Ember.js templates. The `concat` helper combines multiple arguments into a single string, which can then be used as a dynamic property name with the `get` helper. This pattern is useful for constructing dynamic lookups based on iteration or other computed values.

```handlebars
{{get "foo" (concat "item" this.index)}}
```

--------------------------------

### Ember `get` and `set` for Classic Change Tracking

Source: https://guides.emberjs.com/v5.12.0/upgrading/current-edition/tracked-properties

Provides a basic example of Ember's classic change tracking system using `get` and `set` from `@ember/object`. This method was essential for ensuring data access and updates in older Ember applications.

```javascript
import { get, set } from '@ember/object';

let image = {};

set(image, 'width', 250);
set(image, 'height', 500);

get(image, 'width'); // 250
get(image, 'height'); // 500
```

--------------------------------

### Create a new Ember application

Source: https://guides.emberjs.com/release/getting-started/quick-start

Generates a new Ember application with specified language and strict mode settings. This command creates a project directory and sets up a basic Ember application structure, including a development server and build tools.

```bash
ember new ember-quickstart --lang en --strict
```

--------------------------------

### Ember Scientists Template with Data Loop

Source: https://guides.emberjs.com/v3.12.0/getting-started/quick-start

Renders a list of scientists fetched from the route's model. It uses the Ember `each` helper to iterate over the `model` data and display each item in a list.

```handlebars
<h2>List of Scientists</h2>

<ul>
  {{#each this.model as |scientist|}}
    <li>{{scientist}}</li>
  {{/each}}
</ul>
```

--------------------------------

### JavaScript Getters for Read-Only Properties

Source: https://guides.emberjs.com/release/in-depth-topics/native-classes-in-depth

Demonstrates how to use the 'get' accessor in JavaScript classes to create properties that can be accessed like variables but are defined as methods. This example shows a read-only 'name' property.

```javascript
class Person {
  get name() {
    return 'Melanie Sumner';
  }
}

let melanie = new Person();
console.log(melanie.name); // 'Melanie Sumner'
```

--------------------------------

### Ember Scientists Template using PeopleList Component

Source: https://guides.emberjs.com/v3.12.0/getting-started/quick-start

Replaces the previous content of the scientists template with an instance of the `PeopleList` component. It passes a title and the route's model data as arguments to the component.

```handlebars
<PeopleList @title="List of Scientists" @people={{this.model}} />
```

--------------------------------

### Configure Ember Data Application Adapter for Mirage

Source: https://guides.emberjs.com/v3.12.0/tutorial/installing-addons

Ember Data application adapter configuration that sets the API namespace to 'api'. This ensures that Ember Data routes requests to the configured Mirage namespace.

```javascript
import DS from 'ember-data';

export default DS.JSONAPIAdapter.extend({
  namespace: 'api'
});

```

--------------------------------

### Get Application Instance from Factory (Ember.js)

Source: https://guides.emberjs.com/v3.12.0/applications/dependency-injection

This example illustrates how to retrieve the application instance that owns a given factory instance using `getOwner`. This is useful within framework objects like components to perform further lookups.

```javascript
import Component from '@ember/component';
import { computed } from '@ember/object';
import { getOwner } from '@ember/application';

// Usage:
//
// {{play-audio song=song}}
//
export default Component.extend({
  audioService: computed('song.audioType', function() {
    if (!this.song) {
      return null;
    }

    let applicationInstance = getOwner(this);
    let audioType = this.song.audioType;

    return applicationInstance.lookup(`service:audio-${audioType}`);
  }),

  click() {
    let player = this.audioService;
    player.play(this.song.file);
  }
});
```

--------------------------------

### Use Ember Component in Template

Source: https://guides.emberjs.com/v3.6.0/getting-started/quick-start

Integrates a reusable component into a parent template. This example demonstrates how to pass data to the `people-list` component using attributes like `title` and `people`. The `people` attribute is bound to the current route's model.

```handlebars
<h2>List of Scientists</h2>

<ul>
  {{#each this.model as |scientist|}}
    <li>{{scientist}}</li>
  {{/each}}
</ul>
{{people-list title="List of Scientists" people=this.model}}
```

--------------------------------

### Modify Application Template (Ember Handlebars)

Source: https://guides.emberjs.com/v3.12.0/getting-started/quick-start

Updates the main application template file (`application.hbs`) to change the displayed content and include an {{outlet}}. The {{outlet}} is a placeholder for rendering nested routes.

```handlebars
<h1>PeopleTracker</h1>

{{outlet}}
```

--------------------------------

### Build Ember.js Application for Production

Source: https://guides.emberjs.com/v3.12.0/getting-started/quick-start

This command builds your Ember.js application for the production environment. It optimizes all assets, including JavaScript, templates, CSS, and images, into a minified and concatenated bundle located in the `dist/` directory. This is a crucial step for deploying your application to a live web server.

```bash
ember build --env production
```

--------------------------------

### Create New Ember.js Project with TypeScript

Source: https://guides.emberjs.com/release/typescript/getting-started

This command initializes a new Ember.js project with TypeScript support enabled. The `--typescript` flag ensures that project files are generated with `.ts` extensions and includes necessary TypeScript-related packages and configurations.

```bash
ember new my-typescript-app --typescript
```

--------------------------------

### Import Mirage Test Setup Function in Ember.js

Source: https://guides.emberjs.com/v3.12.0/tutorial/ember-data

Imports the necessary testing utilities for Ember.js applications and specifically the setupMirage function from ember-cli-mirage. This is a prerequisite for enabling Mirage in your tests. It assumes you have ember-qunit and ember-cli-mirage installed.

```javascript
import { module, test } from 'qunit';
import { setupApplicationTest } from 'ember-qunit';
import setupMirage from 'ember-cli-mirage/test-support/setup-mirage';
import {
  click,
  currentURL,
  visit
} from '@ember/test-helpers';

```

--------------------------------

### Start Ember.js Development Server (npm)

Source: https://guides.emberjs.com/release/tutorial/part-1/orientation

Launches the Ember.js development server using npm. This command compiles the application and serves it locally, enabling live reloading for immediate feedback on code modifications. It runs on http://localhost:4200 by default.

```bash
$ npm start

> super-rentals@0.0.0 start
> vite

Building

Environment: development

building...


Build successful (9761ms)

Slowest Nodes (totalTime >= 5%) | Total (avg)
-+- 
Babel: @embroider/macros (1) | 436ms



  VITE v6.3.6  ready in 4143 ms

  ➜  Local:   http://localhost:4200/
```

--------------------------------

### Manage Component State with Ember '@tracked' Decorator

Source: https://guides.emberjs.com/release/getting-started/quick-start

This example shows how to manage internal state within an Ember.js component using the `@tracked` decorator. It introduces `currentPerson` state and `isCurrentPerson` method to highlight the last clicked person.

```gjs
import { on } from '@ember/modifier'
import { fn } from '@ember/helper';
import { tracked } from '@glimmer/tracking';
import Component from '@glimmer/component';

export default class extends Component {
  @tracked currentPerson;

  showPerson = (person) => {
    this.currentPerson = person;
  };

  isCurrentPerson = (person) => {
    return this.currentPerson === person;
  };

  <template>
    <h2>{{@title}}</h2>

    <ul>
      {{#each @people as |person|}}
        <li>
          <button type="button" {{on "click" (fn this.showPerson person) }}>{{person}}</button>
          {{#if (this.isCurrentPerson person) }}
            ⬅️
          {{/if}}
        </li>
      {{/each}}
    </ul>
  </template>
}
```

--------------------------------

### Start Ember.js Development Server (npm)

Source: https://guides.emberjs.com/release/tutorial/ember-cli

Launches the Ember.js development server using npm. This command compiles the application and serves it locally at http://localhost:4200. It monitors files for changes and triggers live reloads in the browser.

```bash
$ npm start

> super-rentals@0.0.0 start
> vite

Building

Environment: development

building...


Build successful (9761ms)

Slowest Nodes (totalTime >= 5%) | Total (avg)
-+-  
Babel: @embroider/macros (1) | 436ms



  VITE v6.3.6  ready in 4143 ms

  ➜  Local:   http://localhost:4200/
```

--------------------------------

### Generate Ember Route using CLI

Source: https://guides.emberjs.com/release/getting-started/quick-start

Automates the creation of route files, templates, router entries, and tests for a new route in an Ember.js application. This command-line interface tool simplifies boilerplate code generation.

```bash
ember generate route scientists
```

--------------------------------

### Deploy Ember App using surge.sh CLI

Source: https://guides.emberjs.com/v3.12.0/tutorial/deploying

Deploys an Ember application to surge.sh, a free static hosting service. This involves installing the surge CLI, renaming index.html to 200.html for client-side routing, and running the surge deploy command.

```bash
npm install -g surge
mv dist/index.html dist/200.html
surge dist funny-name.surge.sh
```

--------------------------------

### EmberJS Integration Test Setup and Rendering

Source: https://guides.emberjs.com/v3.6.0/tutorial/simple-component

This snippet shows the necessary imports and setup for an EmberJS integration test. It includes importing testing utilities, rendering helpers, and inline HTMLbars compilation. It also demonstrates setting up mock data before each test.

```javascript
import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { render, click } from '@ember/test-helpers';
import hbs from 'htmlbars-inline-precompile';
import EmberObject from '@ember/object';


module('Integration | Component | rental listing', function (hooks) {
  setupRenderingTest(hooks);

  hooks.beforeEach(function () {
    this.rental = EmberObject.create({
      image: 'fake.png',
      title: 'test-title',
      owner: 'test-owner',
      type: 'test-type',
      city: 'test-city',
      bedrooms: 3
    });
  });

  test('should display rental details', async function(assert) {
    await render(hbs`{{rental-listing rental=rental}}`);
    assert.equal(this.element.querySelector('.listing h3').textContent.trim(), 'test-title', 'Title: test-title');
    assert.equal(this.element.querySelector('.listing .owner').textContent.trim(), 'Owner: test-owner', 'Owner: test-owner');
  });

  test('should toggle wide class on click', async function(assert) {
    await render(hbs`{{rental-listing rental=rental}}`);
    assert.notOk(this.element.querySelector('.image.wide'), 'initially rendered small');
    await click('.image');
    assert.ok(this.element.querySelector('.image.wide'), 'rendered wide after click');
    await click('.image');
    assert.notOk(this.element.querySelector('.image.wide'), 'rendered small after second click');
  });
});
```

--------------------------------

### Ember.js Acceptance Test Setup (JavaScript)

Source: https://guides.emberjs.com/v3.12.0/tutorial/acceptance-test

Sets up an Ember.js application test using QUnit. It imports necessary helpers and defines a test module to group related tests. These tests serve as a checklist for application goals.

```javascript
import { module, test } from 'qunit';
import { visit, currentURL } from '@ember/test-helpers';
import { setupApplicationTest } from 'ember-qunit';

module('Acceptance | list-rentals', function(hooks) {
  setupApplicationTest(hooks);

  test('should show rentals as the home page', async function (assert) {
  });

  test('should link to information about the company.', async function (assert) {
  });

  test('should link to contact information.', async function (assert) {
  });

  test('should list available rentals.', async function (assert) {
  });

  test('should filter the list of rentals by city.', async function (assert) {
  });

  test('should show details for a selected rental', async function (assert) {
  });

  test('visiting /', async function(assert) {
    await visit('/');
    assert.equal(currentURL(), '/');
  });

});
```
Tokens:
Raw