Web applications may not be suitable in all situations. Maybe you need a desktop app rather than a web app. It is nearly impossible to create a desktop application using front end web developer languages like HTML5, JavaScript, Angular, CSS, etc.
I said “Nearly impossible”, because this is possible. We can use the help of Electron JS to achieve this goal.
Electron is a framework to create native desktop applications using web technologies like HTML, JavaScript, CSS, Typescript, etc.
You can build your app like a web-app using your development knowledge and can easily convert to a desktop app with the help of a few commands. It is possible to create desktop applications for Windows, Linux, and macOS. So it is cross-platform too.
Here, I will be using Angular 8 along with Electron JS to create a minimal desktop application.
Let’s begin!
We need to install Angular-CLI as a first step. This will help to create our application. So, open terminal/CMD and install angular-cli using the below command
npm install -g @angular/cli
This will install angular globally with the help of npm(Node package manager). Angular CLI can create a basic angular project with a certain directory structure to make the development easier.
Now we need to create a new project using the below command
ng new angular-electron
here, ng is the abbreviation of Angular. “new” will create a new project with the name “angular-electron”.
It will contain a set of directories and files.
To test the angular project, we need to go to the angular project directory using the command,
cd angular-electron
Then run the command,
ng serve
This will make angular running at localhost:4200.
Go to browser and give the link http://localhost:4200. It will show the below page
So, angular is running successfully. Keep it as it is for now. You can make more changes using your coding capabilities.
Now we can go straight to electron installation and configuration.
Now we need to add the electron dependency to our angular project using the command
npm i -D electron
Here “i” denotes “install”. We can use either “i” or “install”. -D will install the dependency as a developer dependency.
Because we don’t need electron dependency in our angular application. It will act as a dependency outside the app dependencies.
Now install types for typescript language. We need to add a typescript for electron coding.
This also will be a dev dependency. The command is
npm i -D @types/electron
We have completed the installation of all the dependencies to create our “Angular 8 + Electron” application. Some configurations are necessary to run the electron application.
Create a directory “electron” at the root folder of the “angular-electron” application.
Then create a “tsconfig.json” file. This is the typescript configuration file which will help us to render the Typescript code which we will write soon.
You can just copy the “tsconfig.json” from the “angular-electron” directory and paste inside the “electron” directory.
I changed the “outDir” value to “./dist” and
“module” to “commonjs”. So the final file will be
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/ ",
"sourceMap": true,
"declaration": false,
"module": "commonjs",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"importHelpers": true,
"target": "es5",
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2018",
"dom"
]
}
}
Now change the index.html file in angular root and change the line
<base href="/">
To
<base href="./">
This change is necessary to make the electron app to work flawlessly.
Now create a file “main.ts” inside “electron” directory. The content of the file will be
import { app, BrowserWindow } from 'electron';
import * as path from 'path';
import * as url from 'url';
import * as electron from 'electron';
let win: BrowserWindow;
// Will call createWindow function on ready
app.on('ready', createWindow);
// This code is needed for mac os as it will act differently
app.on('activate', () =>
{
if (win === null) {
createWindow();
}
});
/**
* Function to create new window.
*/
function createWindow() {
win = new electron.BrowserWindow(
{
x: 0,
y: 0,
width: 800, // window width
height: 600, // window height
webPreferences: {
nodeIntegration: true,
},
});
// uncomment below line to hide the menu bar
// win.setMenuBarVisibility(false);
win.loadURL(
url.format({
pathname: path.join(__dirname, `/../../../dist/angular-electron/index.html`),
protocol: ' file:',
slashes: true,
})
);
// Uncomment below code to prevent showing the dev tools
// win.webContents.on('devtools-opened', () => {
// win.webContents.closeDevTools();
// });
// Uncomment below line to show the dev tools by default
// win.webContents.openDevTools();
// make window object null on close
win.on('closed', () => { win = null; });
}
If you are familiar with Typescript, then can easily understand the above code. Here the function “createWindow” will create new electron window with a height of 600 px and height of 800 px. The path name is the path to the index file to show in the electron window. This file will be created once we run the ng build command (will explain in the coming session).
Make some changes in package.json file in angular root folder.
Add the key “main” with path “electron/dist/main.js” and add a key “start:electron” under “scripts” with value “ng build –base-href ./ && tsc –p electron && electron .”. This will act as the command to run electron app.
Now the portion of package.json will looks like
"name": "angular-electron",
"version": "0.0.0",
"main": "electron/dist/angular-electron/main.js",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"start:electron": "ng build --base-href ./ && tsc --p electron && electron ."
},
That’s it. We are done configuring our electron app with angular.
Now try running the electron app with command
npm run start:electron
It will take some time for building the app and will open the app like below
Now enjoy creating your desktop application using angular 8.
Happy coding
