Time to practice!

It's time to start coding! At this point, we have our application created and running, preconfigured to use SASS as CSS preprocessor, and integrated with the Aurelia Materialize library to follow good design practices of Material Design. Now we need to define our layout. It will be very basic at this time and across the application growing, our developed components can be improved and refactorized.

First, we need to access our root folder application; once inside, we just need to type the following command:

au run --watch

Next, we open our favorite browser's window, which should look something like this:

Now, let's create our main layout. Inside the src folder, we will create a folder named layout. Inside this folder, to subfolders: header and menu:

• ./src > layout > header >: Here, we will create an HTML file for view and JS file for view-model. Both files are called app-header
• ./src > layout > menu >: Same way as the header, both files will be called app-menu...