bennymeg
Nx Electron
Electron builders and schematics for Nrwl Nx platform.
Features
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 continuous 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 an electron package.
- Making: Makes your frontend and backend webpack bundles into single standalone executable.
Compatibility
[!IMPORTANT] This repository follows the semantic versioning rules while adhering to both Nx and Angular versioning scheme. Make sure that
Nx Electronmajor version match Nx major version. I.e. version 21.x ofNx Electronwill be compatible with version 21.y of Nx.
Getting Started
Prerequisite
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@21Installation
npm install -D nx-electronCreating Nx Electron Application
nx g nx-electron:app <electron-app-name> --frontendProject=<frontend-app-name>[!IMPORTANT] Make sure to select Integrated monorepo as a project style, and Webpack as a bundler.
[!NOTE] You should add a frontend project to you workspace prior to invoking this command.
[!TIP] On certain frontend platforms (such as Angular, React, etc...) it is important to:
- change the baseHref field to "./".
- Use router outlet hash strategy. Further details can be found here.
[!NOTE]
Nx Electronapplication usually contain both frontend and backend. When you wish to build, serve, test, etc. your application, make sure to invoke the command for both the frontend and the backend. Most of the the time, side-by-side terminal windows are more convenient.
Building Nx Electron Application
- Frontend: Run
nxe:build:frontendornx build <frontend-app-name>to build your frontend application. - Backend: Run
nxe:build:backendornx build <electron-app-name>to build your backend application.
Serving Nx Electron Application
- Frontend: Run
nxe:serve:frontendornx serve <frontend-app-name>to serve your frontend application. - Backend: Run
nxe:serve:backendornx serve <electron-app-name>to serve your backend application.
Testing Nx Electron Application
- Frontend: Run
nxe:test:frontendornx test <frontend-app-name>to test your frontend application. - Backend: Run
nxe:test:backendornx test <electron-app-name>to test your backend application.
Packaging Nx Electron Application
Run
nxe:package:appornx run <electron-app-name>:package [--options]to package your application.The options that can be passed are described here.
[!IMPORTANT] Make sure to build both the frontend project and the backend project before packaging your application.
Making Nx Electron Application (standalone build)
Run
nxe:make:appornx run <electron-app-name>:make [--options]to make your standalone application.The options that can be passed are described here.
[!IMPORTANT] Make sure to build both the frontend project and the backend project before making your standalone application.
Configuring static packaging / making options
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.
[!IMPORTANT] Option you define at this file will override the options you pass manually via the command line or choose via the angular console.
Migrating Nx Electron Application
To migrate automatically run ng update nx-electron@<version>.
You can find detailed information in the following migration guides.
Debugging Nx Electron Application
- Follow this instructions in order to configure the debugger your IDE.
Minimal Project Structure
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.jsonSupport
If you're having any problem, please raise an issue on GitHub and we'll be happy to help.
Contribute
- Follow this instructions in order to learn how to contribute to this project.
Attribution
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.