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``
.. code-block:: console
$ mkdir ``week08``
and initialize ``yarn`` by running
.. code-block:: console
$ yarn init -y
Then in that directory install ember, initialise the application, and add the bootstrap dependency:
.. code-block:: console
$ 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:
.. code-block:: console
$ 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``:
.. code-block:: html
Week08
{{content-for "head"}}
{{content-for "head-footer"}}
{{content-for "body"}}
{{content-for "body-footer"}}
It is possible, that you might have to change the import paths in both ''app/router.js'' and ''app/app.js'' to
.. code-block:: js
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
.. code-block:: console
$ 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:
.. code-block:: handlebars
{{page-title "Athena"}}
{{outlet}}
We are now set up for the next steps.