A step-by-step guide to setting up a website with Ember.

easy-ember.md

Initial Setup

1. Install Ember - npm install -g ember-cli@3.4.4
2. Create a new app - ember new my-app
3. Change to the app directory - cd my-app
4. Install Sass support - ember install ember-cli-sass
5. Change the app.css file to app.scss - git mv app/styles/app.css app/styles/app.scss
6. Start your server on the first available port - ember s -p 0
7. Confirm that everything looks ok in your browser. You should see the "Congratulations, you made it!" message on the home page
8. Stop your server in your terminal window by pressing CTRL + C
9. Uninstall the ember-welcome-page addon - npm uninstall ember-welcome-page --save-dev
10. Re-start your server on the first available port- ember s -p 0 (hint: you could make it an alias)
11. Confirm that you see a completely blank page in the browser now.

Adding Content

Create Pages

1. Make a list of the pages you want to generate on your website. For the purposes of this tutorial, we'll create three pages: the home page, an accessibility for designers page, and an accessibilty for developers page.
2. Create the home page- ember generate route index
3. Create the "accessibility for designers" page- ember generate route accessibility/designers
4. Finally, create the "accessibility for developers" page - ember generate route accessibility/developers

Observe

• If you look at your terminal, you'll see that the ember generate command created a few files for you (just absorb this information for now):
• a file in app/routes
• a file in app/templates
• a test in tests/unit/routes
• If you wanted to, you could go to your browser and check the URLs that you just generated by adding /accessibility/designers to the end of the localhost URL. You'd see blank pages there but you could navigate to them, and you didn't have to re-start the server to do it.

Add Content - Site Header

1. Open app/templates/application.hbs and remove lines 1-3. There should only be an {{outlet}} in the file.
2. Add the site header to the application.hbs file above the {{outlet}} -

<header>
  <nav>
    <ul>
      <li>Practical Accessibility</li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </nav>
</header>

3. Add the site links for the navbar. In Ember it looks like this: {{link-to "Words to be a link" "route.nestedroute"}} so the end result will look something like this:

<header>
  <nav>
    <ul>
      <li>Practical Accessibility</li>
      <li>{{link-to "Home" "index"}}</li>
      <li>{{link-to "For Designers" "accessibility.designers" }}</li>
      <li>{{link-to "For Developers""accessibility.developers"}}</li>
    </ul>
  </nav>
</header>

4. Save the file and navigate to your browser, observing again that you didn't have to do anything extra after you saved your file. The server reloaded the site automatically because it noted the changed file. You'll see the unstyled list in the browser. If you click on the links, you'll see that you navigate to all of those pages, and they all have the header.

5. You could also repeat this section to add a footer to the site. Anything added to the app/templates/application.hbs file will load on all pages in the website.

Add Content to the Pages

1. Open the app/templates/index.hbs - you'll see that it just has {{outlet}} in it for now.
2. Add whatever HTML you want there. No, really. Add some.
3. Save, and open your browser. You'll see all of the native HTML content on your browser window, in between the header and the footer.
4. Observe again that you didn't have to reload the server or refresh the browser. Ember did that for you. Warning: at this time, you may start to experience giddy feelings. This feeling may be more or less intense, depending on your level of irritation with things like gulp, grunt, webpack and the like. Other feelings may include overwhelming relief, varied levels of excitement, and general happiness.

Repeat the steps for the other pages you created (in this case, app/templates/accessibility/designers.hbs and app/templates/accessibility/developers.hbs).

Adding Styles

Ok, so the content is there, but it's not very pleasant to look at. We can change that.

1. Open up the app/styles/app.scss file.
2. Write css/scss/sass. If you used scss, adding some default body styling and updating the header style a little bit could look something like this:

* {
  margin: 0;
  padding: 0;
}
*, *:after {
  box-sizing: border-box;
}
body {
  font-family: sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

header {
  border-bottom: 1px solid #aeaeae;

  nav {

    ul {
      align-items: center;
      display: flex;
      flex-flow: row wrap;
      list-style: none;

      li {
        display: flex;
        width: 100%;
        @media screen and (min-width:992px) {
          width: auto;
        }

        a {
          padding: 1em;

          &:hover {
            background-color: aliceblue;
          }
        }
      }
    }
  }
}

3. Save it and navigate to the browser. See that styles have been updated. Note that again, you didn't have to reload anything. Feel happy.

Accessibility

1. Open up the app/index.html file
2. On line 2, add the default site language to the HTML tag - English would look like this: <html lang="en">
3. If you wanted even more awesome feels right now, navigate to your browser. Inspect an element on the page and run the aXe browser extension. Enjoy the satisfaction of seeing the "congratulations!" message.