How to Create Your First App in Electron js?

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 FolderCreate 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 promptNow 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>

10. After completing these steps save the program again by clicking “ctrl+s”.create a new file in index.html

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.

Output: create the first app in the electron js 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.

Hope this tutorial will be useful for you. Thank you…