Npm install of material-design-lite

Phoenix Forum Questions / Help
1

Hi, a really simple question, but I cannot find an example when searching.
I’d like to install mdl using npm rather than bower on my very basic Phoenix app. Nothing special, just install it and get it to work.
I’ve completed the install. It’s inside the node-modules directory. How do I now use it?
The bower install was working and that had few ‘moving parts’.
Installing npm modules in Phoenix seems to have lots of moving parts and I’m not sure what to touch and how.
This would be my first npm install into Phoenix and that would help my learning.
Thanks

2

I think you are looking for Phoenix Framework: Static Assets
Scan down to the “JavaScript Libraries” heading.

You may also want to look at Brunch: Config - npm

3

Hi,
I think the thing I’m looking for is written for is someone who doesn’t know what’s going on!
Really dumb questions I’m holding. Such as what name to give the atom called bootstrap in the example when installing something else such as mdl

npm: {styles: {
bootstrap: [‘dist/css/bootstrap.min.css’]
}},

This is what i’d arrived at before, but no idea if this is likely to work

styles: {
‘material’: [‘material-design-lite/material.css’]
}

Another question I’m holding is if I need statements such as these inside app.html.eex
<link rel="stylesheet" href="/node_modules/material-design-lite/material.css" />
<script type="text/javascript" src="node_modules/material-design-lite/material.min.js" charset="utf-8"></script>

My final newbie question is if there is a command I need to issue for brunch to configure things or does it just sort of work. Lacking a mental model of what right looks like because I’ve not been able to unearth a complete example. I’ll keep poking around the interweb.

4

Found this article:

And decided to simply manually copy into the Phoenix static asset css and js folders. Then the following in app.html.eex works. KISS.

<link rel="stylesheet" href="<%= static_path(@conn, "/css/material.css") %>">
5

Based on the documentation (and examples) I’d start with:

npm: {
  styles: {material-design-lite: ['dist/material.css']},
  globals: {material: 'material-design-lite'}
}

If I remember correctly once properly configured, Brunch will simply bundle it with the app.css - so there shouldn’t be a need for a separate file reference.

See Default Configuration And Workflow:

Processed and concatenated javascript will be put into priv/static/js/app.js, styles will be in priv/static/css/app.css.

6

@peerreynders many thanks for the pointers. You persuaded me to persist. I installed brunch globally so that I could see the errors using

brunch build LOGGY_STACKS=true

And eventually came away with this working implementation.

npm: {
enabled: true,
styles: {
‘material-design-lite’: [‘dist/material.min.css’]
},
globals: {
material: ‘material-design-lite’
}
}

Hope this helps anyone else coming across this thread

7

It seems material design lite has been deprecated in favor of Material Components for the web

As mentionned on their github here https://github.com/google/material-design-lite

8

@kokolegorille good spot! I hadn’t noticed that. However, my needs are simple and mdl is working. I had loaded a number of the polymer mark 2 components (iron & paper) using bower and found those relatively easy to work with. But if I remember rightly it was the apparent absence of a select field that caused me to take a rain check on polymer just for the moment.