Building a React-Electron app using electron-builder, index.js loads inside pre tags

2
votes

I have an app that I'm now trying to build to distribute for testing.

I'm using React and Electron with electron-builder to build the app itself. I'm not a web developer so I've been trying to keep things basic and just get something to work.

After about five hours I was finally able to get the app to build somewhat properly and launch, but when it loads index.js (the first page in the app) it displays the source for index.js instead of rendering the content. In the devtools everything is inside a pre tag.

I've already looked at this thread and tried that but it didn't change anything, and I'm not using service workers as far as I can tell.

What the actual Electron window displays after launching with the devtools alongside.

Here's the createWindow function from main.js. I've tried doing all kinds of things to the pathname with no effect.

function createWindow() {
    const startUrl = process.env.ELECTRON_START_URL || url.format({
        pathname: path.join(__dirname, '../src/index.js'),
        protocol: 'file:',
        slashes: true,
    });
    mainWindow = new BrowserWindow({
        width: 800, height: 600, title: "Electron App", webPreferences: {
            nodeIntegration: true
        }
    });
    mainWindow.loadURL(startUrl);
    mainWindow.on('closed', function () {
        mainWindow = null;
    });
}

Here are my scripts from package.json

 "scripts": {
    "start": "nf start -p 3000",
    "start-electron": "set ELECTRON_START_URL=http://localhost:3000 && electron .",
    "react-start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "build-electron": "npm run build && electron-builder build --win"
  }

Here's the build part too. To be honest, I don't really understand what this is or does but after a few hours of trial and error this is what gets me to the point I am now.

"build": {
"appId": "Test",
"extends": null,
"files": [
  "./build/**/*",
  "./electron/main.js",
  "./src/**/*"
 ]
}

As far as I can tell, it has something to do with the Electron start URL, because when I removed that from const startUrl in createWindow, running the app using npm start did the same thing as the built Electron app, whereas before using npm would launch the app normally every time.

EDIT after solution:

Modified build in package.json to

"build": {
    "appId": "Test",
    "extends": null,
    "files": [
      "./build/**/*",
      "./electron/main.js",
      "./src/**/*"
    ],
    "directories": {
      "buildResources": "./public"
    }
  }

I haven't tested it without this modification so I'm not sure that it's actually necessary.

Start URL was changed to

const startUrl = process.env.ELECTRON_START_URL || url.format({
        pathname: path.join(__dirname, '../build/index.html'),
        protocol: 'file:',
        slashes: true,
    });
2
reactjselectronelectron-builder

2 Answers

1
votes

You're supposed to set it up with an html file.

    const startUrl = process.env.ELECTRON_START_URL || url.format({
        pathname: path.join(__dirname, '../src/index.html'),
        protocol: 'file:',
        slashes: true,
    });
1
votes

Your browser window should load the build/index.html on production mode

    const isDev = require("electron-is-dev");
    if (isDev) {
        mainWindow.loadURL(process.env.ELECTRON_START_URL);
    } else {
        mainWindow.loadFile(path.join("build", "index.html"));
    }