> For the complete documentation index, see [llms.txt](https://aurelia-ui-toolkits-1.gitbook.io/materialize-bridge-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://aurelia-ui-toolkits-1.gitbook.io/materialize-bridge-docs/master/2.-installation/aurelia-cli.md).

# Aurelia-CLI

First of all, webpack is highly recommended. The amount of fiddling with the new CLI version `0.33.1` is just annoying.

Not convinced? Keep reading and compare to webpack installation procedure.

## Scaffolding the app

Make sure you have at least version `0.32.0` of Aurelia-CLI installed.

**Note**: `0.33.1` requires some additional configuration. Make sure you follow the instructions!

```
$ au new
```

Choose Aurelia options as you see fit. In the last step, choose to install all dependencies.

## Getting the plugin

In your project install the following via CLI (**execution order matters!**):

```
$ au install jquery
$ au install tslib
$ au install materialize-amd  
$ au install aurelia-materialize-bridge
```

The `materialize-amd` is an AMD compatible build of Materialize-CSS. Installing it with `au new` also copies CSS and font files to the `styles` folder.

**Note:** Due to a change in Materialize's loading order ([probably this commit](https://github.com/Dogfalo/materialize/commit/82fae629b04a426e0fc5cf3a005e61ddebaa05e4)), version v0.100.2 won't work with Aurelia CLI RequireJS. Therefore, the maximum (and in fact the only) AMD build is v0.100.1

If you need an AMD build of an earlier version create and issue in the [repository](https://github.com/aurelia-ui-toolkits/materialize-amd)

## Configure your app

1. For Material Design icons include this in your `index.html` head section:

   ```markup
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   ```
2. Add this to `main.js` in your `src` folder:

   ```javascript
   aurelia.use.plugin('aurelia-materialize-bridge', b => b.useAll().preventWavesAttach());
   ```

   **Note:** The above shows how to use all available controls at once. If you choose to pick which you'd like to use, you can `use` single components like this:

   ```javascript
   .plugin('aurelia-materialize-bridge', bridge => {
    bridge
      .useButton()
      .useCollapsible()
      .useModal()
      .useTabs()
      .useWaves().preventWavesAttach();
   });
   ```

   At the end of this page is a full list of currently available options.\
   **Important:** `preventWavesAttach` is only needed with CLI to prevent dimmed buttons. See this [issue ](https://github.com/aurelia-ui-toolkits/aurelia-materialize-bridge/issues/168)for details.
3. Add this to your `index.html`

   ```markup
   <link rel="stylesheet" href="styles/css/materialize.min.css">
   ```

   **Note**: The CLI cannot bundle fonts like webpack, plus `materialize.css` file references the fonts by relative paths (eg "../fonts/roboto/Roboto.ttf").

   If you `require` `materialize.css` from HTML the relative path is interpreted to be relative to the path specified in `aurelia.json`. While in reality, fonts still reside in `node_modules`, requirejs looks for fonts in `materialize-amd/fonts/roboto` (from evaluation of `materialize-amd/css/../fonts/roboto`).

   You can still use the following in `app.html`

   ```markup
   <require from="materialize-amd/css/materialize.css"></require>
   ```

   but in this case you will have to manually copy fonts to `materialize-amd` folder in the root of your project.
4. **When using version** `0.33.1` **of the CLI** add "node\_modules/jquery/dist/jquery.js" to the `prepend` section of the `vendor-bundle.js` configuration in the `aurelia.json` file. Without it your project won't run, complaining about missing `$` declaration and weirdly loading modules from `node_modules` directly. Remove `jquery` from `dependencies` section.
5. **When using version** `0.33.1` **of the CLI** add "node\_modules/materialize-amd/dist/js/materialize.amd.js" **to the end of** `prepend` section of the `vendor-bundle.js` configuration in the `aurelia.json` file - after `jquery` and `require`. Also remove `materialize-amd` configuration from `dependencies` section.

   **Note:** This is necessary because dependencies loading order is broken again in CLI (duh!). If `materialize-amd` is left in there it will add functions to the prepended `jquery` but the bridge will try to use `jquery` from dependencies.

## You are done!

It is now possible to drop some custom-elements into your DOM. See the other pages on this website for detailed information on how to do this.

**Now you might want to do our** [**app developers tutorial**](https://aurelia-ui-toolkits.gitbooks.io/materialize-bridge-docs/content/app_developers_tutorial/introduction.html)**, based on Aurelia Skeleton navigation.** <br>

As described above, here is a full list of available options:

```javascript
aurelia.use.plugin('aurelia-materialize-bridge', bridge => {
  bridge
    .useAutoComplete()
    .useBadge()
    .useBreadcrumbs()
    .useBox()
    .useButton()
    .useCard()
    .useCarousel()
    .useCharacterCounter()
    .useCheckbox()
    .useChip()
    .useCollapsible()
    .useCollection()
    .useColors()
    .useDatePicker()
    .useDropdown()
    .useFab()
    .useFile()
    .useFooter()
    .useInput()
    .useModal()
    .useNavbar()
    .usePagination()
    .useParallax()
    .useProgress()
    .usePushpin()
    .useRadio()
    .useRange()
    .useScrollfire()
    .useScrollSpy()
    .useSelect()
    .useSidenav()
    .useSlider()
    .useSwitch()
    .useTabs()
    .useTooltip()
    .useTransitions()
    .useWaves()
    .useWell();
});
```