title: Electron forge static assets in dev and built app
body: <p>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:</p>
  <pre><code>&lt;img src='/assets/svgs/logo.svg' class='text'&gt;&lt;/img&gt;
  </code></pre>
  <p>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 &quot;/&quot; which works as it loads from the base domain and not off the window name:</p>
  <pre><code>http://localhost:3000/assets/svg/logo.svg 
  </code></pre>
  <p>Without the first &quot;/&quot; it looks here which doesn't work:</p>
  <pre><code>http://localhost:3000/main_window/assets/svgs/logo.svg
  </code></pre>
  <p>But with the first &quot;/&quot;, the built app it interprets the path different because its no longer in a dev server:</p>
  <pre><code>file:///assets/svgs/logo.svg
  </code></pre>
  <p>If I change my html to following then it works in the built version but not the dev version:</p>
  <pre><code>&lt;img src='assets/svgs/logo.svg' class='text'&gt;&lt;/img&gt;
  
  file:///C:/Users/&lt;USER&gt;/projects/&lt;PROJECT&gt;/out/App-win32-x64/resources/app/.webpack/renderer/main_window/assets/svgs/logo.svg
  </code></pre>
  <p>I am using the WebpackCopyPlugin to copy these assets into the .webpack folder</p>
  <pre><code>  new CopyWebpackPlugin({
      patterns: [
        { from: path.resolve(__dirname, 'src/renderer/assets/'), to: 'assets' },
      ],
    })
  </code></pre>
  <p>That is duplicating the assets in two places in the .webpack folder however. I see my assets in both:</p>
  <pre><code>.webpack\renderer\assets
  .webpack\renderer\main_window\assets
  </code></pre>
  <p>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.</p>
  <p>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?</p>
  <p><em><strong>Edit:</strong></em>
  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.</p>
  <p><a href="https://stackoverflow.com/questions/60839621/cant-use-static-files-in-electron-forge">Can&#39;t use static files in electron forge</a></p>