JavaScript Everywhere

Chapter 19. Integrating an Existing Web Application with Electron

I tend to accumulate web browser tabs like a child at the beach collects shells. I don’t necessarily set out to collect them, but by the end of the day, I have dozens of tabs open across a few browser windows. I’m not proud of this, but I suspect that I’m not alone. As a result, I use desktop versions of some of my most commonly used web applications. Often, these applications offer no advantage over the web, but the convenience of an independent app makes them easy to access, find, and switch to throughout the day.

In this chapter, we’ll look at how we can take an existing web application and wrap it in an Electron shell. Before proceeding, you will need a local copy of our example API and web applications. If you haven’t been following along through the whole book, visit Appendixes A and B to run these.

Integrating Our Web Application

In the previous chapter, we set up our Electron application to load an index.html file. Alternately, we can load a specific URL. In our case, we’ll begin by loading the URL of our locally running web application. First, be sure that your web application and API are running locally. Then we can update our src/index.js file, first by updating the nodeIntegration setting in the BrowserWindow to false. This will avoid the security risks of a locally running node application accessing an external site.

webPreferences: {
  nodeIntegration: false
},

Now, replace the window.loadFile('index.html'); ...