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).
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:
- 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 fileprepare-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
fromindex.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 2Add a new bundle
materialize-bundle.js
toaurelia.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.