How to setup Electron.js for desktop application development, JavaScript/Node.js

in Project HOPE11 months ago

The go-to languages for building desktop applications for most people is the C, C++ and C# language.

Other alternatives include Python, Java and Perl but not many people pay attention to JavaScript as a suitable language for web application development.

Fortunately for we JavaScript eggheads, the vast array of JS frameworks available now has made it possible for use to be able to use JS for virtually anything, including Desktop application development.

When it comes to using JavaScript for desktop application development, the tool for that is Electron.js.

Electron.js is a JavaScript framework that can be used in conjunction with HTML and CSS to build desktop apps.

In this tutorial we will learn how to set up a desktop application using Electron.js

Creating a Electron.js app

First we need to create a project directory and open the directory in Command Prompt.

We then run this command to generate a package.json file which will specify all our dependencies

npm init

In your package.json we have to explicitly specify that the project should be run as an electron based project instead of a Node.js project outrightly.

In the scripts objects add a new line to make the package.json file look like this

enter image description here

That way, whenever we run npm start command from the console the project will be started as an electron project.

Next, we have to install Electron.js itself and to do that we will run the following command in the console

npm install electron

After making sure that electron has been installed, the next thing to do is to create a index.js file and add the following code in it

const { app, BrowserWindow } = require('electron')

function  createWindow () {
    const  win = new  BrowserWindow({
        width:  800,
        height:  600,
        webPreferences: {
            nodeIntegration:  true
        }
    })

    win.loadFile('public/index.html')
}

app.whenReady().then(createWindow)

app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit()
    }
})  

app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
        createWindow()
    }
})

The function createWindow() will create a new browser window that will display the contain the contents of the app.

createWindow() helps us to define certain characteristics of the app such as the default width and height of the view and also the default file to be loaded for display when the app window opens.

win.loadFile('public/index.html')

The code above indicates that when the browser window opens, the file to load is the index.html file in the public directory.

Now we will create a new folder public in the root of the project and in the new folder add a file index.html.

You can add any starter code in index.html for testing, mine is

<p>Welcome to Hive Electron Tutorial</p>

If we run npm start in the project directory we will see a new window created like the one below

enter image description here

You can now go on and start building whatever you have in mind, you can integrate Electron with any frontend framework such as Angular/React.

You can also add backend packages such as Express.js/Hapi.js.

Happy building.

Sort:  

This post has been manually curated by @bala41288 from Indiaunited community. Join us on our Discord Server.

Do you know that you can earn a passive income by delegating to @indiaunited. We share 80 % of the curation rewards with the delegators.

Here are some handy links for delegations: 100HP, 250HP, 500HP, 1000HP.

Read our latest announcement post to get more information.

image.png

Please contribute to the community by upvoting this comment and posts made by @indiaunited.

Congratulations @gotgame! You have completed the following achievement on the Hive blockchain and have been rewarded with new badge(s) :

You distributed more than 57000 upvotes. Your next target is to reach 58000 upvotes.

You can view your badges on your board And compare to others on the Ranking
If you no longer want to receive notifications, reply to this comment with the word STOP

Do not miss the last post from @hivebuzz:

Introducing the HiveBuzz API for applications and websites
Support the HiveBuzz project. Vote for our proposal!
 11 months ago Reveal Comment

Upvoted 👌 (Mana: 7/21)