108 lines
4.9 KiB
Markdown
108 lines
4.9 KiB
Markdown
[](https://angular.io/) [](https://electron.atom.io/)
|
|
|
|
[![Travis Build Status][build-badge]][build]
|
|
[![Dependencies Status][dependencyci-badge]][dependencyci]
|
|
[![Make a pull request][prs-badge]][prs]
|
|
[](LICENSE.md)
|
|
|
|
[![Watch on GitHub][github-watch-badge]][github-watch]
|
|
[![Star on GitHub][github-star-badge]][github-star]
|
|
[![Tweet][twitter-badge]][twitter]
|
|
|
|
# Introduction
|
|
|
|
Bootstrap and package your project with Angular 5(+) and Electron (Typescript + SASS + Hot Reload) for creating Desktop applications.
|
|
|
|
Currently runs with:
|
|
|
|
- Angular v5.2.5
|
|
- Angular-CLI v1.6.4
|
|
- Electron v1.8.2
|
|
- Electron Builder v20.0.4
|
|
|
|
With this sample, you can :
|
|
|
|
- Run your app in a local development environment with Electron & Hot reload
|
|
- Run your app in a production environment
|
|
- Package your app into an executable file for Linux, Windows & Mac
|
|
|
|
## Getting Started
|
|
|
|
Clone this repository locally :
|
|
|
|
``` bash
|
|
git clone https://github.com/maximegris/angular-electron.git
|
|
```
|
|
|
|
Install dependencies with npm :
|
|
|
|
``` bash
|
|
npm install
|
|
```
|
|
|
|
There is an issue with `yarn` and `node_modules` that are only used in electron on the backend when the application is built by the packager. Please use `npm` as dependencies manager.
|
|
|
|
|
|
If you want to generate Angular components with Angular-cli , you **MUST** install `@angular/cli` in npm global context.
|
|
Please follow [Angular-cli documentation](https://github.com/angular/angular-cli) if you had installed a previous version of `angular-cli`.
|
|
|
|
``` bash
|
|
npm install -g @angular/cli
|
|
```
|
|
|
|
## To build for development
|
|
|
|
- **in a terminal window** -> npm start
|
|
|
|
Voila! You can use your Angular + Electron app in a local development environment with hot reload !
|
|
|
|
The application code is managed by `main.ts`. In this sample, the app runs with a simple Angular App (http://localhost:4200) and an Electron window.
|
|
The Angular component contains an example of Electron and NodeJS native lib import.
|
|
You can desactivate "Developer Tools" by commenting `win.webContents.openDevTools();` in `main.ts`.
|
|
|
|
## Manage your environment variables
|
|
|
|
- Using local variables : `npm start` or `cross-env ENV=local npm start`
|
|
- Using development variables : `cross-env ENV=dev npm start`
|
|
- Using production variables : `cross-env ENV=rod npm start`
|
|
|
|
## Included Commands
|
|
|
|
|Command|Description|
|
|
|--|--|
|
|
|`npm run ng:serve`| Execute the app in the browser |
|
|
|`npm run build`| Build the app. Your built files are in the /dist folder. |
|
|
|`npm run build:prod`| Build the app with Angular aot. Your built files are in the /dist folder. |
|
|
|`npm run electron:local`| Builds your application and start electron
|
|
|`npm run electron:linux`| Builds your application and creates an app consumable on linux system |
|
|
|`npm run electron:windows`| On a Windows OS, builds your application and creates an app consumable in windows 32/64 bit systems |
|
|
|`npm run electron:mac`| On a MAC OS, builds your application and generates a `.app` file of your application that can be run on Mac |
|
|
|
|
**Your application is optimised. Only /dist folder and node dependencies are included in the executable.**
|
|
|
|
## Browser mode
|
|
|
|
Maybe you want to execute the application in the browser (WITHOUT HOT RELOAD ACTUALLY...) ? You can do it with `npm run ng:serve`.
|
|
Note that you can't use Electron or NodeJS native libraries in this case. Please check `providers/electron.service.ts` to watch how conditional import of electron/Native libraries is done.
|
|
|
|
## Contributors
|
|
|
|
[<img alt="Maxime GRIS" src="https://avatars2.githubusercontent.com/u/10827551?v=3&s=117" width="117">](https://github.com/maximegris) |
|
|
:---:
|
|
|[Maxime GRIS](https://github.com/maximegris)|
|
|
|
|
[build-badge]: https://travis-ci.org/maximegris/angular-electron.svg?branch=master
|
|
[build]: https://travis-ci.org/maximegris/angular-electron.svg?branch=master
|
|
[dependencyci-badge]: https://dependencyci.com/github/maximegris/angular-electron/badge
|
|
[dependencyci]: https://dependencyci.com/github/maximegris/angular-electron
|
|
[license-badge]: https://img.shields.io/badge/license-Apache2-blue.svg?style=flat
|
|
[license]: https://github.com/maximegris/angular-electron/blob/master/LICENSE.md
|
|
[prs-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square
|
|
[prs]: http://makeapullrequest.com
|
|
[github-watch-badge]: https://img.shields.io/github/watchers/maximegris/angular-electron.svg?style=social
|
|
[github-watch]: https://github.com/maximegris/angular-electron/watchers
|
|
[github-star-badge]: https://img.shields.io/github/stars/maximegris/angular-electron.svg?style=social
|
|
[github-star]: https://github.com/maximegris/angular-electron/stargazers
|
|
[twitter]: https://twitter.com/intent/tweet?text=Check%20out%20angular-electron!%20https://github.com/maximegris/angular-electron%20%F0%9F%91%8D
|
|
[twitter-badge]: https://img.shields.io/twitter/url/https/github.com/maximegris/angular-electron.svg?style=social
|