Electron: How to resolve CSS url in prod?

Question

I want to run an Angular app with Electron based on this example on my Raspberry Pi. The app runs well on my PC with npm start but it cannot resolve assets on the Pi.

The assets are defined in a theme.scss file in the src/ directory:

$body-background-color: white;
$body-background-image: url("/assets/images/bg-hexa-gray-flat.png");
$body-background-position: top left;
$body-background-repeat: repeat;
    
$sidepanel-background-color: white;
$sidepanel-background-image: url("/assets/images/bg-hexa-red-flat.png");
$sidepanel-background-position: top left;
$sidepanel-background-repeat: repeat;
    
$sidepanel-logo:       url("/assets/svg/logo.svg");
$sidepanel-logo-white: url("/assets/svg/white.svg");

and this file is imported in most of my components.

My main.ts file:

import { app, BrowserWindow } from 'electron';
import * as path from 'path';
import * as url from 'url';
    
let win: BrowserWindow = null;
const serve = process.argv.slice(1).some(val => val === '--serve');
    
const createWindow = async () => {
    
    // Create the browser window.
    win = new BrowserWindow({
        width: 800,
        height: 480,
        icon: path.join(__dirname, 'src/assets/images/icon.png'),
        webPreferences: {
            nodeIntegration: true,
            allowRunningInsecureContent: (serve) ? true : false,
        },
    });
    
    if (serve) {
        require('electron-reload')(__dirname, {
            electron: require(`${__dirname}/node_modules/electron`)
        });
        win.loadURL('http://localhost:4200');
    } else {
        win.setFullScreen(true);
        win.loadURL(url.format({
            pathname: path.join(__dirname, 'dist/index.html'),
            protocol: 'file:',
            slashes: true
        }));
    }
    
    // Emitted when the window is closed.
    win.on('closed', () => {
        // Dereference the window object, usually you would store window
        // in an array if your app supports multi windows, this is the time
        // when you should delete the corresponding element.
        win = null;
    });
    
    return win;
};
    
try {
    // 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.
    app.on('window-all-closed', () => app.quit());
    
} catch (e) {
    // Catch Error
    // throw e;
}

