Differences from the original version

Creating new application | GitHub | CM tutorial - Materialize edition

Differences from the original version

This document is not a tutorial on Materialize bridge base application development - check Aurelia Materialize Bridge to learn more. Similarly this document does not teach you about RequireJS module loader. Instead it will show you how to manually enhance the original Contact Manager tutorial to use Materialize bridge and render its view using Aurelia Materialize components, instead of using Bootstrap.

The source code for for the Contact Manager tutorial - Materialize edition is here, and this article will describe the details of changes applied to the application configuration files.

1. package.json

Add reference to aurelia-materialize-bridge and add three npm scripts (see below for a copy&paste source).

image

Copy the script lines from here:

  "scripts": {
    "materialize": "node node_modules/requirejs/bin/r.js -o tools/rbuild.js",
    "postinstall": "npm run materialize",
    "postmaterialize": "au prepare-materialize"
  },

These scripts create an AMD-compatible version of Materialize and copy fonts to your app root. See step 2 on how to obtain these scripts.

2. materialize-scripts

Creating an AMD-compatible Materialize version

Why is this necessary? - The original Materialize doesn't play well with AMD loaders. As Aurelia-CLI uses requirejs (an AMD loader), the sources have to be adopted to be able to run in an AMD environment.

Instead of using a fork, someone came up with a brilliant idea to create an AMD package of Materialize "on the fly". Someone else created a repo out of this idea.

• Create a folder tools in your project root:

image

• Copy the two files rbuild.js and materialize-css.js into that folder.

Creating a build task to copy fonts and CSS

Why is this necessary? - Aurelia-CLI doesn't support bundling fonts at the time of writing this article. When running the app without this change, you will get a bunch of 404 - not found errors when the loads css from Materialize.

These css files contain references to the Roboto font. If not copied, these fonts are still in node_modules which is not accessible by the application.

• Open the folder aurelia_project/tasks and create a file prepare-materialize.js

• Add the following content to this file:

import gulp from 'gulp';
import merge from 'merge-stream';
import * as project from '../aurelia.json';
import path from 'path';

export default function prepareMaterialize() {
  let source = 'node_modules/materialize-css';

  let taskCss = gulp.src(path.join(source, 'dist/css/materialize.min.css'))
    .pipe(gulp.dest(path.join(project.platform.output, '../', 'styles')));

  let taskFonts = gulp.src(path.join(source, 'dist/fonts/roboto/*'))
    .pipe(gulp.dest(path.join(project.platform.output, '../', 'fonts/roboto')));

  return merge(taskCss, taskFonts);
}

• load the copied materialize.min.css from index.html:

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

Here is what happens:

• the prepare-materialize task copies fonts to /fonts and css to /styles

• in materialize.css fonts are referenced by ../fonts/roboto-something.woff

• index.html should now reference the materialize.css from point 1

3. aurelia.json

• Set "stub: false in the loader section:

  Image 2

• Add a new bundle materialize-bundle.js to aurelia.json:

      {
        "name": "materialize-bundle.js",
        "dependencies": [
          "jquery",
          {
            "name": "materialize-css",
            "path": "../node_modules/materialize-css/dist",
            "main": "js/materialize.amd",
            "deps": [
              "jquery"
            ],
            "resources": [
              "css/materialize.css"
            ],
            "exports": "Materialize"
          },
          {
            "name": "aurelia-materialize-bridge",
            "path": "../node_modules/aurelia-materialize-bridge/dist/amd",
            "main": "index",
            "deps": [
              "jquery"
            ],
            "resources": [
              "**/*.{css,html}"
            ]
          }
        ]
      }

Note: the rest of the changes required to change the application rendering are of course specific to Aurelia Materialize components. Check the following files for details:

• contact-list replaced the original bootstrap list with a Materialize collection.

• contact-detail replaced the contact detail panel with a Materialize card

• app.html replaced bootstrap's nav-bar with a Materialize version

In the former two files the original content is still present for direct comparison.