Ember.js: Tutorial — Part 1: Orientation

Lessons

  1. Install Ember CLI
    1
  2. Create a new Ember
    2 app
  3. Start and stop development server
  4. Edit a file and live reload
  5. Work with HTML, CSS and assets

1. Install Ember CLI

1.1. Check version


2. Create a new Ember app

NOTE

  • new <app-name> creates a new Ember project
    • <app-name> is the project name
  • Most work happens in app/ directory

3. Start and stop development server

NOTE

  • Development server compiles the app and serves it to the browser
  • Visit localhost:4200 to see Ember's welcome page
  • Press ctrl+c to stop development server

4. Edit a file and live reload

4.1. Edit application template

NOTE

  • Development server features live reload that happens after a file is saved
  • Live reload tracks file changes to recompile the app and refresh the browser

4.2. Destroy application template

IMPORTANT

Delete application template to temporarily render index template later.


5. Work with HTML, CSS and assets

5.1. Generate index template

5.2. Edit index template

5.3. Download app stylesheet

5.4. Download teaching-tomster image

NOTE

  • By convention, styles are placed in app's styles/ directory
  • Other assets like images and fonts are placed in public/ directory
  • Re-visit localhost:4200 to see a new welcome page with Professor Tomster

References

Show Comments