Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

The getting started guide: issues #8066

Open
andreidiaconescu opened this issue Apr 4, 2023 · 1 comment
Open

The getting started guide: issues #8066

andreidiaconescu opened this issue Apr 4, 2023 · 1 comment
Labels

Comments

@andreidiaconescu
Copy link

andreidiaconescu commented Apr 4, 2023

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
@andreidiaconescu andreidiaconescu changed the title The getting started guide fails to start The getting started guide: issues Apr 4, 2023
@home-gihub
Copy link

what do you mean by "add to the file webpack.config.js the following section"

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants