How can I troubleshoot why electron-builder isn't creating a working production package

1.2k Views Asked by At

My app builds fine on local, but when I try to create a production version, I'm having trouble. I'm not very well versed in either electron or electron-builder, so this could definitely be something simple I'm missing.

My project packages successfully, and when I open it from Finder (I'm on a mac) the window launches properly, but nothing renders; this is the result:

enter image description here

Previously (with different mucking around) I've had an error 'not allowed to access local file:' and then gives me a directory path.

Here is my package.json:

  "main": "public/electron.js",
  "name": "storyweaver-dm",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "axios": "^0.19.2",
    "concurrently": "^5.1.0",
    "electron-is-dev": "^1.1.0",
    "nodemon": "^2.0.4",
    "react": "^16.13.0",
    "react-beautiful-dnd": "^13.0.0",
    "react-dom": "^16.13.0",
    "react-hook-form": "^6.1.2",
    "react-scripts": "3.4.0",
    "react-select": "^3.1.0",
    "recoil": "0.0.10",
    "sqlite3": "^5.0.0",
    "styled-components": "^5.0.1",
    "wait-on": "^4.0.1"
  },
  "devDependencies": {
    "@rescripts/cli": "^0.0.13",
    "@rescripts/rescript-env": "^0.0.11",
    "electron": "^8.1.1",
    "electron-builder": "^22.4.1",
    "electron-devtools-installer": "^2.2.4",
    "typescript": "^3.8.3"
  },
  "homepage": "./",
  "scripts": {
    "build": "rescripts build",
    "eject": "react-scripts eject",
    "electron-dev": "concurrently \"BROWSER=none yarn start\" \"wait-on http://localhost:4203 && electron .\"",
    "dev": "concurrently \"BROWSER=none npm start\" \"wait-on http://localhost:4203 && electron .\"",
    "electron-pack": "electron-builder build -mw",
    "postinstall": "electron-builder install-app-deps",
    "preelectron-pack": "npm install",
    "start": "PORT=4203 rescripts start",
    "test": "rescripts test"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "rescripts": [
    "env"
  ],
  "author": {
    "name": "Jamie Sauve and other wonderful people",
    "email": "[email protected]"
  },
  "build": {
    "appId": "com.my-website.my-app",
    "productName": "StoryWeaver DM",
    "copyright": "Copyright © 2019 ${author}",
    "mac": {
      "icon": "./assets.icon.icns",
      "category": "public.app-category.utilities"
    },
    "files": [
      "public/**/*",
      "build/**/*",
      "node_modules/**/*",
      "pseudoServer/**/*",
      "./public/electron.js"
    ],
    "directories": {
      "buildResources": "assets"
    }
  }
}

and here is my electron.js (I renamed this - this is my main Electron process):

const electron = require('electron');
const app = electron.app;
const ipcMain = electron.ipcMain;
const BrowserWindow = electron.BrowserWindow;
// const { default: installExtension, REACT_DEVELOPER_TOOLS } = require('electron-devtools-installer');
const path = require('path');
const isDev = require('electron-is-dev');

process.env['APP_PATH'] = app.getAppPath();
const directory = isDev ? process.cwd() : process.env.APP_PATH;

const databaseApi = require(path.join(directory, './pseudoServer/api/controller/routes'))
ipcMain.handle('dbRequest', async (event, request) => {
  const response = await databaseApi(request)
  return response
})

let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({
    webPreferences: {
      nodeIntegration: false,
      webSecurity: false,

      /**
       * import native Node modules explicitly in this file; something about Create-React-App and webpack mess
       * with Electron's ability to provide these directly.
       * See the comment by HemalR here: https://github.com/electron/electron/issues/9920
       */
      preload: __dirname + '/preload.js'
    },
  });
  mainWindow.maximize();
  mainWindow.loadURL(isDev ? 'http://localhost:4203' : `file:///${__dirname}/public/index.html`)
  
  if (isDev) {
    // Open the DevTools.
    //BrowserWindow.addDevToolsExtension('<location to your react chrome extension>');
    mainWindow.webContents.openDevTools();

    // installExtension(REACT_DEVELOPER_TOOLS)
    // .then((name) => console.log(`Added Extension:  ${name}`))
    // .catch((err) => console.log('An error occurred: ', err));
  }
  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();
  }
});

and this is my index.html:

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <!-- see https://github.com/electron/electron/issues/19775 for the line below -->
    <meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' http://* 'unsafe-inline'; script-src 'self' http://* 'unsafe-inline'" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <base href="./" />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>StoryWeaver DM</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

How can I get this app packaging properly in production?

The /pseudoServer directory might be an odd pattern - I'm using a sqlite3 database, and created a 'server' (really just called from the electron main process) to access it. I'm not sure if this actually counts as a backend or not in Electron.

My project is at https://github.com/jamiesauve/StoryWeaver-DM if these two files don't provide enough information.

0

There are 0 best solutions below