corybsa/secure-electron-angular-template

The best way to build Electron apps with Angular with security in mind.

(taken from secure-electron-template because I'm lazy)

secure-electron-angular-template

A current electron app template configured for use with Angular, designed and built with security in mind. (If you are curious about what makes an electron app secure, please check out this page).

How to get started

To get started, clone the repository by clicking the button, or through the command line (git clone https://github.com/corybsa/secure-electron-angular-template.git).

Once cloned, install the dependencies for the repo by running the following commands (you do not have to run the first command if your command line is already inside the newly cloned repository):

cd secure-electron-angular-template
npm i

To run the app in development mode, run the following command:

npm run start

When you'd like to test your app in production, you can run the following command:

npm run start-prod

Or to package it for distribution just run the following command:

npm run package

and you can find your packaged app in the dist folder!

Features

Taken from the best-practices official page, here is what this repository offers!

1. Only load secure content - ✅ (But the developer is responsible for loading secure assets only 🙂)
2. Do not enable Node.js integration for remote content - ✅
3. Enable Context Isolation - ✅
4. Enable process sandboxing - ✅
5. Handle session permission requests from remote content - ✅
6. Do not disable webSecurity - ✅
7. Define a Content Security Policy - ✅
8. Do not enable allowRunningInsecureContent - ✅
9. Do not enable experimental features - ✅
10. Do not use enableBlinkFeatures - ✅
11. Do not use allowpopups for WebViews - ✅
12. Verify WebView options before creation - ✅
13. Disable or limit navigation - ✅
14. Disable or limit creation of new windows - ✅
15. Do not use shell.openExternal with untrusted content - ✅
16. Use a current version of Electron - ✅
17. Validate the sender of all IPC messages - ✅
18. Some built-in utility functions to help you out - ✅

Included frameworks

Built-in to this template are a number of popular frameworks already wired up to get you on the road running.

• Electron
• Angular
• Angular Material (with custom theme, including dark mode)
• Typescript
• NgRx
• Redux DevTools
• Electron builder (for packaging up your app)
• Jasmine

Architecture

For a more detailed view of the architecture of the template, please check out here. I would highly recommend reading this document to get yourself familiarized with this template.

Things you might want to customize

angular.json

• Replace any instances of secure-electron-angular-template with the name of your app

package.json

• Change name to your app's name
• Change author.name to your name
• Change description to your app's description
• Change build.appId to your app's name
• Change build.productName to your app's name
• Change build.executableName to your app's name
• Change build.mac.category to your app's category (idk what this is, I don't develop for mac)

electron/protocol.ts

• The DIST_PATH MUST match the name in angular.json
• The scheme in electron/protocol

Angular files

• Change the <title> of your app in src/index.html
• Change instances of $secure-electron-angular to your app's name in src/assets/styles/theme.scss if you care. This is just the name of the theme in code and is not user-facing, so it doesn't really matter.
• Change the title of your app in src/app/app.component.ts
• The contents of src/app/app.component.html

FAQ

NEW TO ELECTRON? Please visit reZach's page.