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">
    <head>
        <meta charset="UTF-8">
        <title>Hello Word</title>
    </head>
    <body>
        <p style="color:red;">Hello World</p>
    </body>
</html>
  1. 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);
  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});
    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();
    }
});
  1. Start a window terminal and type yarn start
  2. In another window terminal type electron main.js