First and foremost, create a local project folder on your machine. Then, write this command in the terminal from the root project level.
Run
Once you have main.js, index.html, and package.json components, then finally run the app!
npm start
You did it! See how simple it was to get started on the Electron app. You can integrate Vue.js, React.js, Backbone.js and many other frameworks to create a renderer. ðŸ’
npm init
Enter the below information to generate packge.json
{
Enter the below information to generate packge.json
{
"name": "electron-app",
"version": "1.0.0",
"description": "Tutorial for getting started on building an elctron app :)",
"main": "main.js",
"author": "your name"
"license": "ISC"
}
Check out the package.json
{
Check out the package.json
{
"name": "electron-app",
"version": "1.0.0",
"description": "Tutorial for getting started on building an elctron app :)",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "your Name",
"license": "ISC"
}
If the main is not present in the package.json, Electron will try to load the index.js as it normally does with node.js.
Now, add a start script to give instructions on how to start an application. Since this is not a normal node app, so you wouldn't start by 'node .' command. Instead, you will start an app like this,
{
If the main is not present in the package.json, Electron will try to load the index.js as it normally does with node.js.
Now, add a start script to give instructions on how to start an application. Since this is not a normal node app, so you wouldn't start by 'node .' command. Instead, you will start an app like this,
{
"name": "electron-app",
"version": "1.0.0",
"description": "Tutorial for getting started on building an elctron app :)",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"author": "your name"
}
Install the electron framework package using npm.
npm install electron --save
Code
As I mentioned earlier, Electron uses node.js runtime that means you could use javascript principles to create an app. You can find all the Electron APIs here.
Let's create an entry point or main.js for our application and import all the Electron module.
const electron = require('electron')
Create an 'app' and 'BrowserWindow' variables from the 'electron' module
const { app, BrowserWindow } = require('electron')
A desktop application doesn't work like other browser pages or mobile apps. It needs a desktop window to showcase different rendering pages just like any other desktop application.
Let's create a function that will create a desktop window with custom size preferences that will load the HTML file.
function createWindow ()
Install the electron framework package using npm.
npm install electron --save
Code
As I mentioned earlier, Electron uses node.js runtime that means you could use javascript principles to create an app. You can find all the Electron APIs here.
Let's create an entry point or main.js for our application and import all the Electron module.
const electron = require('electron')
Create an 'app' and 'BrowserWindow' variables from the 'electron' module
const { app, BrowserWindow } = require('electron')
A desktop application doesn't work like other browser pages or mobile apps. It needs a desktop window to showcase different rendering pages just like any other desktop application.
Let's create a function that will create a desktop window with custom size preferences that will load the HTML file.
function createWindow ()
{
const win = new BrowserWindow({
width: 1000,
const win = new BrowserWindow({
width: 1000,
height: 800,
webPreferences: {
nodeIntegration: true
}
})
win.loadFile('index.html')
}
Since some APIs in the back-end takes time to load so we need to make our app smart that only creates windows after every API is loaded and all the events occurred including asynchronous functions.
app.whenReady().then(createWindow)
It's a good practice to quit an app and kill the process if the window is closed by the user.
app.on('window-all-closed', () => {
if (process.platform !== 'darwin')
webPreferences: {
nodeIntegration: true
}
})
win.loadFile('index.html')
}
Since some APIs in the back-end takes time to load so we need to make our app smart that only creates windows after every API is loaded and all the events occurred including asynchronous functions.
app.whenReady().then(createWindow)
It's a good practice to quit an app and kill the process if the window is closed by the user.
app.on('window-all-closed', () => {
if (process.platform !== 'darwin')
{
app.quit()
}
})
There are different names for different platforms:
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0)
app.quit()
}
})
There are different names for different platforms:
- Windows: win32
- MAC: darwin
- Linux: linux
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0)
{
createWindow()
}
})
Finally, let's add the basic index.html page for the rendering process to render the page and showcase it inside the window.
<!DOCTYPE html>
createWindow()
}
})
Finally, let's add the basic index.html page for the rendering process to render the page and showcase it inside the window.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<h1>Created my first Electron App! :)</h1>
</body>
</html>
Run
Once you have main.js, index.html, and package.json components, then finally run the app!
npm start
You did it! See how simple it was to get started on the Electron app. You can integrate Vue.js, React.js, Backbone.js and many other frameworks to create a renderer. ðŸ’