Building a Desktop application using Angular and Electron

Hello Geeks! Web apps are on boom these days. Many of us develop small web apps while we are learning things. Have you had any thought of converting your web app into a fully installable Desktop app? What if a single app can serve both purposes? Yes, You are correct you can convert your web app into a Desktop application using this open-source framework called Electron.

First things first you need to build a web app using any of the frameworks you are comfortable with. Angular, React, Vue anything. Even you can use only plain HTML, CSS, and Vanilla JS (Pure Javascript lol).

As I am an Angular nerd I built a Kanban Board app using Angular.

Now build your web app using any web-pack builder (In angular @angular/cli will do that for you).

ng build --prod

Now the above command will build your project into /dist folder

dist/your-project-name

Now let us get into the Electron part.

The official documentation is clear. you can follow that or if you are too lazy to open a new tab :) just follow this.

mkdir kanban-board && cd kanban-board

kanban-board is my app name. you can replace that with yours.

Initiating a package.json file in our folder,

npm init -y

Installing electron,

npm i --save-dev electron

Create a main.js file with the following content,

Copy the dist folder of your project we built initially and paste it into the current project folder.

Tweak for angular apps.

Replace <base href=”/” /> in index.html with <base href=”./” />

The current project structure will be like

Modifying package.json

Now run,

npm start

Tada!

Your app will open in a new window that gives us feel like a native desktop application.

Building electron project for installable file (.exe or .deb )

npx @electron-forge/cli import

electron-forge will create a distributable file of our electron project.

Building our electron app

npm run make

This will create an appropriate distributable file according to your current operating system.

As I am using Linux(Ubuntu 16.04) it created a .deb file,

out/make/deb/x64/kanban-board_1.0.0_amd64.deb

Now we have an installable .deb file with us. we can use it to install it in our operating system.

Installing .deb files in Linux

sudo dpkg -i kanban-board_1.0.0_amd64.deb

Once the installation finishes up, you can open your installed application.

This is all about Converting a web app into a desktop app using Electron. If you are stuck anywhere in between the whole process feel free to comment.

Ps: This is my first Medium article 😃. suggestions are always welcomed 😉!