CODEWITHSUNDEEP
javascriptreactjselectronelectron-packager
alper yolcu
alper yolcu

Reputation: 49

cant load react in electronjs

Here is my package.js file

{
  "name": "cabed",
  "version": "0.1.0",
  "private": false,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^0.27.2",
    "electron-forge": "^5.2.4",
    "electron-is-dev": "^2.0.0",
    "electron-packager": "^17.1.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "main": "public/electron.js",
 "homepage": "./",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "dev": "concurrently -k \"cross-env BROWSER=none npm start\" \"npm:electron\"",
    "electron": "wait-on tcp:3000 && electron .",
    "eb": "electron-packager C:/Users/user/cabed cddf --platform=win32 --arch=x64"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "concurrently": "^7.6.0",
    "cross-env": "^7.0.3",
    "electron": "^22.1.0",
    "wait-on": "^7.0.1"
  },
  "config": {
    "forge": {
      "packagerConfig": {},
      "makers": [
        {
          "name": "@electron-forge/maker-squirrel",
          "config": {
            "name": "stock_trading_app"
          }
        },
        {
          "name": "@electron-forge/maker-zip",
          "platforms": [
            "darwin",
            "linux",
            "win32"
          ]
        },
        {
          "name": "@electron-forge/maker-deb",
          "config": {}
        },
        {
          "name": "@electron-forge/maker-rpm",
          "config": {}
        }
      ]
    }
  }
}

The generated exe with electron builder which i ran with

npm run eb
the exe generated by code above does not render the react app inside the opened windows app.

Here is my app js

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div style={{justifyContent:'center',alignContent:'center',alignItems:'center'}}>
    <div className="App">
     
        <img src={logo} className="App-logo" alt="logo" />
        <p>
         Sasdsad
        </p>
        <p>
         Sasdsad
        </p>
    </div></div>
  );
}

export default App;

my electron.js looks like this under public directory.

const path = require('path');

const { app, BrowserWindow } = require('electron');
const isDev = require('electron-is-dev');

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

  // and load the index.html of the app.
  // win.loadFile("index.html");
  win.loadURL(
    isDev
      ? 'http://localhost:3000'
      : `file://${path.join(__dirname, "./index.html")}`
  );
  // Open the DevTools.
  if (isDev) {
    win.webContents.openDevTools({ mode: 'detach' });
  }
}

// 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(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', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

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

When running npm start first, then the exe renders react page inside window. I need some configuration probably but i could not found it yet.

Upvotes: 0

Views: 981

Answers (1)

Arkellys
Arkellys

Reputation: 7780

Since you said it works when you start your server first, I assume you're using the localhost URL both in dev and in prod. When your app is packaged, you should load the file in your window and not the local URL:

const { app } = require("electron");

const windowURL = app.isPackaged
  ? `file://${path.join(__dirname, "./index.html")}`
  : "http://localhost:3000/";

mainWindow.loadURL(windowURL);

The path when your app is packaged might be different depending on your file structure and your build/package configurations. Also, don't forget to add "homepage": "./" on your package.json or you may get a blank page.

Upvotes: 2

Related Questions