Serving static folder with electron-forge - workaround

electron.ts

import { app, BrowserWindow } from 'electron';
declare const MAIN_WINDOW_WEBPACK_ENTRY: any;

// Handle creating/removing shortcuts on Windows when installing/uninstalling.
if (require('electron-squirrel-startup')) { // eslint-disable-line global-require
  app.quit();
}

// logging
import log from 'electron-log';
console.log = log.log;
Object.assign(console, log.functions);

import fs from 'fs-extra';
import { protocol } from 'electron';
import path from 'path';

const hookStaticFileProtocol = () => {
  const staticFolder = 'static/';

  // hook into the file:/// protocol and intercept
  protocol.interceptFileProtocol('file', async(request, callback) => {
    const pathname = decodeURIComponent(request.url.replace('file:///', ''));

    // check if the requested file is in our static folder
    if (pathname.indexOf(staticFolder) != -1) {
      // get the root of the file path (ie. c:\)
      const pathRoot = path.parse(process.cwd()).root;
      // strip the root from the pathname
      const relativePath = pathname.substring(pathRoot.length);
      const filePath = path.join(app.getAppPath(), '.webpack/renderer', relativePath);
      callback(filePath);
    } else if (path.isAbsolute(pathname) ? await fs.pathExists(pathname) : await fs.pathExists(`/${pathname}`)) { // otherwise check if the path is absolute and exists
        callback(pathname);
    } else { // fall-back to the path name relative to the webpack folder
        const filePath = path.join(app.getAppPath(), '.webpack/renderer', pathname);
        callback(filePath);
    }
  });

};

const createWindow = () => {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    height: 1080,
    width: 1920,
    webPreferences: {
      nodeIntegration: true, 
    },
  });

  // Hook the file protocol to serve the static folder in production
  if (app.isPackaged) {
    hookStaticFileProtocol();
  }

  // and load the index.html of the app.
  mainWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY);

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

// 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.on('ready', 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', () => {
  // On OS X it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and import them here.

folder structure.md

my-electron-forge-app
|   package.json
|   tsconfig.json
|   webpack.main.config.js
|   webpack.plugins.js
|   webpack.renderer.config.js
|   webpack.rules.js
+---public
|   |   favicon.ico
|   |   index.html
|   |   manifest.json
|   |   _redirects
|   |   
|   \---static
|       |   logo.jpg
|       |   logo.svg
|       +---home
|       |       dark-light.png
|       \---images
|           |   google.svg
|           ...        
\---src
    |   App.tsx
    |   App.tsx.bak
    |   config.ts
    |   constants.ts
    |   index.css
    |   index.html
    |   electron.ts
    |   react-app-env.d.ts
    |   renderer.tsx
    |   routes.tsx
    |   serviceWorker.ts
    |   setupTests.ts
    |   
    +---components
    |   |   AuthGuard.tsx
    |   |   ... 
    +---views
    |   +---account
    |   ...  
    |                   
...

webpack.plugins.js

const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');

module.exports = [
    new ForkTsCheckerWebpackPlugin(),
    new CopyWebpackPlugin({
        patterns: [
            { from: path.resolve(__dirname, 'public/static'), to: "static" },
            { from: path.resolve(__dirname, 'public/_redirects') },
            { from: path.resolve(__dirname, 'public/favicon.ico') }
        ],
    })
];