This repository has been archived by the owner on Jan 13, 2025. It is now read-only.
Closed
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
- follow the steps in the getting started guide starting from: "Using MDC Web with Sass and ES2015"
- do the steps in "Step 1: Webpack with Sass"
- ... 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”."
- 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:
- add to the file webpack.config.js the following section which configures webpack-dev-server:
devServer: {
static: {
directory: __dirname,
},
compress: true,
},
- 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"],
},
},
- add mode: "development",
module.exports = [
{
mode: "development",
..........................................................
- to enable ripple effect also add class
mdc-ripple-surface
to button .foo-button