Using Firebase, Material Design Components (MDC), and Node.js

Question

Overview

I'm working on a website (multi-page) for a friend and I've decided to use Google's Material Design Components (MDC) for the Web as the base of its styling. I would like for it to be hosted on Firebase, using Functions and Hosting.

I have been working on it for a little more than a week and have gotten to the point where I can use Node.js, Express, and EJS to render multiple pages, but I can't seem to understand how MDC would become functional in this environment.

Question

Have you seen this work before? If so, how was it done and where should I begin?

Side-Note

I have been able to get it to run locally using this quide. Here's the main files that make this work:

webpack.config.js

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',
                options: {
                    includePaths: ['./node_modules']
                }
            },
        ]
    }]
},
}];

index.html

<html>
<head>
    <link rel="stylesheet" href="bundle.css">
</head>
<body>
    <button class="foo-button mdc-button">
        Button
    </button>
</body>
</html>

package.json

{
  "name": "functions",
  "description": "Cloud Functions for Firebase",
  "scripts": {
    "lint": "eslint .",
    "serve": "firebase serve --only functions",
    "shell": "firebase functions:shell",
    "start": "webpack-dev-server",
    "deploy": "firebase deploy --only functions",
    "logs": "firebase functions:log"
  },
  "dependencies": {
    "@material/button": "^0.36.0",
    "firebase-admin": "~5.12.1",
    "firebase-functions": "^1.0.3"
  },
  "devDependencies": {
    "css-loader": "^0.28.11",
    "eslint": "^4.12.0",
    "eslint-plugin-promise": "^3.6.0",
    "extract-loader": "^2.0.1",
    "file-loader": "^1.1.11",
    "node-sass": "^4.9.0",
    "sass-loader": "^7.0.3",
    "webpack": "^3.12.0",
    "webpack-dev-server": "^2.11.2"
  },
  "private": true
}

app.scss

@import "@material/button/mdc-button";

.foo-button {
  @include mdc-button-ink-color(teal);
  @include mdc-states(teal);
}

This is a pretty vague description. Is there a specific problem you're running into? — Doug Stevenson, Jun 14 '18 at 20:46
I'm still not sure what you're asking. Isn't it just some JS and styling? — Dave Newton, Jun 14 '18 at 21:34
Unfortunately not in the case of hosting on Firebase. I reached around in their community Slack and found a helpful answer. I'm going to be using React instead - MDC has a React project configuration you can use. https://github.com/material-components/material-components-web-react — Jacob Brokaw, Jun 18 '18 at 13:38

score 1 · Accepted Answer · answered Jun 18 '18 at 13:44

1

A member of the Firebase Slack was able to point me in the right direction, so I am no longer in need of assistance. Provided is a link to a screenshot of what they suggested.

Sam Jackson's Response

Basically, I'm going to be using React instead of plain ol' Node.js. They seem to have developed a version of MDC for React that you can configure when creating a React project.

MDC React GitHub

answered Jun 18 '18 at 13:44

Jacob Brokaw

31
7

There still seems to be a conflict. MDC seems to need the server to be run with `webpack-dev-server` (the `npm start` command essentially runs this). However, when performing local testing with Firebase hosting, the example code says to run `firebase serve --only hosting`. How did you resolve the conflict? – Michael Osofsky Oct 13 '19 at 01:21
The answer to my question might be https://stackoverflow.com/a/39554878/2848676 where it basically says you don't use `webpack-dev-server`. Instead you essentially call `webpack` (via `npm run build`) which puts all the files in a place that `firebase serve` and `firebase deploy` know to look. Firebase knows to look there by configuration in `firebase.json`. – Michael Osofsky Oct 13 '19 at 01:36

Using Firebase, Material Design Components (MDC), and Node.js

Overview

Question

Side-Note

1 Answers1