How to Create Your First App in Electron js?

How to Create Your First App in Electron js?Pin

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.

Create the FolderPin

Step 1: Create the Folder

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

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

  1. Go to the folder and double-tap the “package” file.
  2. 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>
create a new file in index.htmlPin

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

Step 4: Run the Program

  1. Go to the file folder and give the command “cmd”.
  2. Now your terminal gets open.
  3. Enter the command npm start”.
  4. Now your program will debug and run.
 create the first app in the electron js outputPin

Output:

Error:

  1. I got the error in the package.json file.
  2. If you get the error means just change the line to,
  3. package.json module
  4. “main”: index.html “, and change this line as “main”: “main.js”,
  5. Then, run the program.

How to Install ElectronJS and Node.js in Windows

Node.js

  1. Visit Node.js official page.
  2. Tap Node.js Recommended version.Node.js official pagePin
  3. Double-click the setup file.
    setup filePin
  4. Tap Install and then follow the command.install Node.jsPin
  5. Finally tap finish.
  6. Now you can see Node.js command on your Window.

Test it

Check out whether Node and npm are installed by running simple commands to know about their versions. Use command prompt

First test node by

$ node -v

Test NPM by

$ npm -v
Node and npm installationPin

ElectronJS

Run the following commands to install electron globally.

$ mkdir electron-app

$ cd electron-app

This command is specially used to create an individual file for electron js.

Note: electron-app is my file name.

$ npm init -y
create an individual file for electron jsPin

This command for creating package.json

$ npm install electron -g

$ npm install

This command is for installing npm.

$ npm install electron -save

This command is used to install it as a development dependency in your apps.

This is the final command for install electron js.

$ electron
install electron jsPin

Now your electron js will be created.

electron jsPin

If you want to install and runElectron API Demos,

Download and Install Git on your System.

On your command panel, run the following codes.

$ git clone https://github.com/electron/electron-api-demos
$ cd electron-api-demos
$ npm install
$ npm start

That's all.

I hope this tutorial will be useful for you. Thank you…

About The Author

Scroll to Top
Share to...