The issue is that with serve on my PC, the /assets path is relative to the root of the app (http://localhost:4200/assets/...) and it works fine but in prod I get an error file:///assets/... not found. If I change the paths in the CSS of the bundle on my Pi from /assets/... to assets/... it works. If I change it accordingly in the theme.scss file, it doesn't compile because the path is relative and theme.scss is imported in many components at different levels of the files tree.

I've already tried paths like ~/assets/... but it is compiled as /./assets/... and that makes no sense to me...

How can I make /assets become assets/ in the CSS bundle or make assets/ be resolved as relative to the app root at compile time?

Edit:

Resolution of assets in url() is an old issue of Angular.

Out of curiosity, have you set the `--base-href` when building the angular app? `ng build --prod --base-href /` — Malcor, Jan 14 '20 at 15:01
setting `.` or `./` gives the same result: `file:///assets/images/bg-hexa-gray-flat.png not found` — didil, Jan 14 '20 at 15:29
You might host your theme on a dedicated project with public access (github pages for instance) and point to it from both local and prod projects — IQbrod, Jul 18 '22 at 15:27

Gary Archer · Answer 1 · 2022-07-21T12:49:36.837

Updated answer:

ELECTRON HTML RESOURCES

In a built app, you have a dist folder containing an index.html file typically looks something like this, and loading starts from the index.html file:

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8'>
        <title>My Demo App</title>
    </head>
    <body>
        <div id='root' class='container'></div>

        <script type='module' src='vendor.bundle.js'></script>
        <script type='module' src='app.bundle.js'></script>
    </body>
</html>

BUILD PROCESS

Usually in an Electron app you use webpack or a similar bundler to produce the above JS files, resulting in output such as this. The build process might also copy assets such as images over from a src folder:

index.html
main.bundle.js
app.bundle.js
vendor.bundle.js
assets/images/*.png

EXAMPLE APP

As something to compare against, see my Electron code example, which is coded in React and Typescript, though the principles will be the same for Angular. Running this command builds the dist folder:

git clone https://github.com/gary-archer/oauth.desktopsample.final
cd oauth.desktopsample.final
./start.sh

Note that my app is built using these webpack scripts for the Electron main and renderer processes, and that there are two different targets involved:

target: 'electron-main'
target: 'web'

LOADING IMAGES WITHOUT SASS

A quick way to load images without SASS would be to change one of my views to load each asset file directly:

function render() {

  const myStyle={
    backgroundImage: `url(./assets/images/red.png)`,
  };

  return  (
    <div style={myStyle}>
      ...
    </div>
  )
}

LOADING IMAGES FROM SASS VARIABLES

This requires a number of steps, to first install these dependencies:

npm install --save-dev node-sass
npm install --save-dev style-loader
npm install --save-dev css-loader
npm install --save-dev sass-loader

Then update webpack to tell it how to process SCSS files:

{
  test: /\.(scss)$/,
  use: [
    // Creates style nodes from JS strings
    'style-loader',
    // Translates CSS into CommonJS
    'css-loader',
    // Compiles SASS to CSS
    'sass-loader',
  ],
  exclude: /node_modules/
}

Next provide a file such as app.module.scss containing styles and variables to export:

$body-background-image: url('./assets/images/red.png');

// Export variables
:export {
    bodyBackgroundImage: $body-background-image;
}

You would then need to update the React code like this. Note that a file name ending in module.scss might be needed to prevent the import resulting in a null object:

import styles from '../../app.module.scss';

function render() {

  const myStyle={
    backgroundImage: styles.bodyBackgroundImage,
  };

  return  (
    <div style={myStyle}>
      ...
    </div>
  )
}

Also prevent Typescript from treating SCSS elements as types by adding a typings.d.ts file to the src folder.

declare module '*.scss';

You would also need to create a src/assets/images/red.png file, and modify my build.sh script to copy assets to the dist folder:

mkdir dist
cp index.html desktop*.json *.css package.json src/preload.js dist
mkdir dist/assets
mkdir dist/assets/images
cp src/assets/images/*.png dist/assets/images

Once all this is done, rerun the start.sh script and SCSS integration will be working from the dist folder.

DEPLOYED APP

You can also build my app into a packaged executable like this and assets will continue to load:

./pack.sh

Ultimately the paths to assets are just translated from the SCSS file and written into the Javascript bundles, as in my first example above. These paths are relative to the folder from which the final app runs, which is represented by the dist folder.

const myStyle={
  backgroundImage: `url(./assets/images/red.png)`,
};

SUMMARY

You typically have a couple of modes of execution, the first of which supports productive local development and loads assets from the src folder, and uses tools such as electron-reload. I'd recommend implementing an early build process that no longer uses the src folder. Instead, build all HTML assets to a dist folder, which the deployed version of the app uses.

This answer doesn't appear to detail the "make assets load" part of the process, which is critical to actually answering the question. In my experience that involved adding something like a file protocol handler for example, accounting for both locally-referenced `/main.js` files and absolutely-referenced `/assets/...` appearing in either HTML or CSS files. I am not sure what you'd recommend. Could you specify that part clearly? — doppelgreener, Jul 20 '22 at 23:32
Yep - you are right and I hadn't read the question accurately enough - updated now — Gary Archer, Jul 21 '22 at 12:41

score 1 · Answer 2 · answered Jul 20 '22 at 05:54

I wrote a blog post on this as I wanted to give a good recommendation after seeing suggestions that were not security conscious or seemed overly complicated. I have a Github template that has this code built in so you can see it in a working example -> secure-electron-template.

In short, in order to support loading images relatively in development and production environments, to follow my instructions, you need to:

Be using [at least] Webpack 5 (I'm hopeful Webpack continues to support Asset Modules in future versions of Webpack..)
Be using the Webpack dev server for local Electron development

If these conditions are met, an Asset Module needs to be defined in your Webpack.config.js file in order to load image formats

// loads common image formats
{
    test: /\.(svg|png|jpg|gif)$/,
    include: [
        path.resolve(__dirname, "resources/images")
    ],
    type: "asset/inline"
}

include should resolve to the path all of your images are saved.

"asset/inline" exports the image as a data URI. (If you are using a version of Webpack prior to 5, I assume you can use url-loader instead of an Asset Module)

Loading images in development builds now works by importing the image

import React from "react";

import img from "../[RelativePathToImagesFolder]/images/testimage.png";

class Image extends React.Component {
  render() {
    return (
      <React.Fragment>
        <img src={img} />
        
      </React.Fragment>
    );
  }
}

export default Image;

If you want your images to continue to work in production builds, you need to define/register a custom protocol as by default, Electron loads resources over the file:// scheme which doesn't allow to load resources unless BrowserWindow.webPreferences.webSecurity is turned off (which is insecure). You can start with my custom scheme and then register it in your main.js file.

main.js

const {
    app,
    protocol,
    BrowserWindow
} = require("electron");
const Protocol = require("./protocol");
const isDev = process.env.NODE_ENV === "development";
const port = 40992; // Hardcoded; needs to match webpack.development.js and package.json
const selfHost = `http://localhost:${port}`;

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let win;

async function createWindow() {

    if (!isDev) {
        // Needs to happen before creating/loading the browser window;
        // protocol is only used in prod
        protocol.registerBufferProtocol(Protocol.scheme, Protocol.requestHandler);
    }

    // Create the browser window.
    win = new BrowserWindow({
        width: 800,
        height: 600
    });

    // Load app
    if (isDev) {
        win.loadURL(selfHost);
    } else {
        win.loadURL(`${Protocol.scheme}://rse/index.html`);
    }

    // Emitted when the window is closed.
    win.on("closed", () => {
        // Dereference the window object, usually you would store windows
        // in an array if your app supports multi windows, this is the time
        // when you should delete the corresponding element.
        win = null;
    });
}

// Needs to be called before app is ready;
// gives our scheme access to load relative files,
// as well as local storage, cookies, etc.
// https://electronjs.org/docs/api/protocol#protocolregisterschemesasprivilegedcustomschemes
protocol.registerSchemesAsPrivileged([{
    scheme: Protocol.scheme,
    privileges: {
        standard: true,
        secure: true
    }
}]);

// 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.
app.on("window-all-closed", () => {
    // On macOS it is common for applications and their menu bar
    // to stay active until the user quits explicitly with Cmd + Q
    if (process.platform !== "darwin") {
        app.quit();
    }
});

app.on("activate", () => {
    // On macOS 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 (win === null) {
        createWindow();
    }
});

Assuming you too are using HtmlWebpackPlugin, you'll also need to define the base property (which appends a element to your bundled html file) to the scheme you defined so that all relative urls resolve properly in production

new HtmlWebpackPlugin({
    template: path.resolve(__dirname, "app/src/index.html"),
    filename: "index.html",
    base: "app://rse"
})

Electron: How to resolve CSS url in prod?

2 Answers2