Package a React application with Electron in 3 minutes

Author owns image rights. Icons from app developers.

For more information read the extended version.

React has established itself as one of the most popular libraries. However, as applications grow, the need arises to take these applications further. With Electron, you can package your application and distribute it as a desktop application without rewriting the code.
I will guide you step by step to package your application using Electron. Let’s get to it!

What is React and what is Electron?

React is a JavaScript library widely used for building web applications. Electron allows us to package web applications as desktop applications without rewriting code.

Before we begin…

It is important to have NodeJS installed. To install it we can do it through its web page. In addition, this project uses Vite.

How do we package our application?

First we will have to go inside our project through a terminal to install Electron by typing the following command:

npm i electron electron-is-dev
npm install electron electron-builder --save-dev

To configure Electron we will have to create a file called electron.js in the root of our project. Inside the file we will write the following:

import { app, BrowserWindow } from 'electron';
import { dirname, join } from 'path';
import { fileURLToPath } from 'url';
import isDev from 'electron-is-dev';

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);
let mainWindow;
function createWindow() {
  mainWindow = new BrowserWindow({
    width: 1080,
    height: 920,
    autoHideMenuBar: true,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
      webSecurity: true,
    },
  });
  let startURL;
  if (isDev) {
    startURL = '<http://localhost:5173>';
  } else {
    startURL = `file://${join(__dirname, 'dist', 'index.html')}`;
  }
  mainWindow.loadURL(startURL);
  mainWindow.on('closed', () => (mainWindow = null));
}
app.on('ready', createWindow);
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});
app.on('activate', () => {
  if (mainWindow === null) {
    createWindow();
  }
});

We will open our package.json changing it as follows:

...
 "scripts": {
   "preview": "vite preview",
   "react": "vite",
   "electron": "electron .",
   "build": "tsc -b && vite build",
   "dist": "electron-builder"
 },
 "main": "electron.js",
 "build": {
   "appId": "com.example.your_app",
   "productName": "your_app",
   "directories": {
     "output": "dist_electron"
   },
   "files": [
     "dist/**/*",
     "electron.js"
   ],
   "extraResources": {
     "from": "dist/",
     "to": "app/dist/"
   },
   "mac": {
     "target": "dmg",
     "category": "public.app-category.productivity"
   },
   "win": {
     "target": [
       {
         "target": "nsis",
         "arch": [
           "x64"
         ]
       }
     ],
     "icon": "build/icon.ico"
   },
   "nsis": {
     "oneClick": false,
     "perMachine": true,
     "allowToChangeInstallationDirectory": true,
     "createDesktopShortcut": true,
     "createStartMenuShortcut": true
   },
   "linux": {
     "target": [
       "AppImage",
       "deb",
       "tar.gz"
     ],
     "category": "Utility",
     "icon": "build/icons"
   }
 }
}

We will adapt the vite.config.ts file adding the base property so that the application can locate the Javascript and CSS files in the index.html, generated in the dist folder when executing the npm run build command, making the paths relative instead of absolute. This is how the file should look like:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// <https://vitejs.dev/config/>
export default defineConfig({
  base: './',
  plugins: [react()],
})

To package our application we will execute two commands in the following order. The first command will be:

npm run build

And the second command will be:

npm run dist

Once the process has completed we can go into the newly created directory, locate the executable or installer, and we can check that our application has been packaged.

Conclusions

Packaging a React app with Electron is a straightforward way to distribute it as desktop software. Elevate your projects to the next level!