I went on a deep dive into the code of the magic mirror. First of all, let’s see how the startup procedure works.
When executing the command
npm start
from the command line, we ask the npm (node package manager) tool to start the module in the current directory. How does npm know exactly what to do? Which code does it need to run?
This is stored in the package.json file, found in the root of de folder where the application resides.
If we look at the file in the atom editor, we can see a section called “script” near the top of the file. It’s contains a key called “start”. The value of the key is a command line command that starts the application. There are several scripts that can be entered here, and “start” is one of them. More info on those scripts can be found here.
“scripts”: {
“start”: “electron js/electron.js”
},
The json expression above is what’s stated in the config file. It means the “electron” command is issued with “js/electron.js” as an argument.
Because the electron module is one of the dependencies that was downloaded during the “npm install” call, electron can be started. “js” is a subfolder, and it contains “electron.js”, a java script that will be used by electron to start the application.
Open it up in the atom editor.
There’s a lot to say about this script. Especially if you’re new to javascript, NodeJS and electron. But all in due time.
The main takeaway here is that, when electron is finished initialising, it will fire the “ready” event.
It’s this event that is being implemented in this file, and it calls the “createWindow()” function. This function is responsible for showing everything on the screen. Later more on this function.
At the bottom of the screen you can see that the core module is started. This is specific for the magic mirror software. We’ll come back to that in later posts probably.
I advise to read the quick start guide for electron. It explains the electron startup process in more detail. Including the theory on the 2 processes that are running : the main process and the renderer process. You can find the quick start guide here.
What’s important to know is that electron uses NodeJS. A good set of tutorial video’s on NodeJS can be found here. Furthermore, it uses a framework on top of NodeJS called express. It allows creating powerful applications in a fast and easy way. For more information check out this website. Both NodeJS and express will be used in later quests into the magic mirror software, so if you’re unfamiliar with it, be sure to watch and read up on it. Good luck!
Smart Mirror Project 