Monterey User Manual
  • Introduction
  • What is Monterey
  • Quick guide through the User manual
  • Monterey and module loaders
  • Monterey future plans
  • Installing Monterey
  • Help system
    • Live tour
    • Tooltip based help
  • Features
    • App launcher
    • Aurelia-CLI
    • Dotnet
    • GistRun
    • Error logger
    • Gulp
    • JSPM manager
    • NPM manager
    • Preferences
    • Project info
    • Run
    • Support
    • Task manager
    • Terminal
    • Typings
    • Webpack
    • Workflow manager
  • Creating new applications
    • Aurelia-CLI
      • Default-ESNext
      • Default-TypeScript
      • Custom
    • skeleton-esnext-aspnetcore
    • skeleton-esnext-webpack
    • skeleton-esnext
    • skeleton-typescript-aspnetcore
    • skeleton-typescript-webpack
    • skeleton-typescript
    • GitHub
      • Contact manager tutorial
      • CM tutorial - KendoUI edition
        • Differences from the original version
      • CM tutorial - Materialize edition
        • Differences from the original version
  • Managing existing applications
  • Reaching support
Powered by GitBook
On this page
  • Differences from the original version
  • 1. package.json
  • 2. materialize-scripts
  • 3. aurelia.json
  1. Creating new applications
  2. GitHub
  3. CM tutorial - Materialize edition

Differences from the original version

PreviousCM tutorial - Materialize editionNextManaging existing applications

Last updated 7 years ago

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 to learn more. Similarly this document does not teach you about . Instead it will show you how to manually enhance the 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 , and this article will describe the details of changes applied to the application configuration files.

1.

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.

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.

  • Create a folder tools in your project root:

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

  • Set "stub: false in the loader section:

  • 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:

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

2.

Instead of using a fork, to create an AMD package of Materialize "on the fly". Someone else .

image

Copy the two files and into that folder.

3.

Image 2

replaced the original bootstrap list with a Materialize collection.

replaced the contact detail panel with a Materialize card

replaced bootstrap's nav-bar with a Materialize version

materialize-scripts
someone came up with a brilliant idea
created a repo out of this idea
rbuild.js
materialize-css.js
aurelia.json
contact-list
contact-detail
app.html
Aurelia Materialize Bridge
RequireJS module loader
original Contact Manager tutorial
here
package.json