paircast-hello-world.md

All right. So now if I run npm start here we launch Electron and we get this basic Hello World. ^03:05

Now there's a problem here. It's dark. It's because I'm using dark modes.

Why don't we make it light? ^03:09

electron.exe > Hello World! ^03:10

Code.exe > ● index.html - electron-notify - Visual Studio Code ^03:20

And the only thing we have to do to do that is to simply go and at a style tag and add a background color. ^03:20

^03:38

Commit 0bf07786180f4cc6f583ecd001d85be35298f687
--- index.html
+++ index.html
@@ -6,7 +6,10 @@
     <title>Hello World!</title>
     <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
     <style type="text/css">
+        body {
+            background-color: white;
+        }
     </style>
 </head>
 

So now if I run npm start. ^04:29

Code.exe > index.html - electron-notify - Visual Studio Code ^04:30

You have a white background. ^04:34

And Hello World! ^04:37

So the only other thing we're going to do today is add a notification. ^04:38

That's pretty easy. We'll just go down to the tutorial. ^04:42

Copy the notification script. ^04:46

And paste it into main.js. ^04:49

Code.exe > main.js - electron-notify - Visual Studio Code ^04:50

^04:51

Commit b011340fe6d0395e82cf59ae9224d14f97f4ea77
--- main.js
+++ main.js
@@ -1,5 +1,18 @@
 const { app, BrowserWindow } = require('electron')
 
+const { Notification } = require('electron')
+
+function showNotification() {
+    const notification = {
+        title: 'Basic Notification',
+        body: 'Notification from the Main process'
+    }
+    new Notification(notification).show()
+}
+
+app.whenReady().then(createWindow).then(showNotification)
+
+
 function createWindow() {
     const win = new BrowserWindow({
         width: 800,

Now again, Paircast saw that, we do node launch. There we go, that's a basic notification from our app. And just for fun, why don't we make it say "Hello World." ^04:53

^05:00

electron.exe > Hello World! ^05:00

Hello, world. ^05:05

^05:09

Commit 2eece867e437c390cb74e7761f40a9cd6dd98860
--- main.js
+++ main.js
@@ -4,7 +4,7 @@ const { Notification } = require('electron')
 
 function showNotification() {
     const notification = {
-        title: 'Basic Notification',
+        title: 'Hello World!',
         body: 'Notification from the Main process'
     }
     new Notification(notification).show()

Code.exe > main.js - electron-notify - Visual Studio Code ^05:10

I now know from great will run it one last time here. ^05:13

^05:16

Commit 4a63f4dba53d697f81edf7791a458b92b9a7b656
--- main.js
+++ main.js
@@ -5,7 +5,7 @@ const { Notification } = require('electron')
 function showNotification() {
     const notification = {
         title: 'Hello World!',
-        body: 'Notification from the Main process'
+        body: 'I now know electron!'
     }
     new Notification(notification).show()
 }

ConEmu64.exe > Cmder ^05:20

There we go. "Hello World, I now know Electron." Great! ^05:22