Skip to content

Instantly share code, notes, and snippets.

@bbudd

bbudd/assets.md

Created June 13, 2019 12:30
Show Gist options
  • Save bbudd/2a246a718b7757584950b4ed98109115 to your computer and use it in GitHub Desktop.
Save bbudd/2a246a718b7757584950b4ed98109115 to your computer and use it in GitHub Desktop.
Download ZIP
Loading static assets using electron-forge v6 and the webpack plugin
Raw
assets.md

I spent a few hours chasing down just how to get my static assets (css, fonts, images) to load in an Electron app built using electron-forge v6 (https://www.electronforge.io/) and its webpack plugin (https://www.electronforge.io/config/plugins/webpack) while in development mode. There really isn't any documentation available online, either in the electron-forge documentation or in places like blogs or gists or stackoverflow. So I thought I'd put it down here.

Step 1

Load CopyWebpackPlugin npm i -D copy-webpack-plugin

Step 2

Use the plugin to move your directories into place.

It's important that they be at bare minimum in .webpack/renderer, since that is the root used for localhost

webpack.renderer.config.js

const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const assets = [ 'img', 'css', 'fonts' ]; // asset directories

module.exports = {
  // Put your normal webpack config below here
  module: {
    rules: require('./webpack.rules'),
  },
  plugins: assets.map(asset => {
    return new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, 'src', asset),
        to: path.resolve(__dirname, '.webpack/renderer', asset)
      }
    ]);
  })
};

Step 3

IMPORTANT: Access files with absolute paths

Files without absolute paths do not appear to work, even when everything is relatively placed.

index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="/css/main.css">
  </head>
  <body>
    <img src="/img/img_src.png" />
    <p style="font-family: MyFancyFont, sans-serif;">👆 that's an image!</p>
  </body>
</html>
@sharkrice
Copy link

Thank you very much!

@smarthug
Copy link

Thank you! It works!!

@JamesGrom
Copy link

@bbudd - thank you so much for sharing this

@acequants
Copy link

electron/forge#1592

@a358003542
Copy link

Here is my solution:

webpack.renderer.config.js

const rules = require('./webpack.rules');

const CopyPlugin = require("copy-webpack-plugin");
rules.push({
  test: /\.css$/,
  use: [{ loader: 'style-loader' }, { loader: 'css-loader' }],
});

module.exports = {
  // Put your normal webpack config below here
  module: {
    rules,
  },
  plugins: [
    new CopyPlugin({
      patterns: [
        { from: 'resources/images', to: 'main_window/static/images' },
      ],
    }),
  ]
};

use copy-webpack-plugin copy the image file to the .webpack/renderer and the main_window .

and use like this to reference the image file:

        let image_src = `../main_window/static/${LatexSettings[button_key]["button_image"]}`

notice the .. double dot symbole, when in the npm start devserver it useless, but can work out. and in the package mode, the double dot symbole is very critical.

@rodolfojnn
Copy link

Thank you very much!

EDIT: While this works in development, it does not work in production? Am I missing something?

In production, images are bundled within resources/app.asar.
Try referencing the image in your HTML like this:

<img src="../img/img_src.png" />

This should ensure it works both in development and in production.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment