How do I install dependencies using npm when MagicMirror is in a Docker?

[karsten13]

First (forgot it in first respone): Get well soon!

2014 is long ago concerning docker … It has advantages and disadvantages and I agree that users with minimal system experience should not use it.

If you know what you are doing the main advantage is that you can test and run things without messing up your system. E.g. switch to another mm version is no problem, just use another container and you can test with the exactly same config and module setup. Or need another node version, just use another base image, …

[sdetweil]

@karsten13 if you know whay u are doing.

yes 2014 is light years ago.

[smithbill17]

Firstly - apologies for the late reply. I had rather expected to get a “Someone replied to your posting…” email, but perhaps that setting isn’t ‘on’ in my forum profile (i’ll check).

Thank you everyone for the explanation and the details of how to use npm INSIDE the docker container. I did as @karsten13 had suggested (docker exec -it mm bash) and that seemed to work fine. I could run npm install inside the container. I then exited from that session and restarted my docker container.

However, i didn’t quite get working what I was attempting to do:

1. I have Home Assistant running on my rpi4b (in a docker container)
2. I have Magic Mirror2 also running (in a docker container) on the same rpi4b
3. I installed module Snille/MMM-homeassistant-sensors and its working fine
4. I wanted to use the MaterialDesignIcons as documented in Snille’s module - so I ran the ‘npm install’ command in the module directory inside the docker container as explained by @sdetweil and @karsten13 but, even after restarting my MagicMirror2 container, it made no difference to the icons.
5. I tried following the instructions in the alternative MMM-homeassistant-sensors by leinich by downloading the documented ‘master.zip’ of MaterialDesignIcons and unzipping that and running the ‘npm install’ command inside the docker container (and i tried inside the MaterialDesign-Webfont-master directory) but i still cant seem to use any of the icons in my Home Assistant sensor display.

Is there something obvious i’m doing wrong (or not doing)? Its not a big problem - i can live without the icons if necessary. I’m happy that I can display Home Assistant sensor data in MagicMirror2 as it is.

Perhaps i’m trying to install fonts in a docker container when in fact the fonts need to go in the relevant directories on the host? and without ‘npm’ being installed on the host, i can’t do that??

Would I be better ditching MagicMirror2 in a docker container, and instead install it natively on the host? (i was trying to keep my rpi4b as a clean host with HomeAssistant and MagicMirror2 neatly bundled into their own containers).

(incidentally, i do have 40+ years in IT, but just not in ‘hands-on’ stuff. I date from the days of FORTRAN, COBOL and Pascal - you’re probably all too young to even know what those were) :)

[sdetweil]

@smithbill17 csn u tell us the instructions for adding the icons without docker?

[smithbill17]

Well the Snille/MMM-homeassistant-sensors module just says:

Installation
In your terminal, go to your MagicMirror's Module folder:

cd ~/MagicMirror/modules
Clone this repository:

git clone https://github.com/Snille/MMM-homeassistant-sensors
Enter the folder:

cd MMM-homeassistant-sensors
Install Node-Modules (The MaterialDesignIcons webfont icon names can be used.).

npm install

and the leinich/MMM-homeassistant-sensors module just says:

Navigate into your MagicMirror's modules folder and clone this repository: cd ~/MagicMirror/modules && git clone https://github.com/leinich/MMM-homeassistant-sensors.git

If you want to use icons for the sensors download the MaterialDesignIcons webfont from https://github.com/Templarian/MaterialDesign-Webfont/archive/master.zip and unzip the folder: cd ~/MagicMirror/modules/MMM-homeassistant-sensors && wget https://github.com/Templarian/MaterialDesign-Webfont/archive/master.zip && unzip master.zip

I tried downloading and unzipping the master.zip file and running the npm install command in the directory (in the docker container) as you suggested. After restarting my MagicMirror2 container, nothing was any different.

Clearly there is some ‘piece of the jigsaw’ that i’m missing.

[karsten13]

you’re probably all too young to even know what those were

unfortunately not …

After restarting my MagicMirror2 container, nothing was any different.

I think there is nothing different before you change the icons in your config.

