DEV Community

dwarfŧ
dwarfŧ

Posted on

installing and using electron

#watercooler

step 1
first you need to install npm and nodejs this will allow you to install electron.

step 2
run:

npm init
Enter fullscreen mode Exit fullscreen mode

it will ask you the following things:

This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sensible defaults. See `npm help init` for definitive documentation on these fields and exactly what they do. Use `npm install <pkg>` afterwards to install a package and save it as a dependency in the package.json file. Press ^C at any time to quit. package name: (tsv) eletron-app version: (1.0.0) description: entry point: (index.js) test command: git repository: keywords: author: license: (ISC) About to write to /home/sharpi/Documents/tsv/package.json: { "name": "eletron-app", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" } Is this OK? (yes)
Enter fullscreen mode Exit fullscreen mode

step 2
now install electron by running:

npm install electron
Enter fullscreen mode Exit fullscreen mode

step 3
Create a new file called main.js. Enter the following code in it:

const {app, BrowserWindow} = require('electron') const url = require('url') const path = require('path') let win function createWindow() { win = new BrowserWindow({width: 800, height: 600}) win.loadURL(url.format ({ pathname: path.join(__dirname, 'index.html'), protocol: 'file:', slashes: true })) } app.on('ready', createWindow)
Enter fullscreen mode Exit fullscreen mode

step 4
create a index.html and 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>
Enter fullscreen mode Exit fullscreen mode

step 5
inside package.json there is "scripts": {} and inside is the test command. so delete the "test" command and and replace the code with:

"start": "electron ./main.js"
Enter fullscreen mode Exit fullscreen mode

step 6
to run use:

npm run start
Enter fullscreen mode Exit fullscreen mode

step 7
enjoy coding and have a good day

Top comments (0)