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