# 3.2 Setup

Most people like explanations in the context of doing what is just being explained. So let's do something very simple as the first step in showing how to use Materialize bridge. We will add several interesting pages rendering Materialize controls to the well known **Aurelia Skeleton Navigation**, a starter kit for building a standard navigation-style app with Aurelia. <br>

Get it from [**here**](https://github.com/aurelia/skeleton-navigation) and use the Download ZIP method so we do not have to deal with Git issues in this simple context. After downloading this application, extract the contents of the folder named **skeleton-esnext** into the folder conveniently named `skeleton-navigation-materialize` and use the instructions to build and run this app. Make sure that you already have the NodeJS, jspm and gulp installed, this application should be running after you execute <br>

**JSPM**:

```
npm install
jspm install
gulp watch
```

**webpack**:

```
npm install
npm start
```

\
&#x20;and subsequently browse to <http://localhost:9000>, resulting with the following: \
&#x20;<br>

![](http://i.imgur.com/kZ9dCzC.png)

\
\
&#x20;Image 1

Next, install aurelia-materialize-bridge as described in the [installation instructions](https://aurelia-ui-toolkits.gitbooks.io/materialize-bridge-docs/content/installation.html).

Now, we want to add four additional pages to this application. These pages will show Materialize **select**, **button**, **slider** and **collapsible** components:

![](http://i.imgur.com/Kmi4Y3r.png)

\
\
&#x20;Image 2 (collapsible shown rendered in its pop-out variant)

At this point verify that your `main.js` class looks like this: <br>

```javascript
import 'materialize-css';

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin('aurelia-materialize-bridge', bridge => bridge.useAll());

  aurelia.start()
    .then(au => au.setRoot('app'));
}
```

as this will ensure that the application we are about to augment from its original form, loads the Aurelia Materialize bridge (named bridge in the above code).

The next screenshot depicts the final UI for the application we are about to create, with four additional menubar items

* Materialize select
* Materialize button
* Materialize slider
* Materialize collapsible

![](http://i.imgur.com/kcCLiy7.jpg)

\
\
&#x20;Image 4\
&#x20;In order to clearly separate the added code from the original Aurelia Navigation Skeleton, the original project structure is changed to this:<br>

![](http://i.imgur.com/i4PJFWV.png)

\
\
&#x20;Image 5

\
&#x20;In the following articles you will fill the blue box.

As the last actions in this **Setup** section of the tutorial, you need to make the following changes, that are indicated in the **Modified code** section of Image 5 above

## File `app.html`

```markup
<template>
  <!-- the path below may even be "materialize-css/materialize.css", depending on your chosen materialize -->
  <require from="materialize-css/bin/materialize.css"></require>
  <require from="nav-bar.html"></require>

  <nav-bar router.bind="router"></nav-bar>

  <div class="page-host">
    <router-view></router-view>
  </div>
</template>
```

## File `main.js`

```javascript
import 'materialize-css';

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin('aurelia-materialize-bridge', bridge => bridge.useAll());

  aurelia.start()
    .then(au => au.setRoot('app'));
}
```

## File `nav-bar.html`

```javascript
<template bindable="router">
  <md-navbar fixed="true">
    <a href="#" class="brand-logo left"><span class="flow-text">${router.title}</span></a>
    <ul class="right hide-on-med-and-down">
      <li md-waves repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}">
        <a href.bind="row.href">${row.title}</a>
      </li>
    </ul>
  </md-navbar>
</template>
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://aurelia-ui-toolkits-1.gitbook.io/materialize-bridge-docs/3.-app-developers-tutorial/3.2-setup.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.