Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/stephnr/electron-angular-boilerplate
An Electron template app using AngularJS, Skeleton and a whoe sleuth of tools for building Windows/Mac/Linux desktop applications
https://github.com/stephnr/electron-angular-boilerplate
Last synced: 6 days ago
JSON representation
An Electron template app using AngularJS, Skeleton and a whoe sleuth of tools for building Windows/Mac/Linux desktop applications
- Host: GitHub
- URL: https://github.com/stephnr/electron-angular-boilerplate
- Owner: stephnr
- License: mit
- Created: 2015-06-16T13:51:16.000Z (over 9 years ago)
- Default Branch: develop
- Last Pushed: 2020-08-30T07:58:10.000Z (about 4 years ago)
- Last Synced: 2024-10-09T12:09:50.849Z (28 days ago)
- Language: JavaScript
- Homepage:
- Size: 1.78 MB
- Stars: 138
- Watchers: 10
- Forks: 40
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# Electron-Boilerplate
A template for Electron projects to build/publish Mac/Windows/Linux compatible applications
[](https://circleci.com/gh/Stephn-R/electron-angular-boilerplate) [](https://david-dm.org/Stephn-R/Electron-Angular-Boilerplate) [](https://david-dm.org/Stephn-R/Electron-Angular-Boilerplate#info=devDependencies)
### Table of Contents:
---
1. [Installation](#install)
2. [The Stack](#stack)
3. [Adding new views](#views)
4. [Adding/Managing Bower Resources](#bower)
5. [Building the Desktop Application](#build-app)
6. [Testing](#testing)
7. [FAQ](#faq)
8. [Contributing](#contributing)
The application runs using Node 4.2.4. I recommend using [nvm](https://github.com/creationix/nvm) to manage your node versions. In addition, node-sass is required globally.
For development, run:
```shell
./scripts/load_globals.sh
sudo npm install --python=python2.7
bower install
npm start
```
#### Known Bugs:
Node-sass may fail the `npm start` command. I recommend running the following command to fix this:
```
npm i -g node-sass
npm rebuild node-sass
```
As for preparing the Windows/Mac/Linux apps for distribution. You will first need to run the ```npm install```. Afterwards, run the following to build all the apps for all architectures and distributions:
```shell
# Requires GNU Make to be installed
make
```
The App Stack includes various tools and frameworks. Below is a list of those items and their intended purpose:
- **AngularJS**: Client Side Web-App Stack
- **Bower**: Managing CSS/JS dependencies (i.e. AngularJS)
- **Gulp**: Build Automation for compiling Sass + other resources before Electron
- **Gnu-Make**: Lower level build automation via the terminal (bash)
- **Jest**: Testing framework for ES6/JS modules + code coverage support
- **JSPM**: ES6 and Module importing support
- **Karma/Jasmine**: Testing framework for AngularJS + code coverage support
- **Node.js**: Running the Electron/Desktop Application
- **Sass**: Enhanced Stylesheets
- **Skeleton CSS**: Normalized + Simple CSS Grid framework
- **Travis**: CI (Continous Integration) support
- **Wiredep**: Injecting Bower dependencies into the HTML files
If you would like to suggest another tool or framework, please refer to the [CONTRIBUTING.md](/CONTRIBUTING.md) before submitting an issue.
Thanks to the use of Gulp and Wiredep, it is recommended that all new views be written in the `views` directory as `.html` files in order to take advantage of the resource injection tool. The compiled views are then dumped into the same folder with all dependencies (even new ones) injected.
### Adding/Managing Bower Resources
In order to add a new resource, simply install + save it using bower. Below is an example using jQuery
```shell
bower install --save jquery
```
And thats it. Since we are using Gulp + Wiredep, all bower dependencies will be included on pages supporting the Wiredep tags.
### Building the Desktop Application
Since the app was built using Node.js, you only need to run the following command for development testing:
```shell
npm start
```
npm start will run the latest build and then launch the application.
In order to only build the latest code run:
```shell
gulp
```
As for building the final Desktop Application. You can use any of the following make commands to build them:
- Mac: `make mac-64`
- Windows 32-Bit: `make windows`
- Windows 64-Bit: `make windows-64`
- Linux: `make linux`
- Linux 64-bit: `make linux-64`
Alternatively, you can build all the apps at once by calling `make apps`
Tests are broken between two layers. All ES6 Modules/JS code should be tested using `Jest`. Alternatively, any testing for AngularJS content should be done using Karma/Jasmine. For more details on this, refer to the [FAQ](#faq) about Where to write tests.
1. **Where can I write my tests?**
All the ES6/Module tests are written in Jest. You can refer to the ```__tests__``` folder for that. All test files for Jest should match against this file extension pattern ```*.jest.js```. Alternatively, all AngularJS tests should be written using the following file extension pattern ```*.spec.js```. These tests should be written within the b`__tests__/app/` folder.
Please see [CONTRIBUTING.md](/CONTRIBUTING.md) for full details on contributing.