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”.
Step 4: Run the Program
- Go to the file folder and give the command “cmd”.
- Now your terminal gets open.
- Enter the command “npm start”.
- Now your program will debug and run.
Output:
Error:
- I got the error in the package.json file.
- If you get the error means just change the line to,
- package.json module
- “main”: index.html “, and change this line as “main”: “main.js”,
- Then, run the program.
Hope this tutorial will be useful for you. Thank you…