Electron + React JS Setup

At time you want to deploy ReactJS app as a Desktop application. The simplest way to achieve this is using starter kit .

Setting up Electron

  1. Create directory “mkdir hello-world && cd hello-world”

  2. Install electron yarn global add electron

  3. Create a local package yarn init

  4. Create index.html and index.html

touch index.html
touch index.js
  1. Update index.html file with

<html lang="en">
        <meta charset="UTF-8">
        <title>Hello Word</title>
        <p style="color:red;">Hello World</p>
  1. Update index.js file with

const {app, BrowserWindow} = require('electron');
const url = require('url');

function boot() {
    win = new BrowserWindow()

app.on('ready', boot);
  1. Run electron . to start the application

Setting up Electron & React JS

  1. Create react app using create-react-app hello-world

  2. Create a main.js file and add following contents

const {app, BrowserWindow} = require('electron');

let win = null;

function createWindow() {
    win = new BrowserWindow({width:1000, height:800});

    // open devlopertools
    win.on('closed', function(){
        win = null;

app.on('ready', function(){

app.on('activate', () => {
    if(win === null) {

app.on('window-all-closed', function(){
    if(process.platform != 'darwin'){
  1. Start a window terminal and type yarn start

  2. In another window terminal type electron main.js