Electron is a framework that allows you to develop native cross-platform desktop applications based on HTML, JavaScript and CSS. It uses Chromium to render the content and Node.js to access the local file system and the operating system. That allows you to create a Windows or Mac application with local file access.

In combination with DS Server, you can create a desktop application to edit documents using the HTML5-based document editor with local file access.

TX Text Control in Electron

The following sample shows how to integrate DS Server into an Electron desktop application.

Prerequisites

  1. Create your free DS Server trial token here:
    Trial Token

  2. Install Node.js® and npm, if not done before.

Creating the Project

  1. Create a folder for your project and install Electron there:

    mkdir my-electron-app && cd my-electron-app

    npm init -y

    npm i --save-dev electron

  2. Install Node.js® and npm, if not done before.

Create the Main Script File

  1. Open the project folder in VS Code or your favorite editor:

    code .

  2. In the root of your application, create a file named main.js and add the following content:

    Loading...

    The main script defines the entry point of your Electron application that runs the Main process. In this sample, it also contains the application menu definitions. A File menu is added to load a local document into TX Text Control.

  3. In the root of your application, create a file named index.html and add the following content:

    Loading...

    In line 32 and 33, add your private DS Server OAuth credentials.

  4. Open the package.json file and replace is with the following content:

    Loading...

Adding Text Control Script Files

  1. Create a folder in the root of your project named textcontrol.

  2. In that new folder, create a file named fileHandler.js and add the following content:

    Loading...
  3. In that new folder, create a file named txtextcontrol-ds-1.0.0.js. Using a browser, navigate to the following URL and copy the content into the newly created file:

    https://trial.dsserver.io/documenteditor/JS/txtextcontrol-ds-1.0.0.js

Starting the Application

  1. In the command line console, start the application by typing the following command:

    npm start

A new native application is started with the TX Text Control (DS Server) document editor. Using the application menu File -> Load, you can open local documents (DOC, DOCX, RTF, HTML and TX):

TX Text Control in Electron

The application is also displayed in the native Windows task bar:

TX Text Control in Electron

Package the Application

The application can be packaged and deployed using Electron Forge. It creates an executable application and a setup the fetches used packages during the installation.

  1. Use the following commands to install Electron Forge in your app folder:

    npm install --save-dev @electron-forge/cli

    npx electron-forge import

  2. Use the following command to create the distributable:

    npm run make

You can test this on your own by downloading the sample application from our GitHub account.