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. .. _yarn: https://yarnpkg.com/ The first thing that needs to be done, is to initialize the project by typing .. code-block:: console $ 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 .. code-block:: console $ 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: .. code-block:: console $ 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 ``. With the ember-cli application installed, we can now initialise a new ember application in the current directory: .. code-block:: console $ 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 .. code-block:: console $ yarn The template Ember application is now ready to run: .. code-block:: console $ 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: .. code-block:: html

Athena - Study Portal

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. .. _`SASS`: https://sass-lang.com/ .. _`Bootstrap`: https://getbootstrap.com/ 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: .. code-block:: console $ yarn add sass ember-cli-sass Then, there are several ways to implement Bootstrap into the project. You can either install it via ``yarn``: .. code-block:: console $ 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: .. code-block:: console $ 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: .. code-block:: js 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 ``

`` 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 ```` tag at the top: .. code-block:: html We can now test that the font icons are being loaded as intended by adding the following code into the ``app/templates/application.hbs``: .. code-block:: html Cleanup ------- Before moving on, remove the ``

`` and ```` from the ``app/templates/application.hbs`` so that it looks like this: .. code-block:: html {{outlet}}