Giter Club home page Giter Club logo

electron-boilerplate's Introduction

electron-boilerplate Build Status Build status

A minimalistic yet comprehensive boilerplate application for Electron runtime. Tested on macOS, Windows and Linux.

This project does not impose on you any framework (like Angular or React). It tries to give you only the 'electron' part of technology stack so you can pick your favorite technologies to build the actual app.

Quick start

The only development dependency of this project is Node.js, so just make sure you have it installed. Then type few commands known to every Node developer...

git clone https://github.com/szwacz/electron-boilerplate.git
cd electron-boilerplate
npm install
npm start

... and boom! You have a running desktop application on your screen.

Structure of the project

The application is split between two main folders...

src - this folder is intended for files which need to be transpiled or compiled (files which can't be used directly by Electron).

app - contains all static assets (put here images, css, html etc.) which don't need any pre-processing.

The build process compiles all stuff from the src folder and puts it into the app folder, so after the build has finished, your app folder contains the full, runnable application.

Treat src and app folders like two halves of one bigger thing.

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

Development

Starting the app

npm start

Upgrading Electron version

The version of Electron runtime your app is using is declared in package.json:

"devDependencies": {
  "electron": "1.4.7"
}

Side note: Electron authors advise to use fixed version here.

The build pipeline

Build process is founded upon gulp task runner and rollup bundler. There are two entry files for your code: src/background.js and src/app.js. Rollup will follow all import statements starting from those files and compile code of the whole dependency tree into one .js file for each entry point.

You can add as many more entry points as you like (e.g. to split your app into modules).

By the way, rollup has a lot of plugins. You can add them in this file.

Adding npm modules to your app

Remember to respect the split between dependencies and devDependencies in package.json file. Only modules listed in dependencies will be included into distributable app.

Side note: If the module you want to use in your app is a native one (not pure JavaScript but compiled C code or something) you should first run npm install name_of_npm_module --save and then npm run postinstall to rebuild the module for Electron. This needs to be done only once when you're first time installing the module. Later on postinstall script will fire automatically with every npm install.

Working with modules

Thanks to rollup you can (and should) use ES6 modules for all code in src folder. But because ES6 modules still aren't natively supported you can't use them in the app folder.

Use ES6 syntax in the src folder like this:

import myStuff from './my_lib/my_stuff';

But use CommonJS syntax in app folder. So the code from above should look as follows:

var myStuff = require('./my_lib/my_stuff');

Testing

Unit tests

npm test

Using electron-mocha test runner with the chai assertion library. This task searches for all files in src directory which respect pattern *.spec.js.

End to end tests

npm run e2e

Using mocha test runner and spectron. This task searches for all files in e2e directory which respect pattern *.e2e.js.

Code coverage

npm run coverage

Using istanbul code coverage tool.

You can set the reporter(s) by setting ISTANBUL_REPORTERS environment variable (defaults to text-summary and html). The report directory can be set with ISTANBUL_REPORT_DIR (defaults to coverage).

Continuous integration

Electron can be plugged into CI systems. Here two CIs are preconfigured for you. Travis CI tests on macOS and Linux, App Veyor tests on Windows.

Making a release

To package your app into an installer use command:

npm run release

It will start the packaging process for operating system you are running this command on. Ready for distribution file will be outputted to dist directory.

You can create Windows installer only when running on Windows, the same is true for Linux and macOS. So to generate all three installers you need all three operating systems.

All packaging actions are handled by electron-builder. It has a lot of customization options, which you can declare under "build" key in package.json file.

License

Released under the MIT license.

electron-boilerplate's People

Contributors

antoinepairet avatar black-snow avatar brandonhamilton avatar carlosperate avatar coskuntekin avatar crucialfelix avatar danschultzer avatar eisenkolb avatar high5 avatar idleberg avatar ingro avatar jonatasfreitasv avatar lazamar avatar misteral avatar mkostas avatar orthographic-pedant avatar owenbrotherwood avatar pcewing avatar pkunze avatar plrthink avatar richlewis007 avatar rodrigok avatar romannekhor avatar schultzer avatar szwacz avatar thom-x avatar tkdave avatar turadg avatar tyv avatar zeke avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.