How to Create Your First App in Electron js?

Windows Tutorial

To create the first app in the electron js by using the visual studio code means read this tutorial this will help you.

Step 1: Create the Folder

Create the file folder in the C folder.
Go to the command prompt by clicking the folders on the upper side of your desktop screen.
Type the command “ npm init”.

Now your package.json file will be created in the folder.

Step 2: Install the Electron

After doing the above steps install the electron by giving the command,

npm install --save-dev electron

Step 3: At Visual Studio Code

Go to the folder and double-tap the “package” file.
This will open in the visual studio code.

{
 "name": "app3",
 "version": "1.0.0",
 "description": "test",
 "main": "main.js",
 "scripts": {
   "start": "electron .",
   "test": "echo \"Error: no test specified\" && exit 1"
 },
 "author": "",
 "license": "ISC",
 "devDependencies": {
   "electron": "^4.0.0"
 }
}

3. Tap your program name and create a new file.

4. Name the file as “node.js”.

5. Enter the following code,

const electron = require('electron')

6. Again create a new file and name it as “main.js”.

7. Enter the following code,

const { app, BrowserWindow } = require('electron')
let win
function createWindow () {
win = new BrowserWindow({ width: 800, height: 600 })
win.loadFile('index.html')
win.webContents.openDevTools()
win.on('closed', () => {
  win = null

8. Again create a new file and name it as “index.html”.

9. Enter the following code,

<!DOCTYPE html>
<html>
 <head>
   <meta charset="UTF-8">
   <title>Hello World!</title>
 </head>
 <body>
   <h1>Hello World!</h1>
   We are using node <script>document.write(process.versions.node)</script>,
   Chrome <script>document.write(process.versions.chrome)</script>,
   and Electron <script>document.write(process.versions.electron)</script>.
 </body>
</html>

10. After completing these steps save the program again by clicking “ctrl+s”.