Getting Started with JavaScript in Electron

Requirements:

Electron
Any /n software JavaScript edition

This tutorial will show you how to integrate IPWorks JavaScript edition into Electron as well as write some basic code to make an HTTP request.

Installation

To follow along, please take a moment to download the JavaScript edition of IPWorks and the IPWorks Electron Demo found below.

IPWorks: https://www.nsoftware.com/ipworks/download
JavaScript Electron Demo: here (Follow the readme for installation instructions)

To install the toolkit, extract it from the zip archive and then pass the .tar.gz to npm install.


unzip IPWorks2020JavaScriptEdition.zip
npm install .\ipworks-20.0.tar.gz

HTTP Get Example

This example uses code written in the "Main" process and the "Renderer" process. The main process is where IPWorks modules can be referenced.

Renderer Process: Setup/Call to Main Process

On the Renderer process side, set up the window, define the buttons and labels, and add an event listener for the button. When the button is clicked, a request will be sent to the Main Process to run the MAIN_REQUEST function which will use IPWorks to make a get request to the specified URL.


import "_public/style.scss";
import { IpcRendereApi } from "../exposed-apis";

// --- Use this URL
const url = "http://nsoftware.com";

// --- Electron APIs exposed for the renderer process
const ipcRenderer = (window as any).ipcRenderer as IpcRendereApi;

// --- Get DOM element references
const actionButton = document.getElementById("actionButton");
const progressLabel = document.getElementById("progressLabel");
const countLabel = document.getElementById("countLabel");
const textLabel = document.getElementById("textLabel");

// --- Setup the button
actionButton.textContent = `Get the contents of ${url}`;
actionButton.addEventListener("click", () => {
  // --- Execute the request...
  progressLabel.textContent = "Getting the contents...";
  countLabel.textContent = "???";
  textLabel.textContent = "???";

  // --- ... by sending a message to the main process
  ipcRenderer.send("MAIN_REQUEST", url);
});

Main Process: MAIN_REQUEST

To set up a reference to IPWorks add the following code to the main process.


import * as ipworks from "ipworks";

On the Main process within the MAIN_REQUEST function create a new instance of the IPWorks HTTP component as well as a variable to store the text portion from the Get response. Also an event handler for the transfer event needs to be set up to capture the text portion of the document being received.


ipcMain.on("MAIN_REQUEST", async (_e: IpcMainEvent, url: string) => {
  // --- Collect the response body's segments
  let bodyReceived = "";

  // --- Implement the communication
  const http = new ipworks.http();
  http.on("Transfer", (e) => (bodyReceived += e.text.toString())) // New segments arrived

  //Now call the get() method and pass the URL. This will send a GET request to the server.
  //The Transfer event will fire as data is received.

  try {
    http.setFollowRedirects(1);
    // --- Wait while the entire response arrives
    await http.get(url);

    // --- Success, sent the result to the renderer
    mainWindow.webContents.send("RENDERER_RESPONSE", bodyReceived);
  } catch (err) {
    // --- Error, send a specially formatted message to the renderer
    mainWindow.webContents.send("RENDERER_RESPONSE", `<$$$>${err.message}`);
  }
});

Renderer Process: Receiving Data from MAIN_REQUEST

On the Renderer process side process the response based on whether an error occurred or not. Then, display the error or text from the get request.


// --- Execute this code when the main process sends the response.
ipcRenderer.on("RENDERER_RESPONSE", (_ev, msg: string) => {
  if (msg.startsWith("<$$$>")) {
    // --- Error, probably the URL is invalid
    progressLabel.textContent = msg.substr(5);
  } else {
    // --- Success, display results
    countLabel.textContent = msg.length.toString();
    textLabel.textContent = msg.substr(0, 100);
    progressLabel.textContent = "";
  }
});

The renderer should display the first 100 characters received by the request.

Complete Example

The content in this article is available as a complete example available here. Please see the included readme for additional details. Please contact support with any questions.

We appreciate your feedback. If you have any questions, comments, or suggestions about this article please contact our support team at support@nsoftware.com.