Electron App With React and Typescript

TL;DR: The first and most challenging task in learning a programming language and developing an application under a new framework is to prepare the programming environment. Here, I share my personal setup for developing a cross-platform application based on Electron, involving React library and Typescript.

Why Electron? What is React and Typescript?

Electron is an open-source library to build cross-platform desktop applications targeting Windows, MacOS and Linux with HTML, CSS and javascript. For cross-platform desktop application development, the reliability and compatibility of API definition is the biggest challenge. Compared to other similar efforts such as Qt, Java and Microsoft Xamarin, the web APIs are well standardized with the best reliability and compatibility across all operating systems. Moreover, as applications such as Skype, VS Code, Atom editor, Stack are all developed using Electron, you can have a peace of mind that there will be enough effort devoted into maintaining and upgrading the Electron library.

React is a javascript library to build user interfaces. As Electron only provides building and packaging applications developed with Javascript, HTML and CSS, those languages are not natively designed for object-oriented GUI development. Thus, libraries such as React and VueJs bridge the gap. Here, I adopt React as it is currently the most widely used frontend Javascript libraries with great community support.

Typescript is a superset of javascript that provide variable type and function prototype declaration in additional to the traditional javascript code. In javascript, everything is an object. When the code grows, it is pretty hard to keep track of the types of class members, variables or parameters of each function. Moreover, without the type definition, it is impossible for the editors to provide intelligent support such as code completion, parameter information or word completions. Thus, I adopt typescript to improve the programming experience and maintainability of my projects.

Start an Electron + Typescript Project

NodeJS and Yarn

First, you need to prepare your system with nodejs and yarn. NodeJS is a JavaScript runtime built on Chrome’s V8 JavaScript engine. Yarn is one of the dependency management systems for NodeJS packages. To install both of them, follow the instruction on their websites with respect to your operating system.

Start React Project with CRA

Create-React-App (CRA) is a popular Command Line Interface (CLI) library that offers an easy and fast way of creating a React-based web application. As you may create multiple React applications in the future, RCA is usually installed as a global library.

With CRA installed, create an empty React web application with Typescript scripts via the command line as below.

The above script will create a React-based web application under ./example folder with typescript templates.

The CRA will create a default folder structure as shown below:

The package.json file is contains the main definitions of your web application. It includes information about the application, such as application name, description, version number, main entry point, dependencies (for production and development), custom CLI commands, compilation and packaging configurations, and so on.

As the project is created with Typescript templates, a default tsconfig.json is added. You can also found that all source files under src folder are ended with *.tsx extensions. public folder contains the index.html, which is the root template of the React application. Except for the Icon file favicon.ico, the files in the public folder usually remain untouched.

Make it an Electron Project

The React project we created in the previous step is a web-based application. It can only be run in the browser and cannot access any local resources as a desktop application can. Election is here to help.

A desktop application packaged by Electron library contains two processes: a main process and a renderer process. The main process handles local system related functionalities, such as opening/closing the main browser window, accessing local file systems and devices, etc. The renderer processes, however, runs within the browser window. In this case, it is the React web application.

Thus, in addition to the React project created in the previous section, a main script is needed for the Electron main process. This main script needs to be added to the main script entry in the package.json file.

To do this, you can create a folder src-electron under the project root (./example here), and add the following index.tsx.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.