Electron Fundamentals, v2

Electron Fundamentals, v2 Dialog Meets Renderer Solution


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 "Dialog Meets Renderer Solution" 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 live codes the solution to the exercise.

Get Unlimited Access Now

Transcript from the "Dialog Meets Renderer Solution" Lesson

>> Steve Kinney: Let's do this one together. So previously we had this alert in here, and what we want is when the user hits that open file button, instead of alerting them that they hit the button that they just clicked, we want to figure out from the main process, hey, can you trigger that getFileFromUser function?

[00:00:17] Right, can you trigger that file dialogue? Then eventually, after that we're gonna have to figure out how to then read that file from the file system and communicate that back to the renderer process. Which, again, the main process is not a server, the renderer processes are not clients, but you are not mistaken for using the metaphor of almost like a client server request.

[00:00:37] So to talk to the main process, we need that remote module that we used in the dev tools earlier. So we can say, const { remote }. We can pull that from the electron library. Remote is not available in the main process, right? There are different modules available in the main process than for in the renderer.

[00:00:58] This is why we even need to talk to the main process to get the dialogue, right? Cuz dialogues are only available in the main process, but remote gives us that kind of communication bridge. And with that, we can get almost anything from the, remote will give us everything from the require('electron') in the main process, but it won't actually allow us to access the code from main.js.

[00:01:22] For that, we also need to require that, but we need to require it in context of the main process. So for instance, this won't work.
>> Steve Kinney: Right, cuz this will try to require it. Just a regular require will read that file, parse it and compile it in context of the renderer process.

[00:01:48] App and dialog are not available in the renderer process. So it will blow up. Instead, what we say is, hey, I need you to require this in the context of the main process using the remote module, right? So we use remote.require. And so now, we've got this mainProcess object, which is everything exported from main.js.

[00:02:12] We can call it in our renderer process, but all of that code executes back in the main process. And we'll look at a few diagrams in a second. But let's do it, and then we'll talk about it. So we've got mainProcess, and now if I scroll down the bottom,

>> Steve Kinney: We'll say mainProcess.
>> Steve Kinney: getFileFromUser. All right, let's take it for a spin.
>> Steve Kinney: Hit Open File,
>> Steve Kinney: And I got the dialogue. That is executing from the main process. Now I can select a file, and you can see it still console logs. That's not great. Let's talk a little bit about inter-process communication for a second before we solve this problem