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` .. code-block:: sh touch index.html touch index.js 5. Update `index.html` file with .. code-block:: html Hello Word

Hello World

5. Update `index.js` file with .. code-block:: javascript const {app, BrowserWindow} = require('electron'); const url = require('url'); function boot() { win = new BrowserWindow() win.loadFile('index.html') } app.on('ready', boot); 6. 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 .. code-block:: javascript 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(); } }); 3. Start a window terminal and type `yarn start` 4. In another window terminal type `electron main.js`