Setup¶

In order to add dynamic data to our application, we first need to create a new instance of the application. To do that, first create a new directory week08

$ mkdir ``week08``

and initialize yarn by running

$ yarn init -y

Then in that directory install ember, initialise the application, and add the bootstrap dependency:

$ yarn add ember-cli
$ yarn ember init
$ yarn add bootstrap sass ember-cli-sass

Now add app/styles/app.scss and start the ember application to test that all these steps were successful.

The next step is to copy over the code from the previous week. To do that, copy the week07/app directory into the week08 directory:

$ cp week07/app week08

The final step is to update the app/index.html file so that it loads the files built for the week08 project, by replacing all uses of “07” with “08” in the app/index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Week08</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content=""/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="stylesheet" href="https://cdn.materialdesignicons.com/2.8.94/css/materialdesignicons.min.css"/>

    {{content-for "head"}}

    <link integrity="" rel="stylesheet" href="{{rootURL}}assets/vendor.css"/>
    <link integrity="" rel="stylesheet" href="{{rootURL}}assets/week08.css"/>

    {{content-for "head-footer"}}
  </head>
  <body>
    {{content-for "body"}}

    <script src="{{rootURL}}assets/vendor.js"></script>
    <script src="{{rootURL}}assets/week08.js"></script>

    {{content-for "body-footer"}}
  </body>
</html>

It is possible, that you might have to change the import paths in both ‘’app/router.js’’ and ‘’app/app.js’’ to

import config from 'week08/config/environment';

and in ‘’app/config/environment.js’’ you should change the value of ‘’modulePrefix’’ accordingly, so it is ‘’week08’’ as well. Restart the ember server and test that the application still works before moving on to this week’s changes.

The last thing, we need to do in order to finish the setup and that is to refactor the navbar into a component. To do so, run

$ yarn ember generate component nav-bar

in your terminal, and then cut the elements from app/templates/application.hbs except for outlet and page-title and paste them into app/components/nav-bar.hbs. Then, call the component as an empty element in app/templates/application.hbs like this:

{{page-title "Athena"}}
  <NavBar />
{{outlet}}

We are now set up for the next steps.