Setup

In your local client-seitige-web-anwendungen directory create a new directory week07, which is the root directory we will use for this tutorial.

Before we start with Ember, it is necessary to mention that the package manager we use from now on, is yarn. You can use it almost like npm, some of the commands vary.

The first thing that needs to be done, is to initialize the project by typing

$ yarn init -y

into a terminal within the root directory. The -y flag is set to fill the package.json with default values, since it is overridden anyways in the next steps. Ember is installed, configured, compiled, and served from the command-line using the “ember-cli” package, which you should install by running

$ yarn add ember-cli

As you saw in week 1, npm installs all packages in the node_modules directory and any binary applications in the .bin directory. Yarn does the same thing. That means that whenever the tutorial asks you to run ember, you need to prefix that with node_modules/.bin/. Alternatively you can modify your path to include node_modules/.bin on your PATH:

$ export PATH="node_modules/.bin:$PATH"

Warning

This has security implications, as applications created in node_modules/.bin will be used instead of applications installed on your system. The level of risk is limited, as you have primary control over what you install, but it does increase the risk. Use at your own discretion.

With yarn, you can prefix the command by yarn in order to avoid messing with your path or typing the long prefix. The command is simply yarn ember <whatever>.

With the ember-cli application installed, we can now initialise a new ember application in the current directory:

$ yarn ember init

This will take a while, as ember creates the basic structure of an Ember application and then installs all dependencies via yarn. Allow the package.json to be overridden. If the installation of dependencies fails, you can always re-run it by running

$ yarn

The template Ember application is now ready to run:

$ yarn ember serve

Should you run into an error, check if the folder app/styles exists and the file app.css within it. If neither of these exist, create the file and rerun ember serve. You should now be able to access http://localhost:4200 and see the Ember landing page. If not, check the command-line for errors. The ember serve command actually does two things at the same time. First, it runs the server that you are accessing and second, whenever you make any changes in your source-code, it automatically rebuilds the application and reloads the page in the browser.

You can try this out by editing the file app/templates/application.hbs. This is the main application template and if you look at it, you will see that at the top it loads the Ember greeting component. Delete that bit of code and replace it with the following:

<h1>Athena - Study Portal</h1>

You will see that the application is immediately rebuilt with your change and the browser reloads and updates.

External Dependencies

In the first week’s tutorial we built and styled our application from scratch using CSS. While that is fine in principle, in general you should make use of existing CSS frameworks and also use a CSS pre-processor (such as SASS, which we will use) to cut down on the amount of code you have to write. In this tutorial we will use Bootstrap as the CSS framework, but there are others out there and they all have strengths and weaknesses.

Integrating external libraries generally requires a restart of the ember serve application, so at this point it is easiest to just stop it by pressing Ctrl+C.

Plugins-based External Dependencies

For Ember and Foundation there is a nice plugin that integrates one into the other. To install this plugin and get it to work we need to follow three steps. First, we need to install the Ember SASS compiler:

$ yarn add sass ember-cli-sass

Then, there are several ways to implement Bootstrap into the project. You can either install it via yarn:

$ yarn add bootstrap

Another way is to install the Ember plugin for Bootstrap that provides Bootstrap components and styles as well. However, as for the date of writing this tutorial, this plugin is still work in progress. You can add it by running:

$ yarn ember install ember-simple-bootstrap

Before you go on, check if you need to rename your app/styles/app.css to app.scss. Finally, if we wanted to make use of Bootstrap’s JavaScript functionality, we need to tell Ember. To do that, open the ember-cli-build.js and towards the top update the new EmberApp section so that it looks like this:

let app = new EmberApp(defaults, {
    // Add options here
)};
app.import('node_modules/bootstrap/dist/js/bootstrap.bundle.min.js');

We will, however, do not use built-in components or JavaScript provided by Bootstrap, but write our own instead. You will see that the styling of the <h1> element has updated. If it has not, then you should check your code and the command-line to see if there are any errors.

Non-plugin External Dependencies

Sometimes you need to integrate external dependencies that do not come packaged in a nice plugin. If you want to serve these from within your application, you should look at using the vendor directory and loading from there (or from yarn packages). For the simpler case where you wish to load something from an external web-location, you can simply load it from the app/index.html. Here we will use this to load an icon font from https://materialdesignicons.com, by adding the <link> tag at the top:

<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"/>

We can now test that the font icons are being loaded as intended by adding the following code into the app/templates/application.hbs:

<span class="mdi mdi-ember"/>

Cleanup

Before moving on, remove the <h1> and <span> from the app/templates/application.hbs so that it looks like this:

{{outlet}}