0

I have an electron forge app that I'm ready to package but my static assets don't work in the built version. For example, I'm trying to display our logo:

<img src='/assets/svgs/logo.svg' class='text'></img>

Since in dev it spins up a server, the URL for the page is http://localhost:3000/main_window. To access my static files I put a "/" which works as it loads from the base domain and not off the window name:

http://localhost:3000/assets/svg/logo.svg

Without the first "/" it looks here which doesn't work:

http://localhost:3000/main_window/assets/svgs/logo.svg

But with the first "/", the built app it interprets the path different because its no longer in a dev server:

file:///assets/svgs/logo.svg

If I change my html to following then it works in the built version but not the dev version:

<img src='assets/svgs/logo.svg' class='text'></img>

file:///C:/Users/<USER>/projects/<PROJECT>/out/App-win32-x64/resources/app/.webpack/renderer/main_window/assets/svgs/logo.svg

I am using the WebpackCopyPlugin to copy these assets into the .webpack folder

  new CopyWebpackPlugin({
    patterns: [
      { from: path.resolve(__dirname, 'src/renderer/assets/'), to: 'assets' },
    ],
  })

That is duplicating the assets in two places in the .webpack folder however. I see my assets in both:

.webpack\renderer\assets
.webpack\renderer\main_window\assets

I'm not sure why its duplicating these files, but with the assets in the main_window folder, I dont understand why the path http://localhost:3000/main_window/assets/svgs/logo.svg doesn't resolve in the dev environment. I also find it weird in the dev server it looks at the base assets folder, but in the built app it looks at main_window\assets.

How do I go about getting these static assets to work in both the dev server and the built app without having to use different paths depending on which environment its running in?

Edit: I did find this similar post, but their answer was to run an express server in production, and the other solution was to change the path based on the environment variable. Running an express server in prod all for a few images sounds like a band-aid solution and having to use an environment variable to set your path doesn't work in raw HTML. Maintainability on that isn't great as you need to remember to use that path and could still easily lead to broken production code if not tested well.

Can't use static files in electron forge

Joe Jankowiak
  • 1,059
  • 12
  • 37

1 Answers1

1

I found the solution in an issue posted to webpack without needing a separate server, file protocol handler or to reference it based on a variable:

In the CopyWebpackConfig, explicitly providing a path to the .webpack/main_window folder for the destination worked:

  new CopyWebpackPlugin({
    patterns: [
      { 
        from: path.resolve(__dirname, 'src/renderer/assets/'), 
        to: path.resolve(__dirname, '.webpack/renderer/main_window/assets/') 
      },
    ]
  })

You can then access your files without the base "/":

<img src='assets/svgs/logo.svg'></img>

I'm not sure what makes this work though - previously the assets were already being copied there so from a file structure standpoint its identical. It must give electron-forge a reference to that path to make it accessible from their webserver in the dev environment.

Joe Jankowiak
  • 1,059
  • 12
  • 37