\r\n"scripts": {\r\n "start": "electron ."\r\n}\r\n<\/pre>\n<\/li>\n<\/ul>\nNext up let’s add the following to the main.js file<\/p>\n
\r\nconst electron = require('electron');\r\n\r\nconst { app, BrowserWindow } = require('electron')\r\n\r\nfunction createWindow () {\r\n \/\/ Create the browser window.\r\n let win = new BrowserWindow({\r\n width: 800,\r\n height: 600,\r\n webPreferences: {\r\n nodeIntegration: true\r\n }\r\n })\r\n\r\n \/\/ and load the index.html of the app.\r\n win.loadFile('index.html')\r\n}\r\n\r\napp.on('ready', createWindow)\r\n<\/pre>\nAs you can see, we require<\/em> electron, along with the app<\/em> object and BrowserWindow<\/em>. Next we create a BrowserWindow and load the index.html into it, so let’s supply something for it to load. <\/p>\nChange the index.html to the following<\/p>\n
\r\n<!DOCTYPE html>\r\n<html>\r\n <head>\r\n <meta charset="UTF-8">\r\n <title>Hello World!<\/title>\r\n <!-- https:\/\/electronjs.org\/docs\/tutorial\/security#csp-meta-tag -->\r\n <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" \/>\r\n <\/head>\r\n <body>\r\n <h1>Hello World!<\/h1>\r\n We are using node <script>document.write(process.versions.node)<\/script>,\r\n Chrome <script>document.write(process.versions.chrome)<\/script>,\r\n and Electron <script>document.write(process.versions.electron)<\/script>.\r\n <\/body>\r\n<\/html>\r\n<\/pre>\nThis demonstrates HTML content as well as using JavaScript within it.<\/p>\n
Now run npm start<\/em> and view your first electron application.<\/p>\n","protected":false},"excerpt":{"rendered":"Let’s start by installing the latest version of electron using npm i -D electron@latest The Writing Your First Electron App goes through the process of setting up your first electron application, I’ll recreate some of these steps below… Create a folder, mine’s test1 Run npm init, when asked for the entry point type main.js instead […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[276,45],"tags":[],"class_list":["post-7758","post","type-post","status-publish","format-standard","hentry","category-electron","category-javascript"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7758","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/comments?post=7758"}],"version-history":[{"count":5,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7758\/revisions"}],"predecessor-version":[{"id":7787,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7758\/revisions\/7787"}],"wp:attachment":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/media?parent=7758"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/categories?post=7758"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/tags?post=7758"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}