question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

None of pages included in demo folder are working.

See original GitHub issue

Steps to reproduce.

1- Use Clone or download button on github page to download a copy of repository. 2- Extract it to a folder of your choice 3- Open any page included in demos folder (e.g. buttons.html)

    Inspecting the file shows that following references:
    assets/demo-styles.css.js  (does not exists in this repository)
    assets/material-components-web.css.js (does not exists in this repository)
    /images/logo_components_color_2x_web_48dp.png (Absolute path, even browsing to this page hoste in a folder in webserver will break the page)
    https://fonts.googleapis.com/css?  (external reference)
    https://fonts.googleapis.com/icon? (external reference)

I’m don’t have npm, bower, travis or millions of different download managers which each project in github loves to use as their base. I believe a simple instruction on how to download via github regular download methods including dependency required to run examples is a great idea.

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
yeelan0319commented, Jul 31, 2017

@Garbee is right. If you wish to run the demos within this repository directly, node and npm is needed for that. Or you can use similar strategy as we mentioned here in our codepen template (a CDN method). But, if you are just interested in looking at our demos, feel free to checkout our catalogs

0reactions
BSarmadycommented, Oct 2, 2017

Thank you for trying to help. I am running IIS on windows machine. My Node.js is version v6.11.3 (includes npm 3.10.10).

I followed the instruction in homepage and run

`npm install --save material-components-web`

Which produced following result:

material1

I downloaded master branch from git and copy demo folder into IIS

Unlike other folders there are only 2 css files in \nodejs\node_modules\@material\button\dist folder (image 1), so I assume I have to copy material-components-web.css and material-components-web.js from \nodejs\node_modules\material-components-web folder (image 2) to same folder as the buttons.html in my IIS (image 4)

Running the files without modification will show (image 3) but when I modify the buttons.html page and add material-components-web.css and material-components-web.js to it (image 5) I can see the toolbar and buttons (image 6). Buttons are responding to click (ripple effect).

If I replace material-components-web.css with mdc.button.css everything else goes haywire (image 7)

material2

Am I doing missing some files that I might need to copy into my app folder? As for asking here, I was trying to be sure if I followed the instructions correctly. Is it possible that this issue related to #2388 failed ?

Read more comments on GitHub >

github_iconTop Results From Across the Web

10 Common WordPress Theme Issues & How To Fix Them
Common WordPress errors with solutions. We address some of the most common WordPress theme issues and provide easy solutions to fix them.
Read more >
Unexplained Windows or software behavior may be caused ...
Web pages are unexpectedly added to your Favorites folder. New toolbars are unexpectedly added to your web browser. You cannot start a program....
Read more >
How to Import Demo Content Into a WordPress Theme
Whether you are a WordPress theme developer or user, it is always good to have wordpress demo content available to work around. Learn...
Read more >
How to troubleshoot storybook not loading stories?
I'm trying to load up the demo ...
Read more >
How To Write Demos and Tutorials - RosettaCommons
These demos are static, may only work with previous old of Rosetta, and meant ... 2) Include a file called command in your...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found