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.

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 kb@nsoftware.com.