Tag Archives: Electron

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 Wikipedia.org. Lets get started.

Pre-requisites

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

  • Nodejs (https://nodejs.org/en/)
  • Electron forge
  • Editor of any choice (choose between Atom and Visual code will be wise)

Head over https://nodejs.org/en/ 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'));

As

 mainWindow.loadFURL('https://wikipedia.org');

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.