Creating desktop applications with Electron and React involves integrating the two technologies to leverage React for the user interface and Electron for the desktop application framework. Here's a step-by-step guide to help you set up a basic desktop application using Electron and React:

Setup Your Project

1. Initialize a New Project:

  First, create a new directory for your project and navigate into it:

  mkdir my-electron-react-app
  cd my-electron-react-app

2. Initialize a Node.js Project:

  Initialize a new Node.js project using `npm`:

  npm init -y

Install Electron and React

1. Install Electron:

  Install Electron as a development dependency:

  npm install --save-dev electron

2. Create React App:

  Use `create-react-app` to set up the React frontend:

  npx create-react-app frontend

  This will create a `frontend` directory with your React application.

Install Electron-React Dependencies:

  Navigate to the `frontend` directory and install `electron-builder`:

  cd frontend

  npm install --save-dev electron-builder

Configure Electron

1. Create the Main Electron Script:

  In the root of your project (not inside the `frontend` directory), create a file named `main.js`:

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

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

   // Load the React app.
   mainWindow.loadURL('http://localhost:3000');

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

  app.whenReady().then(() => {
   createWindow();

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

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

2. Add `preload.js` (Optional):

  Create a file named `preload.js` (if needed):

  // preload.js
  window.addEventListener('DOMContentLoaded', () => {
   // Your preload code here.
  });

3. Update `package.json`:

  Update the `package.json` file to include Electron start scripts:

  {
   "name": "my-electron-react-app",
   "version": "1.0.0",
   "main": "main.js",
    "scripts": {
  "start": "concurrently \"npm run start:react\" \"npm run start:electron\"",
  "start:react": "npm start --prefix frontend",
  "start:electron": "electron .",
  "build": "npm run build:react && electron-builder",
  "build:react": "npm run build --prefix frontend"
 },
   "devDependencies": {
    "electron": "^XX.XX.XX",
    "concurrently": "^6.0.0",
    "electron-builder": "^XX.XX.XX"
   }
  }

Run Your Application

1. Start Your React App:

  Run the React app:

  npm run start:react

2. Start Electron:

  Open another terminal window and start Electron:

  npm run start:electron

  This will launch your Electron application with your React frontend.

Build Your Application

1. Build the React App:

  Ensure your React app is built:

  npm run build:react

2. Package the Application:

  Build the Electron application:

  npm run build

  This will package your application into an executable format suitable for distribution.

Notes:

- Debugging: For debugging purposes, you can use tools like `electron-devtools-installer` to install Chrome DevTools extensions.

- Production Build: Ensure that your React app is served correctly in production mode by updating the Electron `main.js` file to load the production build.

Github Repo link: https://github.com/giftedtutor/frontend.git