Electron.js is a popular framework for building desktop applications using web technologies such as JavaScript, HTML, and CSS. Here are the steps to get started with building desktop applications using Electron.js:
- Install Node.js and
npm
(Node Package Manager) : Electron.js is built on top of Node.js. Therefore, we need to have Node.js installed on our machine. You can download them from the official Node.js website. - Install Electron.js: After installing Node.js, we can install Electron.js by running the following command in our terminal:
npm install electron --save-dev
This will install the latest version of Electron.js as a development dependency in your project.
3. Create a project directory: Let us create a new directory for our Electron.js project and navigate to that directory in our terminal.
mkdir electron-prj
cd electron-prj
4. Initialize your project: Run the following command to initialize our project with a package.json file:
npm init -y
This will create a package.json file in your project directory.
5. Create the main.js file: Create a file named main.js in our project directory. This will be the entry point for our Electron.js application.
touch main.js
6. Add the following code to your main.js file:
const { app, BrowserWindow } = require('electron')
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
win.loadFile('index.html')
}
app.whenReady().then(() => {
createWindow()
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
})
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
This code sets up a basic Electron.js application with a window that loads an index.html file.
7. Create the index.html file: Create an index.html file in our project directory. This file will be loaded in the main window of our Electron.js application.
The folder structure should look like this:
8. Add the corresponding HTML, CSS, and JavaScript code to our index.html file.
9. Update the package.json
file with the script below :
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "electron ."
},
10. Run our Electron.js application: Run the following command to start the Electron.js application:
npm start
This will launch our Electron.js application.