Skip to content
This repository has been archived by the owner on Jan 13, 2025. It is now read-only.

The getting started guide: issues #8066

Closed
@andreidiaconescu

Description

Bug report

I tried to follow the steps in the Getting Started guide (https://github.com/material-components/material-components-web/blob/master/docs/getting-started.md) but i was not able to access in the browser the url:
http://localhost:8080/
because i received an error:
Cannot GET /

Steps to reproduce

  1. follow the steps in the getting started guide starting from: "Using MDC Web with Sass and ES2015"
  2. do the steps in "Step 1: Webpack with Sass"
  3. ... and step by step reach the step where it says: "And open http://localhost:8080/ in a browser. You should see a blue “Hello World”."
  4. i get an error in the browser: "Cannot GET /"

Actual behavior

I get an error in the browser: "Cannot GET /"

Expected behavior

According to the Getting started guide i should see: a blue “Hello World"

Your Environment:

Software Version(s)
MDC Web did not reach that step, the error produces earlier
Browser Firefox
Operating System Ubuntu 20.04

Possible solution

I found a fix:

  1. add to the file webpack.config.js the following section which configures webpack-dev-server:
devServer: {
      static: {
        directory: __dirname,
      },
      compress: true,
},
  1. change the "babel-loader" from
      {
        test: /\.js$/,
        loader: 'babel-loader',
        query: {
          presets: ['@babel/preset-env'],
        },
      }

to

       {
          test: /\.js$/,
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"],
          },
        },
  1. add mode: "development",
module.exports = [
  {
    mode: "development",
..........................................................
  1. to enable ripple effect also add class mdc-ripple-surface to button .foo-button

Metadata

Assignees

No one assigned

    Labels

    Unresolved (Archived)Open and unresolved issues and PRs that were closed due to archiving the repository.bug

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions