This getting started guide walks you through how to install MDC Web Node modules, and bundle the Sass and JavaScript from those Node modules in your Webpack configuration.
Note: This guide assumes you have npm installed locally.
We’re going to use webpack-dev-server to demonstrate how webpack bundles our Sass and JavaScript. First create a package.json that looks like this:
{
"scripts": {
"start": "webpack-dev-server"
}
}You’ll need all of these Node dependencies:
- webpack: Bundles Sass and JavaScript
- webpack-dev-server: Development server
- sass-loader: Loads a Sass file and compiles it to CSS
- node-sass: Provides binding for Node.js to Sass, peer dependency to sass-loader
- css-loader: Resolves CSS @import and url() paths
- extract-loader: Extracts the CSS into a .css file
- file-loader: Serves the .css file as a public URL
You can install all of them by running this command:
npm install --save-dev webpack@3 webpack-dev-server@2 css-loader sass-loader node-sass extract-loader file-loader
Note: We recommend using Webpack 3, because we're still investigating using Webpack 4. We also recommend you use webpack-dev-server 2, because this works with Webpack 3.
In order to demonstrate how webpack bundles our Sass, you’ll need an index.html. This HTML file needs to include CSS. The CSS is generated by sass-loader, which compiles Sass files into CSS. The CSS is extracted into a .css file by extract-loader. Create this simple 'hello world' index.html:
<html>
<head>
<link rel="stylesheet" href="bundle.css">
</head>
<body>Hello World</body>
</html>And create a simple Sass file called app.scss:
body {
color: blue;
}Then configure webpack to convert app.scss into bundle.css. For that you need a new webpack.config.js file:
module.exports = [{
entry: './app.scss',
output: {
// This is necessary for webpack to compile
// But we never use style-bundle.js
filename: 'style-bundle.js',
},
module: {
rules: [{
test: /\.scss$/,
use: [
{
loader: 'file-loader',
options: {
name: 'bundle.css',
},
},
{ loader: 'extract-loader' },
{ loader: 'css-loader' },
{ loader: 'sass-loader' },
]
}]
},
}];To test your webpack configuration, run:
npm start
And open localhost:8080 from a browser. You should see a blue “Hello World”.
Now that you have webpack configured to compile Sass into CSS, let's include the Sass files for the Material Design button. First install the Node dependency:
npm install @material/button
We need to tell our app.scss to import the Sass files for @material/button. We can also use Sass mixins to customize the button. Replace your “hello world” version of app.scss with this code:
@import "@material/button/mdc-button";
.foo-button {
@include mdc-button-ink-color(teal);
@include mdc-states(teal);
}@material/button has documentation about the required HTML of a button. Update your index.html to include this HTML, and add the foo-button class onto the element:
<body>
<button class="foo-button mdc-button">
Button
</button>
</body>You also need to configure the sass-loader to understand the @material syntax. Update your webpack.config.js by changing { loader: 'sass-loader' } to:
{
loader: 'sass-loader',
options: {
importer: function(url, prev) {
if(url.indexOf('@material') === 0) {
var filePath = url.split('@material')[1];
var nodeModulePath = `./node_modules/@material/${filePath}`;
return { file: require('path').resolve(nodeModulePath) };
}
return { file: url };
}
}
}Now run npm start again and open localhost:8080. You should see the a Material Design button!
We need to configure webpack to bundle ES2015 JavaScript into standard JavaScript, through babel. You’ll need all of these dependencies:
- babel-core
- babel-loader: Compiles JavaScript files using babel
- babel-preset-es2015: Preset for compiling es2015
You can install all of them by running this command:
npm install --save-dev babel-core babel-loader babel-preset-es2015
In order to demonstrate how webpack bundles our JavaScript, you’ll need to update index.html to include JavaScript. The JavaScript file is generated by babel-loader, which compiles ES2015 files into JavaScript. Add this script tag to index.html:
<script src="bundle.js" async></script>And create a simple ES2015 file called app.js:
console.log('hello world');Then configure webpack to convert app.js into bundle.js. For that you need to add this code to the webpack.config.js file:
module.exports.push({
entry: "./app.js",
output: {
filename: "bundle.js"
},
module: {
loaders: [{
test: /\.js$/,
loader: 'babel-loader',
query: {
presets: ['es2015']
}
}]
},
});Now run npm start again and open localhost:8080. You should see a “hello world” in the console.
Now that you have webpack configured to compile ES2015 into JavaScript, let's include the ES2015 files from the Material Design ripple. First install the Node dependency:
npm install @material/ripple
We need to tell our app.js to import the ES2015 file for @material/ripple. You also need to initialize an MDCRipple with a DOM element. Replace your 'hello world' version of app.js with this code:
import {MDCRipple} from '@material/ripple';
const ripple = new MDCRipple(document.querySelector('.foo-button'));Now run npm start again and open localhost:8080. You should see a Material Design ripple on the button!
TODO: Write a getting started guide for our CDN users