Using Material Web in HTML/Express.js

[SlimyFrog123]

How could I use Material Web in a plain HTML document or an Express.js app? I have tried UNPKG, but that did not seem to work properly. But then again, I don't really have any experience with UNPKG or projects like this, where you must include the components via JavaScript.

My apologies if this is an amateur question or cannot be done.

Thanks in advance!

[CornerSyrup]

@material/web is a module package and require bundling, Unpkg only serve script as is, try esm.run by jsdelivr.

<script type="module" src="https://esm.run/@material/[email protected]/all.js"></script>

[vdegenne]

You can tell unpkg to serve module files as well.

<script type="module" src="https://www.unpkg.com/@material/[email protected]/all.js?module"></script>

(@SlimyFrog123)

[jrmanrique]

Requesting via unpkg with the ?module flag seems to raise Failed to load resource: the server responded with a status of 500 () errors with lit-element and @lit.

[Aworldc]

1. Install material web and esbuild:
   npm i @material/web esbuild

2. create a js file, call it what you want, for example, src/components.js

3. in that file, import the components you want to use, for example:

   import '@material/web/button/filled-button.js'
   import '@material/web/button/outlined-button.js'

4. use esbuild to bundle that js file:

   $ npx esbuild --bundle --minify --outfile=bundle.js src/components.js

   this is assuming the js file you created earlier is at src/components.js and the file the output should go to is bundle.js

5. create an express route that serves the bundle.js file created in the previous step. something like

       app.get('/bundle.js', (req, res) => {
           res.sendFile(path.join(_dirname, 'bundle.js'))
       }

6. load that js file in your web page:

       <script src="bundle.js">

[treeder]

See this answer: #5239 (comment)