The module from Snille already includes the https://materialdesignicons.com/ (no extra installation needed except npm install). But did you use an icon name in your config as described in the readme?

			{
				sensor: "binary_sensor.washing_machine",
				name: "Washing Machine",
				icons: [{
						"off": "washing-machine-off",
						"on": "washing-machine"
					}
				],
				replace: [{
						"on": "Working",
						"off": "Idle"
					}
				]
			},

Every icon name from https://materialdesignicons.com/ should work in “on”/“off”.

[smithbill17]

Hi, thanks again for assisting.

Yes, I updated my config.js with some sensor entries using some of the icons as listed in the leinich module example. So my config.js module looks like this:

module: 'MMM-homeassistant-sensors',
    position: 'top_right',
    config: {
      host: "MY IP",
      port: "MY PORT",
      https: false,
      token: "MY TOKEN",
      values: [
      {
        sensor: "sensor.load_1m",
      },
      {
        sensor: "sensor.load_5m",
      },
      {
        sensor: "sensor.wifi_level",
      },
      {
        sensor: "sensor.kittytemp_temp",
      },
      {
        sensor: "switch.diningroom_lamp",
	icons: [{
	  "state_off": "lightbulb-outline",
	  "state_on": "lightbulb-on-outline"
	}]
      },
      {
        sensor: "switch.heat_mats",
	icons: [{
	  "state_off": "lightbulb-outline",
	  "state_on": "lightbulb-on-outline"
	}]
      },
      {
        sensor: "switch.kitty_mat",
	icons: [{
	  "state_off": "lightbulb-outline",
	  "state_on": "lightbulb-on-outline"
	}]
      },
      {
        sensor: "switch.satellite",
	icons: [{
	  "state_off": "lightbulb-outline",
	  "state_on": "lightbulb-on-outline"
	}]
      }
      ]
    }
  },

So, as best I could tell, “lightbulb-outline” and “lightbulb-on-outline” are included in the Material Design Icons.

Obviously I’m being a bit dumb somehow, but I’m not currently seeing where.

[smithbill17]

Incidentally, your post said that the module from Snille “included” the Material Design Icons - where? Does the npm install command somehow download them?

Snille’s instructions say: “Install Node-Modules (The MaterialDesignIcons webfont icon names can be used.).”

What exactly does “Install Node-Modules” mean?? I haven’t done anything more than git clone his module, then ran npm install inside the docker container as you explained.

[smithbill17]

Hoorah! I got it working - thanks to your help :)

As you had said “The module from Snille already includes the https://materialdesignicons.com/” i decided to remove the leinich version of the module and instead installed the Snille version.

And now that I know how to run ‘npm install’ INSIDE the docker container, i did that and noticed that a directory called “node_modules” was created inside the MMM-homeassistant-sensors directory. I also noticed a “node_modules” directory inside the docker container at the ‘/opt/magic_mirror/’ level - i’ve no idea if thats meant to be there or its the result of me running ‘npm install’ whilst in the wrong directory - either way, it doesn’t seem to affect anything, so I stayed well clear of it.

After installing the Snille module and running ‘npm install’ INSIDE the docker container, i still couldn’t get my icons appearing, until i realised that the config.js for leinich’s version is subtly different to Snilles:

leinch’s says:

icons: [{
  "state_off": "lightbulb-outline",
  "state_on": "lightbulb-on-outline"
}]

whereas Snille’s says:

icons: [{
  "off": "lightbulb-outline",
  "on": "lightbulb-on-outline"
}]

so the difference being “state_off” and just “off”.

Anyway, i now have it working - so a big thank you for your help!

Hopefully my struggles will help anyone else reading this thread (in particular the bit on how to run ‘npm install’ INSIDE the docker container). Thank you.

[smithbill17]

Sorry - one more question:

If there is a MagicMirror2 update, and I remove my MagicMirror docker container and re-add it in order to get the latest version of MagicMirror2, do I then have to repeat the ‘npm install’ command inside the new docker container to get dependencies and MaterialDesignIcons installed? Or are the existing files & directories kept on the host OS and the MagicMirror2 container simply has links to the already existing directories on the host and so everything should just work?