### Create and Run a New Ember App Source: https://github.com/ember-learn/guides-source/blob/master/public/v1.12.0/getting-started/index.html Demonstrates how to create a new Ember.js application named 'my-app' using ember-cli and then run it locally. It includes navigating into the project directory and starting the development server. ```bash ember new my-app cd my-app ember server ``` -------------------------------- ### Clone, Install, and Serve Ember Guides Locally Source: https://github.com/ember-learn/guides-source/blob/master/README.md Commands to clone the Ember Guides repository, install dependencies using npm, and start a local development server. ```bash git clone git://github.com/ember-learn/guides-source.git cd guides-source npm installember serve ``` -------------------------------- ### Install Node.js (Windows/Mac) Source: https://github.com/ember-learn/guides-source/blob/master/public/v2.1.0/getting-started/index.html This provides a link to the official Node.js installer for Windows and Mac users. Node.js is a runtime environment required for Ember CLI. ```bash http://nodejs.org/download/ ``` -------------------------------- ### Start Ember Development Server Source: https://github.com/ember-learn/guides-source/blob/master/public/v2.10.0/getting-started/quick-start/index.html Navigates into the application directory and starts the Ember development server. This allows for live reloading and viewing the application in the browser. ```bash cd ember-quickstart ember server ``` -------------------------------- ### Start Ember.js development server Source: https://github.com/ember-learn/guides-source/blob/master/guides/v3.1.0/getting-started/quick-start.md Navigates into the application directory and starts the Ember.js development server. The server provides live reloading and serves the application locally. ```bash cd ember-quickstart ember serve ``` -------------------------------- ### Start Ember Development Server Source: https://github.com/ember-learn/guides-source/blob/master/guides/v2.10.0/getting-started/quick-start.md Navigates into the application directory and starts the Ember development server. This allows for live reloading and testing of the application during development. ```bash cd ember-quickstartember server ``` -------------------------------- ### Install Git (Windows) Source: https://github.com/ember-learn/guides-source/blob/master/public/v2.1.0/getting-started/index.html This refers to downloading and running the official Git installer for Windows users. Git is essential for managing Ember.js project dependencies. ```bash http://git-scm.com/download/win ``` -------------------------------- ### Ember.js API Documentation Source: https://github.com/ember-learn/guides-source/blob/master/public/v5.4.0/getting-started/index.html Links to the comprehensive Ember.js API documentation for detailed information on every Ember feature and API. ```documentation see the [Ember.js API documentation](https://api.emberjs.com/). ``` -------------------------------- ### Create and Serve Ember Application Source: https://github.com/ember-learn/guides-source/blob/master/public/v2.17.0/getting-started/quick-start/index.html Creates a new Ember application named 'ember-quickstart', navigates into its directory, and starts the development server. The server provides live reloading and serves the application on http://localhost:4200. ```shell ember new ember-quickstart cd ember-quickstart ember serve ``` -------------------------------- ### Mirage Configuration Defaults and Shorthands Source: https://github.com/ember-learn/guides-source/blob/master/public/v3.14.0/tutorial/installing-addons/index.html Provides commented-out examples of Mirage configuration options like `urlPrefix`, `namespace`, and `timing`, along with a cheatsheet for common HTTP methods (GET, POST, PUT, DELETE) and route parameters. ```javascript /* Config (with defaults). Note: these only affect routes defined *after* them! */ // this.urlPrefix = ''; // make this `http://localhost:8080`, for example, if your API is on a different server // this.namespace = ''; // make this `/api`, for example, if your API is namespaced // this.timing = 400; // delay for each request, automatically set to 0 during testing /* Shorthand cheatsheet: this.get('/posts'); this.post('/posts'); this.get('/posts/:id'); this.put('/posts/:id'); // or this.patch this.del('/posts/:id'); http://www.ember-cli-mirage.com/docs/v0.3.x/shorthands/ */ ``` -------------------------------- ### Install Ember CLI Globally Source: https://github.com/ember-learn/guides-source/blob/master/guides/release/getting-started/quick-start.md Installs the Ember command-line interface globally using npm. This command requires Node.js and npm to be installed on your system. ```bash npm install -g ember-cli ``` -------------------------------- ### Ember application template example Source: https://github.com/ember-learn/guides-source/blob/master/public/v3.26.0/getting-started/quick-start/index.html Example of an Ember Handlebars template file for the application. This file defines the main structure of the web application. ```handlebars

