Converting an Angular application into a Desktop Application using ElectronJS
March, 2021
Sometimes, a web application needs to be converted into a desktop application* to host a single application on multiple platforms and make use of all other advantages associated with a desktop application.
Converting the existing web application into a desktop application is the best way to do so. It requires minimum effort and makes use of a single codebase. There are multiple approaches through which this can be done. This blog discusses three approaches which make use of ElectronJS.
POSSIBLE APPROACHES:
- Adding ElectronJS functionality to your project
- Embedding your project in an Angular-Electron boilerplate from gitHub
- Loading a website(web application) URL in an Electron window
Here is a description of the listed approaches:
- Approach 1: Adding Electron to your working angular application and running your application on Electron browserWindow (Chromium browser), which can be further packaged using Electron-packager or Electron-builder or Electron-forge.
- Approach 2: An Angular-Electron boilerplate is a ready-to-run or distributable project. Boilerplate projects can be used as a code base for your project. The boilerplate code provides a skeleton for the project, the core functionality(reusable code) and saves development time. Examples: npm’s electron-angular-boilerplate, maximegris/angular-electron. The application functionality can be migrated to this skeleton code.
- Approach 3: This is the easiest way to run a web application inside Electron. In simple terms, it is just a single page web page wrapped in the Electron chromium browserWindow container. It has the minimum codebase (main.js, package.json and node modules) and requires minimum time and effort. However, it comes with a few limitations, like:
- Customizing and styling the browserWindow can be difficult since there is no file (usually index.html)being rendered.
- The desktop application completely relies on the website server. Though locally installed, the application might not work at all when the website server is down.
STEPS TO CONVERT A WEBSITE APPLICATION TO DESKTOP APPLICATION USING ELECTRON:
- Approach 1:
Adding Electron app functionality to your application.
- In the src folder->index.html file change <base href=”/”> to <base href=”./”>
- Cd to the directory where package.json exists and install electron npm install electron — save-dev
- Create main.js in root of the project (not in src) (this is where createWindow() code goes)
- Ensure main.js points to dist/index.html (not just index.html)
- add “main”:”main.js”, to package.json
- add these to the scripts section of the package.json:
“electron”: “electron .”, // ← run electron
“electron-build”: “ng build — prod && electron .” // ← build app, then run electron `
- run/debug the application with:
npm run electron-build
- to package the app (using electron packager):
npm install electron-packager -g npm install electron-packager — save-dev
- Add the following scripts to package.json:
“package-mac”: “electron-packager . — overwrite — platform=darwin — arch=x64 — icon=assets/icons/mac/icon.icns — prune=true — out=release-builds”,
“package-win”: “electron-packager . electron-tutorial-app — overwrite — asar=true — platform=win32 — arch=ia32 — icon=assets/icons/win/icon.ico — prune=true — out=release-builds — version-string.CompanyName=CE — version-string.FileDescription=CE — version-string.ProductName=\”Electron Tutorial App\””,
“package-linux”: “electron-packager . electron-tutorial-app — overwrite — asar=true — platform=linux — arch=x64 — icon=assets/icons/png/1024x1024.png — prune=true — out=release-builds”
Replace “electron-tutorial-app” (in package-win and package-linux) with the name you want for the packaged application name and ProductName with the name of your application in package-win.
- Add application icons in a new folder assets/icons-> mac ( .icns file for mac), assets/icons-> png (.png file for linux), assets/icons-> win (.ico file for windows)
- Now you can run the following commands in the terminal according to the os package you want:
npm run package-mac
npm run package-win
npm run package-linux
2. Approach 2:
Using angular electron boilerplate repository from github and embedding your application in it.
- git clone https://github.com/maximegris/angular-electron.git
- npm install
- Copy the application component bundles(component.ts + component.html+ module.ts + routing-module.ts + service.ts + any other file/module) from your application to src/app/components of the boilerplate code.
- For the main app component (app.module.ts, app.component.ts etc), copy file content of each individual file from your project to boilerplate’s main app component/module.ts.
- Install the required npm packages required in the new components added, keeping in mind the version compatibility of the packages.
- Look for missing files and packages required in every component.
- Once the project is up and running, it can be packaged using the electron build scripts in package.json.
3. Approach 3:
Using the existing url of the website to load the desktop application
- Create a new project folder.
- Cd to the project directory
- Npm init (for package.json file), with entry point → main.js
- Add electron to dependencies in package.json and run:
npm install
- Create a new file main.js. Sample code snippet:
const { app, BrowserWindow } = require(‘electron’)
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true } })
win.loadURL(‘https://example.com')
win.webContents.openDevTools()
}
app.on(‘ready’, createWindow)
app.on(‘window-all-closed’, () => {
if (process.platform !== ‘darwin’) {
app.quit() } })
app.on(‘activate’, () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow() } })
Replace the url being loaded in createWindow() with the url of your web application.
- Run the following command to load your electron project:
electron .
You might come across a number of challenges during the process.