Nx Electron provides a set of power ups on Nx for developing cross platform desktop apps using Electron.
- Schematics: Provides schematics for developing cross platform apps in a mono repo environment.
- Typescript: Uses Typescript to help reduce errors, and create more structured code.
- Obfuscation: Since Electron are used on the client machines, nx-electron obfuscates you code (and only it).
- Minimization: Electron apps tend to be quite large, hence we use webpack to bundle, and minimize to code.
- Live Update: Provides continuos live reload for your backend code.
- Event Templates: Provides templates for common events like squirrel setup events, auto update events and IPC events.
- Packaging: Packages your frontend and backend webpack bundles into single electron package.
- Making: Makes your frontend and backend webpack bundles into single executable. ๐
This module is based on Nx, you will need to set up an Nx workspace before you can use nx-electron.
npx create-nx-workspace@11
You should also create a frontend project in you workspace (in any nx supported framework you like) for you electron app.
npm install -D nx-electron
nx g nx-electron:app <electron-app-name> --frontendProject=<frontend-app-name>
NOTE: You should add a frontend project to you workspace prior to invoking this command.
NOTE: On certain frontend platforms (such as Angular, React, etc...) it is important to change the baseHref field to "./", and use the hash strategy on the router in order for it to work well with electron. Further details can be found here.
- Run
nx run-many --target=build --projects=<frontend-app-name>,<electron-app-name> --parallel
to build your application.
NOTE: To build your application in production mode use the --prod
option.
NOTE: On some frameworks you might need to use the --baseHref="./"
option to configure your application routing correctly. This might require you to build your frontend and backend applications separately.
- Run
nx run-many --target=serve --projects=<frontend-app-name>,<electron-app-name> --parallel
to serve your application.
In case you see a blank application, that happens due to that the electron app was served before the frontend was served. In that case, there are couple of possible solutions:
- Refresh you application when it has been served (i.e. with electron-debug).
- Manually serve the backend and frontend with to separate commands (e.g. serve the backend only after the frontend was served).
- Automatically serve the backend after the frontend was served (i.e. this script).
- Run
nx run <electron-app-name>:package [--options]
to package your application. - Or
nx run <electron-app-name>:make --prepackgeOnly
to package your application.
The options that can be passed are described here.
NOTE: You have to build your application before invoking this command.
- Run
nx run <electron-app-name>:make [--options]
to make your application.
The options that can be passed are described here.
NOTE: You have to build your application before invoking this command.
It is possible to configure all the packaging / making options in .\apps\<electron-app-name>\src\app\options\maker.options.json
. For more information read this article.
Notice: the option you define at this file will override the options you pass manually via the command line or choose via the angular console.
To migrate automatically run ng update nx-electron@<version>
.
You can find detailed information in the following articles:
- Run
nx run-many --target=test --projects=<frontend-app-name>,<electron-app-name> --parallel
to test your application.
- Follow this instructions in order to configure the debugger your IDE.
Regardless of what framework you chose, the resulting file tree will look like this:
<workspace name>/
โโโ apps/
โ โโโ electron-app-name/
โ โโโ frontend-app-name/
โ โโโ frontend-app-name-e2e/
โโโ libs/
โโโ tools/
โโโ nx.json
โโโ package.json
โโโ tsconfig.json
โโโ tslint.json
If you're having any problem, please raise an issue on GitHub and we'll be happy to help.
- Follow this instructions in order to learn how to contribute to this project.
This repository follows the semantic versioning rules while adhering to Nx and Angular version scheme.
This project is highly inspired by (and dependent on) Nrwl Nx platform. Under the hood, we use Electron Builder to package and make electron application executables.
Author: Benny Megidish.