1. <!DOCTYPE html> 2. <html> 3. <head> 4. <meta charset="UTF-8"> 5. <title>Hello World!</title> 6. </head> 7. <body> 8. <h1>Hello World!</h1> 9. <!-- All of the Node.js APIs are available in this renderer process.--> 10. We are using Node.js <script>document.write(process.versions.node)</script>, 11. Chromium <script>document.write(process.versions.chrome)</script>, 12. and Electron <script>document.write(process.versions.electron)</script>. 13. <script> 14. // You can also require other files to run in this process 15. //require('./renderer.js') 16. </script> 17. </body> 18. </html>
This is a simple HTML file, as you can see from the comment, all of Node's APIs are available to the renderer process, which is why you have access to the
process API (Line 10, 11, 12) that displays the version of Node.js , Chrome and Electron.js inside this HTML file.
You also can import the other
.js files using Node's
require keyword. At line 15, we've commented out the
Running the application
These three files: package.json, main.js and index.html are enough to get it run in our simple application. To run your first app, execute the following command from the app source directory:
Running app from the command prompt in Windows 10
You should see something similar to following image on your screen.
Electron's hello world app window
See errors using Chrome DevTools
Electron supports the Chrome DevTools Extension, which can be used to extend the ability of devtools for debugging popular web frameworks. See https://electronjs.org/docs/tutorial/devtools-extension.
To enable Chrome DevTools:
- Open main process file
- Find the line where you loaded index.html file at
mainWindow . loadURL ('file://' + __dirname + '/index.html').
mainWindow .webContents .openDevTools()after the above line.
Now close your app if already running then re-run again and you should see something similar to following image on your screen.
Electron's hello world app, DevTools enabled
Quick start (without writing the code)
To obtain Electron's quick start code, you will need to have following software installed on your computer:
This following command creates a copy of the electron-quick-start repository inside the duplicate-files-finder folder in the path from which the command was made:git clone https://github.com/electron/electron-quick-start duplicate-files-finder cd duplicate-files-finder npm install npm start
npm installwill install the dependencies of the above repository (including Electron). The
npm startwill execute the app.