![GSWELogoStandalone.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1508628518/samnevv4boirjfzs2jaq.png) # Getting Started with Electron Pt 4: Finishing it Up *written on Busy (beta)* --- This is the 4th and final post in a tutorial series on building applications with Electron. In this post, we'll dig into the rest of the code to understand how the app comes together. We'll also cover some of the nuances of building an Electron application on macOS. --- ## Part 3 Exercise Solution Last time, we left off with a nice exercise to solidify the lessons in the post. For convenience, it was: > Using the concepts of IPC from this post, update the main and renderer processes so that clicking the notification appends the message "Hello from Notification" beneath the "Hello Steemit!" text.

![image.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1508627841/v1xcdpprxn998iam3gfp.png)

So how do we do it? Here's the solution: #### index.html ``` Sample Menubar App

Hello Steemit

``` - Add an `id` to the `

` element so it's easy to query from Javascript --- #### index.js ``` ipcRenderer.on('append-message', (evt, msg) => { document.querySelector('#message').innerHTML += `
${msg}
`; }); ``` - Add an event handler for an event type, `append-message`, that we'll call from main.js. - The handler will receive an `evt` (event) object with information about the event itself, and a `msg` parameter, which will be the message we pass in from main.js - Query the DOM for the `id="message"` we put onto the `

` tag - Append a template string of a `
` with the content of the message to the element's `innerHTML` - Note: it's not technically good practice to assign a `
` to the children of a header tag, but for a simple solution, this will do. --- #### main.js ``` let tray = undefined; let window = undefined; let webContents = undefined; ``` - In the header of main.js, define a new variable, `webContents` in the global scope, and set it to undefined --- ``` app.on('ready', () => { // ... code omitted ... // Make the popup window for the menubar window = new BrowserWindow({ width: 300, height: 350, show: false, frame: false, resizable: false, }) // Tell the popup window to load our index.html file window.loadURL(`file://${path.join(__dirname, 'index.html')}`) // Get webContents of `window` to send messages webContents = window.webContents; // ... code omitted ... ``` - In the `app.on('ready')` event handler, after creating the window, assign the `webContents` variable to `window.webContents` --- ``` ipcMain.on('notification-clicked', () => { showWindow(); webContents.send('append-message', 'Hello from Notification'); }) ``` - In the event handler for `notification-clicked`, call `webContents.send` with the `append-message` event, and our message, `Hello from Notification`, as the second parameter. --- And that's all there is to it. Let me know if you have questions in the comments. ## Tooling Updates (yarn, npm, and electron-prebuilt) As I mentioned in [Part 3](https://nd.busy.org/technology/@ryanbaer/getting-started-with-electron-pt-3-how-the-hell-does-this-thing-work), it was shortly after I had published [Part 2](https://nd.busy.org/education/@ryanbaer/getting-started-with-electron-a-basic-menubar-app-part-2) that Facebook published [yarn](https://yarnpkg.com/en/), an alternative to `npm` that enhances it. And I've since switched to `yarn` for all of my Node-based projects. ### Why Yarn? As noted on [Facebook's page for Yarn](https://code.facebook.com/posts/1840075619545360), the tool was born out of frustration with some of the technical limitations and unoptimized aspects of `npm` when writing large, production-ready apps at scale. Particularly, they had trouble with the consistency, security, and performance of `npm`. So they took the time to build a very reliable and efficient alternative that works seamlessly with `npm`. Some of the main benefits of using it are: - Speed: it caches the packages you download from your projects, so you save a ton of time compared to the old `npm install` when the packages you need are already on disk. It's technically even possible to do a full offline install of a package.json provided you already have all the packages from other projects. - Security: unlike NPM, it verifies the checksums of the packages and won't install if something is off - Parallel Downloads / Installs: Unlike npm, which works serially, yarn will download and install packages at the same time, also reducing the amount of time from the old `npm install`. ### How to start using yarn? Starting to use yarn in a given project is platform-specific, so it's best that you go to the Installation page yourself: [Installation | Yarn](https://yarnpkg.com/en/docs/install#mac-tab). But if you're on macOS, like I am, your best bet is a simple install via [Homebrew](https://brew.sh/): with: `brew install yarn`. Regardless of how you install, once you've done it, you should be able to verify via command-line: ``` $ yarn -V 0.21.3 ``` And once you've done that, you can go ahead and install packages in any project via yarn simply by `cd`ing to the project's directory and typing: `yarn` or `yarn install` Similarly, adding packages is done via: - `yarn add ` to add to `dependencies` - `yarn add -D ` to add to `devDependencies` Finally, removing packages is done via: `yarn remove ` So if you've used npm before, the interface is fairly similar and straight forward. One of the nice perks is that, instead of typing `npm run build:dev`, you can now simply say `yarn build:dev`. ### electron or electron-prebuilt? In the time since writing Part 2 of this series, the package we have been using to build our Electron app, named `electron-prebuilt`, has been renamed to `electron`. We'll need to update our `package.json` with the following commands: `yarn remove electron-prebuilt` `yarn add electron` This has an additional necessary benefit of upgrading our Electron version. One issue that I notice in a lot of the Electron apps that get open-sourced is that the authors will create a cool or unique app and then never keep up with the update cycle of Node and Electron. This is actually a somewhat risky thing to do, since Chromium (on which Electron is based) and Node are regularly patched for security vulnerabilities. ## Digging into the Code Now it's time to go through everything and start to understand how the code creates the app that we have. Let's start off easy with index.html. ### index.html ``` Sample Menubar App

Hello Steemit
``` This is a fairly straightforward file containing the user interface of our app as an HTML page. In the section you can see our "Hello Steemit" message. Of equal importance is the `