Create a Desktop React App in Under 5 Minutes with Electron

When building apps with React, sometimes it makes more sense to create an interface to be used on desktop, especially if it doesn’t need to be connected to the web. I came across this when I wanted to build an app to manage local files. I used Tkinter with Python, but I felt I could build faster, better looking interfaces with React, which is when I learned about Electron.

Electron was created by GitHub to build their Atom text editor, and is now used in popular apps like VSCode and Discord. By using React and Electron together, it’s possible to quickly develop cross-platform desktop applications. Electron provides extra features specific to desktop like system-level notifications and tray icons, but in this tutorial I’ll go over the basics on how to get a React Electron app running.

First you need to create a new React app. I personally prefer using Vite, which I will use for this tutorial, but using “create-react-app” also works. I will also configure my Vite app by using TypeScript.

npm create vite@latest <electron-app-name>

Now change directories into the newly created app, then install Electron.

npm install electron --save-dev

Next you can create an “electron.ts” file at the root of the project directory and add the following code:

const { app, BrowserWindow } = require('electron')

function createWindow () {
  // Create the browser window.
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      enableRemoteModule: true
    }
  })

  // Load the React app.
  win.loadURL('http://localhost:5173')

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

// When the app is ready, create the window.
app.whenReady().then(createWindow)

// Quit when all windows are closed.
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

Now you need to update the “package.json” at the root. Add the following to the scripts object:

"start": "react-scripts start",
"electron": "electron ."

And now you need an entry point for the Electron app, so add a “main” property to point to the entry which will be named after the “electron.ts” file just created:

"main": "electron.ts",

The finished “package.json” should like this:

{
  "name": "electron-app",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "main": "electron.ts",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "start": "react-scripts start",
    "electron": "electron ."
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/node": "^18.15.11",
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "@vitejs/plugin-react": "^3.1.0",
    "electron": "^23.2.1",
    "typescript": "^4.9.3",
    "vite": "^4.2.0"
  }
}

Now start your React app by running the following commands. “npm run dev” will start the React frontend, and “npm run electron” starts the Electron app and will open on the “http://localhost:5173” defined in the “electron.ts” file:

npm run dev
npm run electron

\Electron app running on desktop

Now you’re ready to develop your own cross-platform desktop app in React. As I continue exploring Electron I may create more tutorials like how to package your app to run like a native desktop app.

Explore the source code for this project here. I’m currently focusing on building better user interfaces in React, so check out my GitHub if you’d like to see more of my work.