Build Windows App using ElectronJs with ReactJs

Authors

We are going to set up Project for Electron with reactjs and make exe file for windows. you must be aware of below technologies.

  • npm
  • react
  • electron
  • webpack

before starting our project, we will explore a way to use react and electron js. you can use any one of them below whichever you prefer. I'll explain you first two methods here and for boilerplate, you can go on their documentation.

Use webpack build and serve as a static file to electron

Run react script and add URL to electron. this need to two instances of CMD/Terminal one for react and other for electron.

Use boilerplate, manage by contributors and you can run a project with one command

step 1: Setup Reactjs For this step, you can read my blog which in this link.

step 2: install electron js

npm i electron

which, add as a dependency in your packge.json file

step 3: Create main.js create a main.js file in your root directory, this file will be going to initiate electron application

main.js
/**
 * Import require packages
 */
const  { app, BrowserWindow } = require('electron');

/**
 * Initialize variable
 */
let homeWindow;

app.on('ready', createHomeWindow);

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

app.on('activate', () => {
    if(homeWindow == null) {
        createHomeWindow();
    }
});


 /**
  * @function createHomeWindow
  */
function createHomeWindow(){

    homeWindow = new BrowserWindow({
        width: 800,
        height: 600
    });

    homeWindow.on('close',() => {
        homeWindow = null;
    })

    homeWindow.loadFile('dist/index.html');
 }

in the above code, you see the basic syntax for start and display application screen. in createHomeWindow() in this function you can see homeWindow.loadFile('dist/index.html'); which is our first method. after writing react code we build optimize code with webpack4 and serve in electron application.

another method is using URL, for that you have to just replace homeWindow.loadURl('http://localhost:8080/');

step 4: add the main option in package.json

add below option in package.json file. remember this file is your instantiation of electron application.

{
...
    "main": "main.js",
    "script" : {
        "electron": "electron ."
    }
...
}

step 5: Build exe file

For this step we require electron-packager

npm i electron-packager

add below line packag.json file

{
...
    "scripts": {
        "package-win": "electron-packager . --overwrite --asar=true --platform=win32 --arch=ia32 --icon=src/assets/icons/win/icon.ico --prune=true --out=release-builds --version-string.CompanyName=CE --version-string.FileDescription=CE --version-string.ProductName="Bill Stack""
    }
}
...

add icon "src/assets/icons/win/icon.ico" you can change as your requirements.

npm run package-win

after a successful run, you can see release-builds directory made in root directory.in that folder one other folder which contains your exe file.

Discuss on Twitter