Repository files navigation

This repository is no longer in active maintenance.

Minimalistic, very easy to understand boilerplate forElectron runtime. Tested on Windows, macOS and Linux.

This project contains only bare minimum of tooling and dependencies to provide you with simple to understand and extensible base (but still, this is fully functional Electron environment). The boilerplate doesn't impose on you any frontend technologies, so feel free to pick your favourite.

Make sure you haveNode.js installed, then type...

git clone https://github.com/szwacz/electron-boilerplate.gitcd electron-boilerplatenpm installnpm start

...and you have a running desktop application on your screen.

The application consists of two main folders...

src - files within this folder get transpiled or compiled (because Electron can't use them directly).

app - contains all static assets which don't need any pre-processing and can be used directly.

The build process compiles the content of thesrc folder and puts it into theapp folder, so after the build has finished, yourapp folder contains the full, runnable application. Treatsrc andapp folders like two halves of one bigger thing.

The drawback of this design is thatapp folder contains some files which should be git-ignored and some which shouldn't (see.gitignore file). But this two-folders split makes development builds much faster.

npm start

Build process usesWebpack. The entry-points aresrc/main.js andsrc/app.js. Webpack will follow allimport statements starting from those files and compile code of the whole dependency tree into one.js file for each entry point.

Babel is also utilised, but mainly for its great error messages. Electron under the hood runs latest Chromium, hence most of the new JavaScript features are already natively supported.

Environmental variables are done in a bit different way (not viaprocess.env). Env files are plain JSONs inconfig directory, and build process dynamically links one of them as anenv module. You can import it wherever in code you need access to the environment.

importenvfrom"env";console.log(env.name);

Remember to respect the split betweendependencies anddevDependencies inpackage.json file. Your distributable app will contain only modules listed independencies after running the release script.

Side note: If the module you want to use in your app is a native one (not pure JavaScript but compiled binary) you should first runnpm install name_of_npm_module and thennpm run postinstall to rebuild the module for Electron. You need to do this once after you're first time installing the module. Later on, the postinstall script will fire automatically with everynpm install.

Run all tests:

npm test

npm run unit

Usingelectron-mocha test runner with theChai assertion library. You can put your spec files wherever you want within thesrc directory, just name them with the.spec.js extension.

npm run e2e

UsingMocha andSpectron. This task will run all files ine2e directory with.e2e.js extension.

To package your app into an installer use command:

npm run release

Once the packaging process finished, thedist directory will contain your distributable file.

Electron-builder is handling the packaging process. Follow docs over there to customise your build.

You can package your app cross-platform from a single operating system,electron-builder kind of supports this, but there are limitations and asterisks. That's why this boilerplate doesn't do that by default.