The Easiest Way To Convert Your React App to Electron/Desktop App

In the ever-evolving world of web development, React has been a game-changer, revolutionizing how we build interactive and dynamic user interfaces. But what if we told you that you can take your React app to a whole new level by turning it into a full-fledged desktop application? Enter ElectronJS, the magical bridge that brings web technologies to the desktop environment. In this article, we’ll show you how to convert your React app into an ElectronJS desktop app, unleashing the true potential of your creation!

Step 1: Setting up React App (Skip this step if you already have an existing React Application)

npx create-react-app my-project
cd my-project

To embark on this exciting journey, you need to have a solid React app that you want to turn into a desktop app. Make sure your React app runs smoothly in a web browser before taking the next steps.

Step 2: Build your React Project

ReactJS when built, spits out HTML, CSS, JavaScript & other required assets like fonts, images & videos. These artifacts can be run on any modern browser using a regular HTTP Server. So, let’s build the app first into a separate folder. In CRA, the default is build folder

npm run build

The output should be something like this :—

Step 3: Add ElectronJS to the project

Now the magic begins! ElectronJS is just a browser shell called Chromium, so all it cares about is your build folder, remaining all files in your project are of no use to it. We have to configure the environment in a way to makes it easier for Electron to pick your build folder and show that inside Electron’s Browser Window:

npm i electron --save-dev
npm i cors express --save

We are installing express to be able to provide a basic Web Server Environment for the output from React which is a typical website. cors package helps in eliminating common Cross-Origin problems.

Step 4: Add a single electron-main.js file which does everything

Don’t use the name electron.js which is not a valid name in Windows but yet it works fine on Mac. Try to avoid using this name, you can use any other name like electron-entry.js or electron-main.js as we did.

Simply add this electron-main.js file to the root of your project and point out the correct path of your build folder. Usually the default CRA path for build folder is root

Here is the code:

// Modules to control application life and create native browser window
const { app, BrowserWindow } = require("electron");
const path = require("path");
const express = require("express");
const cors = require("cors");
const localServerApp = express();
const PORT = 8088;
const startLocalServer = (done) => {
  localServerApp.use(express.json({ limit: "100mb" }));
  localServerApp.use(cors());
  localServerApp.use(express.static('./build/'));
  localServerApp.listen(PORT, async () => {
    console.log("Server Started on PORT ", PORT);
    done();
  });
};

function createWindow() {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, "preload.js"),
    },
  });

  // and load the index.html of the app.
  //   mainWindow.loadFile('index.html')
  mainWindow.loadURL("http://localhost:" + PORT);

  // Open the DevTools.
  // mainWindow.webContents.openDevTools()
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(() => {
  startLocalServer(createWindow);

  app.on("activate", function () {
    // On macOS it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });
});

// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on("window-all-closed", function () {
  if (process.platform !== "darwin") app.quit();
});

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

Step 5: Add a script to package.json file

You don’t want to deal with CLI commands, be sure to add a simple script to package.json file

  "electron": "electron ."

It would typically look like this (In a CRA based React App)

Step 6: Add a new entry point 'main‘ for ‘electron-main.js‘ file in package.json file

Step 7: You are all set to run your React-based Web Application inside Electron Window as a Desktop Application

npm run electron

The output for the above should be something like this (In case of a typical CRA App)

Conclusion:

Congratulations! You’ve successfully converted your React app into an ElectronJS desktop wonder. You now have a powerful, cross-platform application that combines the best of web and desktop technologies. With ElectronJS, the possibilities are limitless, and you can continue to enrich your app with native features and capabilities.

So why wait? Start exploring the vast world of ElectronJS and bring your creativity to life by building stunning and feature-rich desktop applications using the technology you love — React! Happy coding!