search

Fuse-box 2.x

hashtag
Getting the plugin

In your project install the plugin via npm with the following command:

  $ npm install --save aurelia-materialize-bridge materialize-css

You will also need a fuse-box loader. At the moment, there are two that I know of:

This document will use the first since it's the official loader. But the second by arabsight is a good one as well. :-)

hashtag
Configure your app

  1. Make sure you use manual bootstrappingarrow-up-right. In order to do so open your index.html and locate the element with the attribute aurelia-app:

    <body aurelia-app="main">

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

     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

  2. Update main.js in your src folder with following content:

    import {Aurelia} from 'aurelia-framework';
import 'fuse-box-aurelia-loader';
import 'aurelia-bootstrapper';

export async function configure(aurelia: Aurelia) {
 aurelia.use
   .standardConfiguration()
   .developmentLogging();

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

 await aurelia.start();
 await aurelia.setRoot('app');
}

    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:

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

    At the end of this page is a full list of currently available options.

  3. Import css:

    <require from="materialize-css-styles/bin/materialize.css"></require>

  4. Configure Fuse-box:

    const { RawPlugin, FuseBox, HTMLPlugin, CSSPlugin } = require("fuse-box");

const fuse = FuseBox.init({
   homeDir: './src',
   output: './dist/$name.js',
   plugins: [
     CSSPlugin(),
     HTMLPlugin(),
     RawPlugin(['.css'])
   ],
   alias: {
     'jQuery': 'jquery',
   },
   shim: {
     jquery: {
         source: 'node_modules/jquery/dist/jquery.js',
         exports: '$'
     },
     // Materialize needs a shim here to be placed at the top of the bundle.
     // It's necessary because loading the module introduces side-effects
     // and it exports globals.
     'materialize-css': {
       source: 'node_modules/materialize-css/bin/materialize.js',
       exports: 'Materialize'
     }
   }
});

// Because we created a shim above, we need to bundle Materialize's CSS
// with a different name. Otherwise fuse-box will not bundle the CSS.
// So we trick fuse-box to load a css-only module by giving meaningless (space) instructions.
fuse.register('materialize-css-styles', {
 homeDir: 'node_modules/materialize-css',
 main: 'bin/materialize.css',
 instructions: ' '
});

// Register the bridge and its contents.
fuse.register('aurelia-materialize-bridge', {
 homeDir: 'node_modules/aurelia-materialize-bridge/dist/commonjs',
 main: 'index.js',
 instructions: '**/*.{html,css,js}'
});

fuse.bundle('app')
 .watch().cache(false)
 .instructions(`
   > main.ts
   + **/*.{ts,html,css}
   + aurelia-pal
   + aurelia-pal-browser
   + aurelia-framework 
   + aurelia-logging-console 
   + aurelia-templating-binding 
   + aurelia-templating-resources 
   + aurelia-event-aggregator 
   + aurelia-history-browser 
   + aurelia-templating-router
   + aurelia-materialize-bridge
   + materialize-css-styles
 `);

fuse.dev({ port: 4445, root: './' });
fuse.run();

  5. Add the bundle result to index.html

     <!DOCTYPE html>
 <html>
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Welcome to Aurelia with FuseBox</title>
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>

 <body aurelia-app="main">
     <script type="text/javascript" charset="utf-8" src="./dist/app.js"></script>
 </body>
 </html>

hashtag
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 tutorialarrow-up-right, based on Aurelia Skeleton navigation.

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

PreviousAurelia-CLINext3. App developers tutorial

Last updated