GDG-React-Workshop

React + Electron + Typescript workshop for GDG DevFest Warsaw 👩‍💻👨‍💻🤖💻

Getting started

In order to work with this repository, you must install:

Git
The latest stable version of node (available here: https://nodejs.org/en/) - or use nvm
Yarn for package management (available here: https://yarnpkg.com/en/docs/install)

$ git clone https://github.com/SzybkiSasza/GDG-React-Workshop.git
$ cd GDG-React-Workshop
$ yarn

Toolset

We’ll use following tools to build our core app:

NodeJS + Yarn
React + Jest
Material UI
Typescript

These tools will be used to build advanced features:

Electron
Electron-builder
Electron-packager
Foreman
Cross-Env

Goals

Learn the toolset
Understand principles behind basic React App
Understand Create React App behaviour and tradeoffs
Successfully use Typescript with React
Wrap our app in Electron and display as native desktop app (optional - based on available time)
DO NOT eject Create React App in order to have it working with Electron

How does it work?

The configuration is rather complex. It can be split into a few separate parts:

Running only React part as a browser app
Running desktop in DEV mode/locally
Bundling a final desktop app as a standalone installer

Running React app as a standalone browser app

In order to just run a React part of the workshop, you can use yarn start-react script that will use React Scripts (that are part of Create React App) to run the app - it’s so simple!

Running React App from Electron with reload capabilities

If you want to see CRA with Electron in action, just run yarn start script. There are a few key events that happen when you run that script (it’s handled by the Foreman that reads from Procfile - check out this file!):

React Scripts start building app in watch mode (front end part of the app)
TypeScript compiler is ran in watch mode in order to prepare main.js file
Another TypeScript file is ran in order to bootstrap Electron itself, based on built main.js file

All of these in conjunction allow one to develop desktop app using React almost simultaneously. It allows full hot reloading with one caveat: whenever you change Electron part of the app, the window has to be re-generated (it will re-open once TypeScript compiler prepares new main.js file).

As Electron is essentially just a NodeJS wrapper that renders any arbitrary HTML content in headless browser windows, the ony thing you have to do to render any HTML app in Electron is to provide a correct URL - you can find the code that takes care of it in src/electron/main.ts.

For more details, check out src/electron folder, especially connect-electron.ts file that prepares initial Electron launch based on React app state.

Bundling React App with Electron without ejecting

In order to bundle the React App in Electron, you can run yarn dist script. It performs three steps:

Builds standard React app
Builds Electron part of the code and puts it in build/electron directory
Bundles Electron with built React app as a standalone installer

If the script is ran successfully, it’ll create a set of files in dist directory, including app installer - just double-click it in order to have it installed and ran on your system.

Side note on building the app

Currently, the build pipeline supports only Windows. It should be possible to simply modify the build script in order to have it working for Mac/*Nix systems.

gdg-react-workshop