### 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';
{{pageTitle "SuperRentals"}}
{{outlet}}
{{! The following component displays Ember's default welcome message. }}
{{! Feel free to remove this! }}
Hello World!!!
```
--------------------------------
### 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``);
assert.equal(this.element.textContent.trim(), '');
// Template block usage:
await render(hbs`
template block text
`);
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
PeopleTracker
{{outlet}}
```
--------------------------------
### 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. }}
{{! 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``);
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``);
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
{{@title}}
{{#each @people as |person|}}
{{person}}
{{/each}}
```
--------------------------------
### 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
Hi, this is a valid Ember template!
```
```html
Hi {{this.name}}, this is a valid Ember template!
```
--------------------------------
### 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
List of Scientists
{{#each this.model as |scientist|}}
{{scientist}}
{{/each}}
```
--------------------------------
### 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
```
--------------------------------
### 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
List of Scientists
{{#each this.model as |scientist|}}
{{scientist}}
{{/each}}
{{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
PeopleTracker
{{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;
};
{{@title}}
{{#each @people as |person|}}
{{#if (this.isCurrentPerson person) }}
⬅️
{{/if}}
{{/each}}
}
```
--------------------------------
### 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(), '/');
});
});
```