Must-have npm packages for Electron apps

Just a quick rundown of npm packages I tend to use in Electron projects, and what they're good for.
Note: I'm using it in my development package.json and they are key components in building and distributing apps.

Electron specific

electron-prebuilt

Not much to say about this - Electron binaries for running your app. I avoid installing it globally but rather use it separately for each project. Keeps things clean, portable and projects are not dependable on one another.

electron-builder

Pretty much go-to tool to create your app binaries. I've written a lot on using it, so feel free to browse on blog.

devtron

Another tab in Chrome dev tools specifically made to help you profile your Electron app.
Note: Open your dev tools programatically or if you open it from the app, make sure that it is not detached, because you won't be able to see Devtron tab. I suppose this is a bug (in time of writing this article of course).

Working with files

copyfiles

Cross-platform way to copy files on your FS. I'm using it in my build process to move files to release folder.

mkdirp

Cross-platform way to create directory structure recursively. I use it to prepare directory structure for release folder.

rimraf

Cross-platform tool to delete files and folders. It's basically rm -rf and that's why it's called rimraf. I use it to remove old generated files before generating new ones.

Utils

live-reload

Cool package which you can use to refresh your app window (html) when folder is updated. I define my app folder to be used for reloading.

onchange

Define which folder/files to watch and execute action when change is detected. Supports glob.

exec-notify

Eye-candy to fire up OS notification when command is done (whether it succeeds or fails).
Watch out on one thing though - if your script fails when using exec-notify, next steps are executed, while without it, npm error would be thrown.

npm-run-all

Awesome tool to run npm scripts in parallel or sequential manner. I use it to simplify package.json scripts.

Code specific

jshint

Just some linting for JS files. Works great with VS Code - check out this plugin. Everyone has a preference, so use whichever linting you want.

node-sass

Npm package for smarter way to write CSS.

uglify-js

Butchering of that JS files. :-)

What do you think?

Did I forget miss something? I would love to get your feedback on what you're using in your apps.

Cheers!

About Vjekoslav Ratkajec

Software developer from Zagreb, Croatia. Love programming, running, hiking and biking. Adore nature and animals. Also author of this blog.

Comments