diff --git a/README.md b/README.md index d77f3f5..7ce4308 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,5 @@ [![Angular Logo](https://www.vectorlogo.zone/logos/angular/angular-icon.svg)](https://angular.io/) [![Electron Logo](https://www.vectorlogo.zone/logos/electronjs/electronjs-icon.svg)](https://electronjs.org/) -[![Travis Build Status][build-badge]][build] -[![Dependencies Status][dependencyci-badge]][dependencyci] [![Make a pull request][prs-badge]][prs] [![License](http://img.shields.io/badge/Licence-MIT-brightgreen.svg)](LICENSE.md) @@ -11,26 +9,17 @@ # Introduction -Bootstrap and package your project with Angular 7 and Electron (Typescript + SASS + Hot Reload) for creating Desktop applications. +Rearview / Backview mirror for your Computer +Read the article about this App on https://www.thecodecampus.de/blog/building-a-rear-view-mirror-app-with-electron-and-angular -Currently runs with: - -- Angular v7.2.0 -- Electron v4.0.0 -- Electron Builder v20.28.1 - -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 +[![Rear View Example](rear-view-example.png)](https://www.thecodecampus.de/blog/building-a-rear-view-mirror-app-with-electron-and-angular) ## Getting Started Clone this repository locally : ``` bash -git clone https://github.com/maximegris/angular-electron.git +git clone https://github.com/kaihenzler/electron-rearview-mirror ``` Install dependencies with npm : @@ -39,72 +28,21 @@ Install dependencies with npm : 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`. +Build for your target system : ``` bash -npm install -g @angular/cli +npm run electron:mac +npm run electron:linux +npm run electron:windows ``` -## 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 disable "Developer Tools" by commenting `win.webContents.openDevTools();` in `main.ts`. - -## Included Commands - -|Command|Description| -|--|--| -|`npm run ng:serve:web`| 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.** - -## You want to use a specific lib (like rxjs) in electron main thread ? - -You can do this! Just by importing your library in npm dependencies (not devDependencies) with `npm install --save`. It will be loaded by electron during build phase and added to the final package. Then use your library by importing it in `main.ts` file. Easy no ? - -## Browser mode - -Maybe you want to execute the application in the browser with hot reload ? You can do it with `npm run ng:serve:web`. -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. - -## Branch & Packages version - -- Angular 4 & Electron 1 : Branch [angular4](https://github.com/maximegris/angular-electron/tree/angular4) -- Angular 5 & Electron 1 : Branch [angular5](https://github.com/maximegris/angular-electron/tree/angular5) -- Angular 6 & Electron 3 : Branch [angular6](https://github.com/maximegris/angular-electron/tree/angular6) -- Angular 7 & Electron 3 : (master) - -[build-badge]: https://travis-ci.org/maximegris/angular-electron.svg?branch=master -[build]: https://travis-ci.org/maximegris/angular-electron -[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 +Run the App and share it with your colleagues :-) ## Images - Background Image of the rear view mirror (For Personal Use) - Source: https://www.kisspng.com/png-mac-app-store-macos-apple-rear-view-mirror-car-mir-1026435/download-png.html - App Icon (For Personal Use) - Source: https://www.kisspng.com/png-car-computer-icons-rear-view-mirror-4290757/ + +## Based on + +https://github.com/maximegris/angular-electron diff --git a/rear-view-example.png b/rear-view-example.png new file mode 100644 index 0000000..442a6a6 Binary files /dev/null and b/rear-view-example.png differ