Skip to content

Commit 8fdb564

Browse files
committed
fix: set publicPath for Experience CS
RaspberryPiFoundation/experience-cs#23 We recently embedded the scratch-gui within our Experience CS app. We have since noticed a number of issues with assets failing to load within the browser, for example the browser is attempting to load assets from URLs relative to the webpack entry point (rather than from the root or from `/scratch-gui/`). After some investigation it turns out that is due to the fact that the webpack option `publicPath` had been set to `auto` [1]. For our purposes we want assets to be served from `/scratch-gui`, and I can't see the need to make this configurable at this stage, therefore I have hardcoded this value for now as that also makes building the package less prone to error. However if we were to push changes upstream, then I think it would make sense to use an ASSET_PATH environment variable. [1] https://webpack.js.org/guides/public-path/ ``` **Automatic publicPath** There are chances that you don't know what the publicPath will be in advance, and webpack can handle it automatically for you by determining the public path from variables like import.meta.url, document.currentScript, script.src or self.location. ```
1 parent e56792a commit 8fdb564

File tree

1 file changed

+3
-1
lines changed

1 file changed

+3
-1
lines changed

packages/scratch-gui/webpack.config.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
88
const ScratchWebpackConfigBuilder = require('scratch-webpack-configuration');
99

1010
// const STATIC_PATH = process.env.STATIC_PATH || '/static';
11+
const ASSET_PATH = '/scratch-gui/';
12+
1113

1214
const commonHtmlWebpackPluginOptions = {
1315
// Google Tag Manager ID
@@ -103,7 +105,7 @@ const distConfig = baseConfig.clone()
103105
// - if the publicPath is static here (defaults to `/`), they are unable to load their assets,
104106
// which depend on a relative path resolution.
105107
// (e.g. `/tmp/*path-to-packaged-dist*/static/assets` in scratch-desktop)
106-
publicPath: 'auto',
108+
publicPath: ASSET_PATH,
107109
path: path.resolve(__dirname, 'dist')
108110
}
109111
})

0 commit comments

Comments
 (0)