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¶

Create directory “mkdir hello-world && cd hello-world”
Install electron yarn global add electron
Create a local package yarn init
Create index.html and index.html

touch index.html
touch index.js

Update index.html file with

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Hello Word</title>
    </head>
    <body>
        <p style="color:red;">Hello World</p>
    </body>
</html>

Update index.js file with

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

function boot() {
    win = new BrowserWindow()
    win.loadFile('index.html')
}

app.on('ready', boot);

Run electron . to start the application

Setting up Electron & React JS¶

Create react app using create-react-app hello-world
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});
    win.loadURL('http://localhost:3000');

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

app.on('ready', function(){
    createWindow();
})

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

app.on('window-all-closed', function(){
    if(process.platform != 'darwin'){
        app.quit();
    }
});

Start a window terminal and type yarn start
In another window terminal type electron main.js