Welcome to {{this.name}}

{{outlet}} ``` -------------------------------- ### Install Node.js with Homebrew (macOS) Source: https://github.com/ember-learn/guides-source/blob/master/public/v1.13.0/getting-started/index.html Instructions for macOS users to install Node.js using Homebrew, a package manager. ```shell brew install node ``` -------------------------------- ### Install PhantomJS Globally Source: https://github.com/ember-learn/guides-source/blob/master/guides/v2.0.0/getting-started/index.md Installs PhantomJS globally using npm. PhantomJS is recommended for running tests from the command line. ```bash npm install -g phantomjs2 ``` -------------------------------- ### Ember Application Template Example Source: https://github.com/ember-learn/guides-source/blob/master/public/v3.25.0/getting-started/quick-start/index.html This snippet shows the content for the main application template file in Ember.js. It defines the primary structure of the web page that remains constant across the application. ```handlebars app/templates/application.hbs ``` -------------------------------- ### Ember CLI Basic Commands Source: https://github.com/ember-learn/guides-source/blob/master/public/v5.4.0/getting-started/index.html Provides information and links to learn about basic commands for the Ember CLI, a development toolkit for creating, developing, and building Ember applications. ```documentation Learn [basic commands](https://cli.emberjs.com/release/) from the CLI Guides. ``` -------------------------------- ### Working with HTML, CSS, and JavaScript in Ember Source: https://github.com/ember-learn/guides-source/blob/master/public/v5.4.0/getting-started/index.html A guide that explains how to work with HTML, CSS, and JavaScript in Ember, including special features like class fields and decorators. ```documentation You can find out more about each of these technologies in the [Working with HTML, CSS, and JavaScript](./working-with-html-css-and-javascript) guide, including some of the special features that Ember uses such as class fields and decorators. ``` -------------------------------- ### Install Ember CLI using npm Source: https://github.com/ember-learn/guides-source/blob/master/guides/v5.1.0/getting-started/quick-start.md Installs the Ember command-line interface globally using npm, the Node.js package manager. This command is essential for creating and managing Ember projects. ```bash npm install -g ember-cli ``` -------------------------------- ### Serve Ember Application Locally Source: https://github.com/ember-learn/guides-source/blob/master/guides/v5.1.0/getting-started/quick-start.md Navigates into the application directory and starts the development server for the Ember application. This command allows you to preview your application in the browser during development. ```bash cd ember-quickstartember serve ``` -------------------------------- ### Verify Ember CLI Installation with Bash Source: https://github.com/ember-learn/guides-source/blob/master/guides/v1.13.0/getting-started/index.md Checks the installed version of Ember CLI to confirm a successful installation. Requires Ember CLI to be installed. ```bash ember -v ``` -------------------------------- ### Install Node.js on Linux Source: https://github.com/ember-learn/guides-source/blob/master/public/v2.1.0/getting-started/index.html This link directs users to a guide for installing Node.js on Linux systems using package managers. Node.js is a core dependency for Ember CLI. ```bash https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager ``` -------------------------------- ### Verify Ember CLI Installation Source: https://github.com/ember-learn/guides-source/blob/master/guides/v5.11.0/tutorial/part-1/orientation.md Checks the installed version of Ember CLI and related environment details (Node.js version, OS). Ensures the CLI is ready for use. ```shell $ ember --version ember-cli: 5.11.0 node: 18.20.4 os: linux x64 ``` -------------------------------- ### Serve and View Ember Application Source: https://github.com/ember-learn/guides-source/blob/master/guides/v1.11.0/ember-cli/index.md Navigates into the created application directory and starts the development server. The application can then be viewed at http://localhost:4200. ```bash cd my-app ember server ``` -------------------------------- ### Install Bower using npm Source: https://github.com/ember-learn/guides-source/blob/master/guides/v2.10.0/getting-started/index.md Installs Bower, a dependency manager for web projects, globally using npm. Bower is a requirement for managing additional dependencies in Ember projects. ```bash npm install -g bower ``` -------------------------------- ### GET /api/rentals Source: https://github.com/ember-learn/guides-source/blob/master/public/v3.10.0/tutorial/installing-addons/index.html Configures Mirage to respond to GET requests at the `/api/rentals` endpoint with a predefined list of rental data, adhering to the JSON-API specification. ```APIDOC ## GET /api/rentals ### Description This endpoint simulates fetching a list of rental properties. Mirage intercepts GET requests to `/api/rentals` and returns mock data. ### Method GET ### Endpoint /api/rentals ### Parameters #### Path Parameters None #### Query Parameters None #### Request Body None ### Request Example ```json { "example": "No request body for GET" } ``` ### Response #### Success Response (200) - **data** (array) - An array of rental objects, each conforming to the JSON-API specification. - **type** (string) - The resource type, always 'rentals'. - **id** (string) - A unique identifier for the rental. - **attributes** (object) - Contains the properties of the rental. - **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'). - **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." } } ] } ``` ``` -------------------------------- ### Create a New Ember Application Source: https://github.com/ember-learn/guides-source/blob/master/guides/v5.1.0/getting-started/quick-start.md Creates a new Ember application with the specified name and language. This command sets up a new directory and initializes a new Ember project with all necessary configurations. ```bash ember new ember-quickstart --lang en ``` -------------------------------- ### Start Ember development server Source: https://github.com/ember-learn/guides-source/blob/master/guides/v5.11.0/getting-started/quick-start.md Navigates into the newly created Ember application directory and starts the development server. The server provides live reloading and serves the application on `http://localhost:4200/`. Press Ctrl-C in the terminal to stop the server. ```bash cd ember-quickstart npm start ``` -------------------------------- ### Verify Ember CLI Installation Source: https://github.com/ember-learn/guides-source/blob/master/guides/v5.5.0/tutorial/part-1/orientation.md Checks if Ember CLI has been installed successfully by displaying its version information. This command is useful for confirming the installation and troubleshooting potential issues. ```shell $ ember --version ember-cli: 5.5.0 node: 18.19.0 os: linux x64 ``` -------------------------------- ### Ember Template with Action Handling Source: https://github.com/ember-learn/guides-source/blob/master/public/v4.1.0/getting-started/quick-start/index.html Demonstrates how to handle click events in an Ember.js template using the 'on' modifier and the 'fn' helper to pass arguments to actions. This example shows passing a 'person' object to the 'showPerson' action. ```handlebars ``` -------------------------------- ### Start Ember Development Server Source: https://github.com/ember-learn/guides-source/blob/master/public/v3.20.0/tutorial/part-1/orientation/index.html Starts the Ember.js development server, which compiles the application and serves it locally. It also enables live reloading for instant updates on file changes. Accessed via http://localhost:4200. ```shell ember server # or ember s ``` -------------------------------- ### Create and Navigate Ember Project Source: https://github.com/ember-learn/guides-source/blob/master/public/v3.21.0/tutorial/part-1/orientation/index.html Commands to create a new Ember.js project, navigate into the project directory, and start the development server. Assumes Node.js and npm are installed. ```bash cd super-rentals npm start ``` ```bash cd super-rentals ``` -------------------------------- ### Start Ember Development Server Source: https://github.com/ember-learn/guides-source/blob/master/guides/v2.1.0/getting-started/first-app.md This command starts the Ember development server, which provides features like live reloading and a mock server for testing. Navigate to http://localhost:4200 to view your application in the browser. The server rebuilds the app automatically on file changes. ```bash cd my-new-appember server ``` -------------------------------- ### Start Ember Development Server Source: https://github.com/ember-learn/guides-source/blob/master/guides/release/getting-started/quick-start.md Navigates into the application directory and starts the Ember development server. This command builds the application and serves it locally, typically at http://localhost:4200/, allowing for live reloading during development. ```bash cd ember-quickstart npm start ``` -------------------------------- ### Configure Neovim LSP with Mason Example Source: https://github.com/ember-learn/guides-source/blob/master/guides/v5.10.0/code-editors/index.md This snippet points to an example configuration for Neovim's Mason plugin, demonstrating how to manage LSP servers and integrate them into your workflow. This setup is crucial for features like code completion and linting. ```directory https://github.com/NullVoxPopuli/dotfiles/tree/main/home/.config/nvim ``` -------------------------------- ### Example nvim-treesitter Configuration for Glimmer Source: https://github.com/ember-learn/guides-source/blob/master/guides/v5.10.0/code-editors/index.md This is an example configuration snippet for nvim-treesitter to enable Glimmer syntax highlighting. It demonstrates how to include 'glimmer' in the list of parsers to install. ```lua { 'nvim-treesitter/nvim-treesitter', build = ':TSUpdate', config = function() require('nvim-treesitter.configs').setup { ensure_installed = { 'glimmer' }, highlight = { enable = true, }, } end, } ``` -------------------------------- ### Ember.js Action Handling with `fn` Helper Source: https://github.com/ember-learn/guides-source/blob/master/public/v3.23.0/getting-started/quick-start/index.html This Handlebars template snippet demonstrates how to pass arguments to an Ember.js action using the `fn` helper. Instead of directly passing the action to the `on` modifier, `fn` allows you to pre-configure the action with specific arguments, such as a `person` object in this example. ```handlebars ``` -------------------------------- ### Create New Ember Application Source: https://github.com/ember-learn/guides-source/blob/master/guides/v2.10.0/getting-started/quick-start.md Creates a new Ember.js application named 'ember-quickstart'. This command scaffolds a new project with a development server, template compilation, minification, and ES2015 support. ```bash ember new ember-quickstart ``` -------------------------------- ### Generate New Ember.js Project with Rails Template Source: https://github.com/ember-learn/guides-source/blob/master/guides/v1.10.0/wip/rails.md This command generates a new Ruby on Rails project using a specified template for Ember.js applications. The template handles gem installations, directory structure, and initial controller/route setup. ```bash rails new photoblog -m http://emberjs.com/template.rb ``` -------------------------------- ### GET /api/rentals Source: https://github.com/ember-learn/guides-source/blob/master/public/v2.18.0/tutorial/installing-addons/index.html This endpoint simulates fetching a list of rentals. Mirage intercepts this GET request and returns a predefined JSON payload containing rental data. ```APIDOC ## GET /api/rentals ### Description Simulates fetching a list of rentals. Mirage intercepts this GET request and returns a predefined JSON payload containing rental data. ### Method GET ### Endpoint /api/rentals ### Parameters #### Query Parameters None #### Request Body None ### Request Example (No request body for GET requests) ### Response #### Success Response (200) - **data** (array) - An array of rental objects, each conforming to the JSON-API specification. - **type** (string) - The resource type, always 'rentals'. - **id** (string) - The unique identifier for the rental. - **attributes** (object) - Contains 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). - **bedrooms** (number) - The number of bedrooms. - **image** (string) - The URL of the rental's image. #### Response Example { "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" } }, { "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" } }, { "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" } } ] } ``` -------------------------------- ### Update Application Template in Ember.js Source: https://github.com/ember-learn/guides-source/blob/master/public/v3.24.0/getting-started/quick-start/index.html Modifies the main application template file in an Ember.js project. This example shows how to update the `application.hbs` file to change the content displayed on the default page. It's a basic HTML structure for demonstration. ```handlebars

Welcome to Ember!

This is your application template.

``` -------------------------------- ### Install PhantomJS Globally with npm Source: https://github.com/ember-learn/guides-source/blob/master/guides/v1.13.0/getting-started/index.md Installs PhantomJS globally using npm. PhantomJS is recommended for running command-line tests without an open browser. Requires Node.js and npm. ```bash npm install -g phantomjs ``` -------------------------------- ### Run Ember Development Server Source: https://github.com/ember-learn/guides-source/blob/master/guides/v2.0.0/getting-started/first-app.md Starts the Ember CLI development server. This server watches for file changes, automatically rebuilds the application, and provides a live-reload experience for development. It also includes a mock server for testing. ```bash cd my-new-app ember server ``` -------------------------------- ### Build Ember App for Production Source: https://github.com/ember-learn/guides-source/blob/master/guides/v2.10.0/getting-started/quick-start.md This command builds the Ember application for the production environment, optimizing assets like JavaScript, templates, CSS, and images for deployment. ```bash ember build --env production ``` -------------------------------- ### Run Ember.js development server Source: https://github.com/ember-learn/guides-source/blob/master/guides/v1.12.0/getting-started/index.md Navigates into the application directory and starts the Ember.js development server. You can then access your application at http://localhost:4200. ```bash cd my-appember server ``` -------------------------------- ### Generate Route and Component (Ember CLI) Source: https://github.com/ember-learn/guides-source/blob/master/public/v4.1.0/getting-started/quick-start/index.html Commands to generate a new route and a new component using the Ember CLI. These commands automate the creation of necessary files like templates, route handlers, and tests. ```bash ember generate route scientists ``` ```bash ember generate component people-list ``` -------------------------------- ### Ember application template Source: https://github.com/ember-learn/guides-source/blob/master/public/v4.1.0/getting-started/quick-start/index.html Defines the main application template for an Ember app. This file, `application.hbs`, contains the core HTML structure that is always rendered. ```handlebars

PeopleTracker

``` -------------------------------- ### Ember.js `Promise` chaining with `.then()` and `.catch()` Source: https://github.com/ember-learn/guides-source/blob/master/public/v3.11.0/getting-started/js-primer/index.html Provides an example of chaining Promises in Ember.js using `.then()` to handle sequential asynchronous operations, such as fetching records and their relationships. Includes `.catch()` for error handling. ```javascript store.findRecord('person', 1).then(function(person) { // Do something with person when promise is resolved. person.set('name', 'Tom Dale'); }); ``` ```javascript store.findRecord('person', 1).then(function(person) { return person.get('post'); //get all the posts linked with person. }).then(function(posts) { myFirstPost = posts.get('firstObject'); //get the first post from collection. return myFirstPost.get('comment'); //get all the comments linked with myFirstPost. }).then(function(comments) { // do something with comments return store.findRecord('book', 1); //query for another record }).catch(function(err) { //handle errors }) ``` -------------------------------- ### JavaScript Component Definition (Conceptual) Source: https://github.com/ember-learn/guides-source/blob/master/public/v3.7.0/getting-started/core-concepts/index.html Outlines the structure of an Ember component, comprising a Handlebars template for UI and a JavaScript file for behavior. This example conceptually describes a component like 'rental-tile' which might handle user interactions like hiding/showing content. ```javascript // Conceptual JavaScript for a component // Example: rental-tile component // Component's template (Handlebars) might look like: //
// {{#if this.isImageVisible}} // Rental Image // {{/if}} // //
// Component's JavaScript would define behavior, e.g.: // class RentalTileComponent extends Component { // @tracked isImageVisible = true; // @tracked imageUrl = '/path/to/image.jpg'; // // toggleImage() { // this.isImageVisible = !this.isImageVisible; // } // } ``` -------------------------------- ### GET /api/rentals Source: https://github.com/ember-learn/guides-source/blob/master/public/v3.11.0/tutorial/installing-addons/index.html This endpoint simulates fetching a list of rental properties. Mirage intercepts GET requests to `/api/rentals` and returns predefined JSON data, mimicking a backend API response. ```APIDOC ## GET /api/rentals ### Description Simulates fetching a list of rental properties. Mirage intercepts GET requests to `/api/rentals` and returns predefined JSON data, mimicking a backend API response. ### Method GET ### Endpoint /api/rentals ### Parameters #### Query Parameters None #### Request Body None ### Response #### Success Response (200) - **data** (array) - An array of rental objects, each conforming to the JSON-API specification. #### 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." } } ] } ``` ``` -------------------------------- ### Classic Ember `get`/`set` Usage Example Source: https://github.com/ember-learn/guides-source/blob/master/public/v3.16.0/upgrading/current-edition/tracked-properties/index.html Provides a fundamental example of how Ember's classic `get` and `set` methods were used to access and update properties. In classic Ember, all property interactions had to go through these methods to ensure proper change tracking. ```javascript import { get, set } from '@ember/object'; let image = {}; set(image, 'width', 250); set(image, 'height', 500); console.log(get(image, 'width')); // Output: 250 console.log(get(image, 'height')); // Output: 500 ``` -------------------------------- ### Contributing Guide Example Link Source: https://github.com/ember-learn/guides-source/blob/master/public/v4.2.0/contributing/index.html This example provides a link to a specific repository's contributing guide, which details how to edit files, format commit messages, and run linting and testing procedures. ```html contributing guide for Ember.js ``` -------------------------------- ### Create a New Ember Application Source: https://github.com/ember-learn/guides-source/blob/master/guides/release/getting-started/quick-start.md Generates a new Ember application with the specified name and language. This command sets up a new directory with all the necessary files and configurations for an Ember project. ```bash ember new ember-quickstart --lang en ``` -------------------------------- ### Create Ember Project and Navigate Source: https://github.com/ember-learn/guides-source/blob/master/public/v3.23.0/tutorial/part-1/orientation/index.html Initializes a new Ember project with 'ember new' and then navigates into the project directory. Assumes Node.js and npm are installed. ```bash create tests/unit/.gitkeep create vendor/.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! This should have created a new folder for us called `super-rentals`. We can navigate into it using the `cd` command. $ cd super-rentals ``` -------------------------------- ### Neovim LSP Setup with Mason.nvim Source: https://github.com/ember-learn/guides-source/blob/master/guides/v5.11.0/code-editors/index.md Demonstrates a configuration example for setting up native LSP support in Neovim using Mason.nvim for easy installation and management of language servers, linters, and formatters. ```lua -- Example Lua configuration snippet for Mason.nvim and LSP -- Refer to the provided GitHub link for the full configuration context. -- For instance: -- require('mason').setup() -- require('mason-lspconfig').setup { ensure_installed = { 'ember' } } ``` -------------------------------- ### Contributing Guide Link Example Source: https://github.com/ember-learn/guides-source/blob/master/public/v4.9.0/contributing/index.html This example shows how to link to a specific repository's contributing guide. It emphasizes following the contributing guide for file edits, commit messages, linting, and testing. ```markdown Please follow the contributing guide in the specific repo. (Here is an example of the [contributing guide for Ember.js](https://github.com/emberjs/ember.js/blob/master/CONTRIBUTING.md).) The contributing guide may further describe how you can edit files, commit messages, and run linting and testing. ``` -------------------------------- ### Navigate and Start Ember Project Source: https://github.com/ember-learn/guides-source/blob/master/public/v3.15.0/tutorial/part-1/orientation/index.html Navigates into the newly created project directory and starts the Ember development server. The server compiles the app and serves it locally. ```shell cd super-rentals npm start ``` -------------------------------- ### Create New Ember App with Ember CLI Source: https://github.com/ember-learn/guides-source/blob/master/guides/v2.0.0/getting-started/first-app.md Initializes a new Ember.js project. This command creates a new directory with the specified app name and sets up the basic project structure and dependencies for an Ember application. ```bash ember new my-new-app ``` -------------------------------- ### Install Ember Addon - Ember CLI Source: https://github.com/ember-learn/guides-source/blob/master/public/v3.9.0/tutorial/installing-addons/index.html Installs a specified Ember addon into your project. This command fetches the addon from npm, adds it to your project's dependencies, and performs any necessary setup. It's crucial to restart the Ember server after installation for changes to take effect. ```bash ember install ember-cli-tutorial-style ``` -------------------------------- ### Ember Integration Test Setup Source: https://github.com/ember-learn/guides-source/blob/master/public/v3.15.0/tutorial/part-2/provider-components/index.html Provides a basic setup for an Ember integration test using `qunit`, `setupRenderingTest`, `render`, and `fillIn` from `@ember/test-helpers`, along with `hbs` for template compilation. ```javascript import { module, test } from 'qunit'; import { setupRenderingTest } from 'ember-qunit'; import { render, fillIn } from '@ember/test-helpers'; import { hbs } from 'ember-cli-htmlbars'; module('Integration | Component | rentals', function(hooks) { setupRenderingTest(hooks); // Tests will go here ``` -------------------------------- ### Ember.js application template Source: https://github.com/ember-learn/guides-source/blob/master/public/v4.10.0/getting-started/quick-start/index.html The content of the main application template file in an Ember.js project. This file defines the structure of the HTML that is always displayed. ```handlebars

Welcome to Ember!

This is your first Ember application.

``` -------------------------------- ### Ember Component with Click Action Source: https://github.com/ember-learn/guides-source/blob/master/public/v3.0.0/getting-started/quick-start/index.html An Ember component template that adds a button next to each person's name. Clicking the button triggers a 'showPerson' action, passing the person's data to the action handler. ```handlebars

{{title}}