Create desktop version of a web app with Electron and Nodejs

Electron is Nodejs framework which let you build app with the notion of one code base. With electron you can create cross-platform desktop apps with JavaScript, HTML, and CSS. It is opensource project powered by the Github community. For more info on Electron on Official website

Using Electron we can build platform independent version of  Web app ( with out regenerating all the code again) . Some of the feature may not fully supported

In our example, create a app for Lets get started.


For our project and all Electron projects , you should have the following

  • Nodejs (
  • Electron forge
  • Editor of any choice (choose between Atom and Visual code will be wise)

Head over and get the Nodejs which allow you use JavaScript libraries.

Install Forge

Electron forge help us to quickly create project with all file structure we needed. Lets install it

npm install create-electron-app -g

Now we can use create-electron-app to build app as follows

nmp create-electron-app myapp

run the app using the following command on terminal

cd myapp
npm run start

The default app launches a new html page as application. We need website instead of the html page. Edit the following portion of index.js

  // and load the index.html of the app.
    mainWindow.loadFile(path.join(__dirname, 'index.html'));



Save the file ,run again and here is your app

Build executable

Now our app is almost ready , let build the executable which will be stored in output folder of our project.

npm run make

Optionally we can change application Name, Icon etc using the JSON package file.

Published by


A developer,teacher and a blogger obsessed with Python,Dart and open source world from India

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.