Load CSS in a Electron BrowserWindow

Cameron Nokes
InstructorCameron Nokes

Share this video with your friends

Send Tweet
Published 5 years ago
Updated 2 years ago

In this lesson we'll learn how to load CSS in an Electron BrowserWindow, which is just like loading CSS into the browser. We’ll also use the ready-to-show event to only display our BrowserWindow when its rendering is complete.

[00:00] We've already set up our main process JavaScript. We're creating a browser window, and we're loading an HTML file into it, index.html. Additionally, in that index.html file, we're requiring renderer.js, which is printing out the Electron version to the screen.

[00:18] What we want to do here is add a CSS file to style our content. Loading CSS in a web page in Electron is the exact same as loading CSS in the browser. We're going to add our link element here, set the rel attribute to stylesheet, and the href to style.css.

[00:37] Let's create our style.css. We're just going to do some simple styling here. What this does is it centers everything. We give it a nice color and a sans serif font. Let's run our NPM start script to see what it looks like.

[01:01] Great. We can see the CSS is getting loaded on the page, but in order for it to feel more like a native app, let's make it so that we don't even show the window until the DOM has been completely rendered. We're loading files locally, so there's not any real network latency to speak of, but it still takes some time for Chromium to parse and render the DOM.

[01:19] In order to do that, we're going to jump back into our main process JavaScript. Let's go to our main.js here. In our browser window constructor call, we're going to pass an option for show equals false. Now, if we ran our application at this point, the browser window wouldn't even show up.

[01:38] Let's add a ready to show event handler. In here, we'll tell our main window to show. The ready to show event is like the DOM ready event. It is emitted when a renderer process is done drawing for the first time.

[01:56] If we show our browser window when it's ready to show, we can be sure that the user will see a fully rendered page without any flickering or flashes of unstyled content. Let's run it with our NPM start script.

[02:08] We can see that the window showed up just a tiny bit slower than before, but when it did show up, it was completely ready to show, and there was no flickering.

James Barlow
James Barlow
~ 5 years ago

Looks like you did a bit of refactoring after first lesson? index.js -> main.js, plus introducing renderer.js to get the version number.

Ady
Ady
~ 5 years ago

how and when did you create renderer.js It just seems to have appeared from nowhere.

Juan
Juan
~ 4 years ago

The file renderer.js is created in lesson 3, which is a pro lesson.

kerembaydogan
kerembaydogan
~ 4 years ago

So I guess pros watch lessons like 1,3,2,5,4.... ??

~ 4 years ago

yeah, as much as I like egghead.io, this kind of stuff happen far too frequently for the price.