Module programming preview, jsfiddle?

[broberg]

Personally I have a smb share on my pi so I can get to the files directly, and then I just let the MM run on the pi and either test the modules on the pi itself or accessing it via the browser on my desktop.

I use Atom at the moment, but it’s a little overkill for me, would do just fine with a regular text-editor but notepad doesn’t handle the files to well, it just fucks up the tabbing etc.

[washichi]

A okay, yeah I was thinking about kinda the same setup but was wondering if I could get a preview without the PI.

I found out that http://liveweave.com/ can compile in the browser.
so that’s handy for some fast checks.

[cowboysdude]

I use my windows machine with node.js installed as well as MM… I use code lobster to do code so I just test it that way…

of course the infamous ‘npm start dev’…

I’m sure there are other ways but that’s how I roll :)

[yawns]

@cowboysdude
I do the same. I am running node.js on my windows machine and develop in Visual Studio Code. The only thing you cannot test using this method is access to GPIO connected things (PIR sensor, PI camera, …)

[cowboysdude]

@yawns I may have a look at the editor you use… the one I use is okay but I think the one you’re using is a bit more refined :)

[morozgrafix]

I just stick with SublimeText 3 on my MacBook and develop most of the stuff while running node serveronly and pointing Chrome at localhost:8080. Been using sublime with tons of add-on packages (including code linters) for years now and very happy with it. When things are ready I SSH to my RasPi and test on it. As @yawns said, the only drawback of this is that you can’t work with GPIO and other RasPi proprietary things while developing locally. I haven’t ran into many problems with that. There is also an scp package that can copy files to remote on save, I use that when I need to run directly on RasPi.

[washichi]

Can you tell me what plugins you use in Sublime3?

I have sublimelinter installed, and that works, but it isn’t complete:
I called “this.config.updateInterval” and didn’t have updateinterval defined, but didn’t get an error :(.

and if I build my module I get:

Module.register("ISS-current-location",{
^

ReferenceError: Module is not defined

Anyway to ignore that error?

[morozgrafix]

@washichi TBH I have too many to list. (for this project I mostly use SublimeLinter main package in combination with SublimeLinter-contrib-eslint, also use PrettyJSON for validation and formatting cleanup)

Where are you getting this error? What’s your MagicMirror/modules directory structure looks like?

[washichi]

@morozgrafix I am getting the error in sublime3. when only building mmm-module.js
(so I think my magicmirror/modules directory is not really relevant)

Iḿ now just trying to create a good sublime3 environment to compile my modules.
So ill take a look atht the packages you mentioned.
Since I’m new to javascript I think that will help me to get some basic errors out.

now trying to make an ISStracker module:
https://github.com/washichi/MMM-ISS-current-location
but it’s not showing on my magicmirror yet :p

[morozgrafix]

@washichi Interesting idea for the module. And glancing at your code you seem to be on the right track.

I may be not understanding what you trying Sublime Text to do. It’s just a text editor with ability to add various packages on top of it. It’s not a full blown IDE. I don’t believe that you can compile or preview the JavaScript module directly in Sublime.

My general workflow for module creation is something like this:

1. Create MMM-mymodule directory inside MagicMirror/modules
2. Open MagicMirror directory in sublime
3. Add barebones config for the module to modules array in config.js, for example:

{
	module: "MMM-mymodule",
	position: "bottom_right",
	config : {
		
	}
},

4. Start node serveronly and point my Chrome with dev tools open to the http://localhost:8080
5. Create/edit MagicMirror/modules/MMM-mymodule/MMM-mymodule.js, save it. (or other files that you need for the module)
6. Refresh the browser to pickup my changes, debug etc.
7. Repeat steps 5-6 as I go along. If adding/editing node_helper.js repeat steps 4-6 since node needs to pickup that file.

Some of restarts/refreshes can be automated on file save with different tools, but I’m not going to get into that right now.