How to setup Electron.js for desktop application development, JavaScript/Node.js
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
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
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.
@tipu curate
Upvoted 👌 (Mana: 7/21)
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.
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 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:
Support the HiveBuzz project. Vote for our proposal!