This course is out of date and does not reflect our standards or industry best practices.

Check out a free preview of the full Electron Fundamentals, v2 course:
The "Using Node Modules" Lesson is part of the full, Electron Fundamentals, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Steve gives an overview of the file that transforms the markdown into the HTML view of the app, then demonstrates how Electron allows the user to write node in the HTML file.

Get Unlimited Access Now

Transcript from the "Using Node Modules" Lesson

>> Steve Kinney: So, now we've got a user interface, but, here's the thing, it doesn't do anything just yet. If you look at the HTML file, we can see that it's a markup and there is no JavaScript happening. I have a renderer.js, and it actually has some code in it.

[00:00:21] And let's actually take a tour of that code first and then we'll go ahead and wire it up. So not a lot exciting happening, the most exciting is line one, but I'm going to skip that for a second. And we'll just talk about the other parts, which I have gone through the tedious labor of getting you a bunch of query selectors.

[00:00:41] So, these are effectively all of the different DOM elements that you will need to work with as we build this application together. You can thank me later.
>> Steve Kinney: We have this function called renderMarkdownToHtml, which basically takes the HTML view, that's that right side. And it takes the markdown content that we pass in and it sets the, basically marked as a library that converts markdown to HTML.

[00:01:08] We go ahead and we just assign it with innerHTML in there, and we sanitize it. This is a desktop application, if they want to go ahead and script inject themselves, fine. But we're being polite and we're sanitizing the markup first, so that it doesn't actually do anything along those lines.

[00:01:25] And then we have an event listener, which is, every time that user lifts their finger off a key. We are going to get the value of the text area that is the markdown, we will go ahead and render it into the HTML view, right? So that's our entire application, right?

[00:01:43] Other than line 1, this application would work in the browser, right? Like, hey, put some event listeners, do some stuff, line 1 is where things become problematic. Which is, we are pulling in this library for rendering markdown using require, which doesn't exist in the browser. If you don't believe me, open up Chrome, open up the dev tools, type require and see what happens to you.

[00:02:09] All right, so if we pasted this code, it wouldn't work, right? We'd have to use something like Browserify to go ahead and bundle our code for us, so on and so forth. And then it would work, but this will actually blow up. But in Electron, we have access to all of the browser APIs and all of the Node APIs.

[00:02:27] Together, it's not like, I write some Node code and some browser code, they are legitimately together, you have access to both. So I could theoretically use require in here, at the same time, I could throw an alert, which does not exist in Node, right? Or a document.eventlistener or anything along those lines, all the stuff in Chrome is fair game, all the stuff in Node is fair game, right?

[00:02:50] And so that takes a little bit of time to wrap your head around, but it's okay. So we never called this file, and so let's go ahead and let's fix that, cool. So let's go into index.html, and all we're going to do is we're going to add a script tag.

[00:03:10] And you're like, I know how to add a script tag, I'll just do a script source render.js. Turns out we don't even need to do that, we can just make a script tag, and we say require./ renderer, right? Because again, all of Node works just fine, I can go ahead and I can read and write to the Filesystem in my HTML file.

[00:03:32] If that strikes you as a good idea, you're welcome to do it, but you can pull in anything you want. Even from your HTML file, it's all fair game, it all works.
>> Steve Kinney: So if we go ahead now, we will do an npm start.
>> Steve Kinney: You see that our application effectively works, we can type some markdown, everything's cool.