Read the statement by Michael Teeuw here.
My Setup (or: How crazy I am)
-
I realized yesterday as I was chatting with @Eunanibus, that the way I write code and debug it is probably rather unique, compared to how others might be doing it. Then today at the office I was tasked with having to create a full network map of the building, after all, being the IT Director, I’m the one that put it all in place, so why not.
Then I thought, why not use my home setup, specific to how I do my coding for MagicMirror, and create a layout in the hopes that when I say ‘load up MagicMirror in a regular browser on a different machine’, it would actually make some sense.
Preface
This is a rather small portion of my home network, centered around two physical devices. There are about a dozen other devices on the network. This specific setup consists of a Windows 10 work station (dual monitors) where I do everything on, and the Raspberry Pi and its monitor sitting on my desk (and if you’re counting, that’s 3 out of 5 monitors that are on my desk.) The rpi has it’s own monitor hooked on to it and displays MagicMirror on that. The layout below starts at my connection to the Internet all the way down to the Windows 10 and Raspberry Pi, then it breaks into the specific processes that are used on either platform to get the job done.I will write notes after the image, so make sure to scroll down. With that said:
As you can probably see, the Windows 10 machine is hard wired into the network switch, while the Raspberry Pi is connected via wireless to an AP (access point).
On the rpi, I have a dedicated folder called
'GitHub'in the user'pi'home folder where I keep all my repositories. I clone that stuff with'Git', then'npm'launches the MagicMirror application onto the rpi’s monitor. Also on the rpi, I run'samba'which provides an SMB/CIFS protocol for the Windows machine (and anything else wanting NETBIOS connections to it.) It exports the'~pi/GitHub'folder to the network, specifically only to the Windows 10 machine.On the Windows side, I will map that NETBIOS export onto a drive, in this layout it’s drive letter
'X:\'. Now I have access to all of the repositories that are on the rpi. I can use'Git for Windows'to manage them (or, more often than not, I will use'git'on the rpi itself since I’m generally also logged in via SSH.) Now that I have access to the repositories, I can use my editor to open and edit the files like I normally would any other file.At the same time, I also have a Chrome browser open, pointed at the rpi’s address and port, which will load up the MagicMirror application, completely independent of what’s showing on the rpi’s monitor. That means, I can edit files, change or write new code, save, and hit refresh on the browser and get an instant feedback, without messing up what’s running on the rpi’s monitor! This is great for comparing things.
As I showed @Eunanibus yesterday, I use the Chrome browser’s console panel to debug code, whether it’s HTML code, or the console log messages as can be seen here. Remember, dual monitors, so on the left monitor is my editor with split view so I can open multiple files side-by-side, and on the right is the Chrome browser with the console panel open.
Looks convoluted, doesn’t it? Trust me, I’ve seen worse. :)
Now go forth and code Code CODE!
-
Haha. Well it very much helped me, convoluted or not.
But in any case, since electron is essentially a html browser, you can refresh and use a console just like any other browser, which is actually something I didn’t know prior (F5 on Windows and ⌘+R on a Mac)
So with that said, I simply work on my files on my local system and push them to the Raspberry Pi.
Using “npm start” allows me to launch the application on my system, and using “⌘⌥ + I” brings up the console allowing me to debug.
I actually prefer your method :smile: !
-
For me the whole thing is integration. How to get devices integrated into the current ecology without needing additional ‘anything’ to be added. So I didn’t have to install npm nor electron on my work station, I already had all the necessary tools. And why work on separate copies of the software in different locations, that causes confusion later. I keep it all in one location, and use it from there.
And with the addition of Git, even if I horribly break something, I can always revert the code to an earlier state simply by going to Git and checking out an earlier commit state. Instant backup and revision control.
My setup at the office is similar, except instead of the rpi, I have it running as a serveronly on one of my large servers (replace the Raspberry Pi for a server in the layout above). But that’s really the only difference. Everything else is the same.
-
Well thanks to you, I’ve managed to create a semi-functional first module for another user :)
-
I’m glad that has helped you. It doesn’t matter what kind of setup one uses, it’s unique for everyone. So if what you’re doing is working for you, even better. I try not to tell anyone whether something’s better done a different way, I would rather make recommendations and let folks decide for themselves what’s best for them.
-
I just wanted to chime in and say this post also helped me get started. Thank you for the general setup points.
The last issue I had was that when the mirror was doing its thing and displaying content to the monitor, I couldn’t use a browser from my development machine to see the output. And SSH into the Pi wasn’t allowing me to start the mirror service. The browser and Pi just weren’t communicating.
My solution was to run
node serveronly. This allows me to hit the mirror’s ip address and for my browser to render the mirror content. A quick reboot of the mirror will pop it back into display mode.
