Adding support for publicPath

.changeset/stale-impalas-return.md

@@ -0,0 +1,5 @@
+---
+"10up-toolkit": minor
+---
+
+Add support to configure Webpack's publicPath

packages/toolkit/README.md

@@ -184,20 +184,37 @@ module.exports = {
 Alternatively you can specify the paths in `package.json`
 
 ```json
- "10up-toolkit": {
-    "devURL": "https://my-project.test",
-    "entry": {
-        //...
-    },
-    "filenames": {
-        "block": "js/blocks/[name]/editor.js",
-	    "blockCSS": "css/blocks/[name]/editor.css",
-    }
-  }
+"10up-toolkit": {
+	"devURL": "https://my-project.test",
+	"entry": {
+		//...
+	},
+	"filenames": {
+		"block": "js/blocks/[name]/editor.js",
+		"blockCSS": "css/blocks/[name]/editor.css",
+	}
+}
 ```
 
 Note that when overriding via the `filenames.config.js` you must export the filenames for all file types.
 
+### <a id="customize-public-path"></a> Customizing public path
+
+When using toolkit in a React application, you might want to customize the public path so lazy loaded components know where the assets are.
+
+This can be tweaked in the options within `package.json`:
+
+```json
+"10up-toolkit": {
+	"publicPath": "/my/custom/path"
+}
+```
+
+Alternatively, you can set up `process.env.ASSET_PATH` to whatever path (or CDN) you want it to be.
+
+> **Warning**
+> Please note that using `process.env.ASSET_PATH` will override the `publicPath`
+
 ### WordPress Block Asset Handling
 
 _NOTE: Since 10up-toolkit@6 this `useBlockAssets` is on by default_

packages/toolkit/config/__tests__/__snapshots__/webpack-basic-config.js.snap

@@ -379,6 +379,7 @@ Object {
       return isBlockAsset ? filenames.block : filenames.js;
     },
     "path": "/dist",
+    "publicPath": "/",
   },
   "performance": Object {
     "hints": "warning",
@@ -1610,6 +1611,7 @@ Object {
       return isBlockAsset ? filenames.block : filenames.js;
     },
     "path": "/dist",
+    "publicPath": "/",
   },
   "performance": Object {
     "hints": "warning",

packages/toolkit/config/__tests__/__snapshots__/webpack-cli-arguments.js.snap

@@ -481,6 +481,7 @@ Object {
       return isBlockAsset ? filenames.block : filenames.js;
     },
     "path": "/dist",
+    "publicPath": "/",
   },
   "performance": Object {
     "hints": "warning",
@@ -695,6 +696,7 @@ Object {
       return isBlockAsset ? filenames.block : filenames.js;
     },
     "path": "/dist",
+    "publicPath": "/",
   },
   "performance": Object {
     "hints": "warning",
@@ -909,6 +911,7 @@ Object {
       return isBlockAsset ? filenames.block : filenames.js;
     },
     "path": "/dist",
+    "publicPath": "/",
   },
   "performance": Object {
     "hints": "warning",

packages/toolkit/config/__tests__/__snapshots__/webpack-fast-refresh.js.snap

@@ -193,6 +193,7 @@ Object {
       return isBlockAsset ? filenames.block : filenames.js;
     },
     "path": "/dist",
+    "publicPath": "/",
   },
   "performance": Object {
     "hints": "warning",

packages/toolkit/config/webpack/output.js

@@ -3,7 +3,7 @@ const path = require('path');
 module.exports = ({
 	isPackage,
 	packageConfig: { packageType, main },
-	projectConfig: { filenames, hot },
+	projectConfig: { filenames, hot, publicPath },
 	buildFiles,
 }) => {
 	if (isPackage) {
@@ -26,6 +26,7 @@ module.exports = ({
 		clean: !hot,
 		path: path.resolve(process.cwd(), 'dist'),
 		chunkFilename: filenames.jsChunk,
+		publicPath,
 		filename: (pathData) => {
 			if (pathData.chunk.name === 'runtime') {
 				return 'fast-refresh/hmr-runtime.js';

packages/toolkit/utils/config.js

@@ -119,10 +119,11 @@ const getDefaultConfig = () => {
 		analyze,
 		hot,
 		// true by default (if TENUP_NO_EXTERNALS is not set)
-		// if TENUP_NO_EXTERNALS is truthy then dependecyExternals is false
+		// if TENUP_NO_EXTERNALS is truthy then dependencyExternals is false
 		wpDependencyExternals:
 			typeof process.env.TENUP_NO_EXTERNALS === 'undefined' ||
 			!process.env.TENUP_NO_EXTERNALS,
+		publicPath: process.env.ASSET_PATH || '/',
 		useBlockAssets: true,
 		include,
 	};
@@ -150,12 +151,14 @@ const getTenUpScriptsConfig = () => {
 
 	const configInclude = config.include ?? [];
 	const include = defaultConfig.include.length === 0 ? configInclude : defaultConfig.include;
+	const publicPath = process.env.ASSET_PATH || config.publicPath || defaultConfig.publicPath;
 
 	return {
 		// override default configs with user-defined config
 		...defaultConfig,
 		...config,
 		include,
+		publicPath,
 		// these properties must be merged
 		filenames: {
 			...defaultConfig.filenames,