Use USE_LOCAL_ASSETS env var to determine path for assets

.github/workflows/container.yml

@@ -32,6 +32,8 @@ jobs:
       - name: Generate production bundle
         run: make riffraff-bundle
         working-directory: dotcom-rendering
+        env:
+          USE_LOCAL_ASSETS: true
 
       - name: Build Container Image
         id: build_image

dotcom-rendering/makefile

@@ -43,10 +43,12 @@ prod:
 	NODE_ENV=production node dist/server.js
 
 prod-local: export DISABLE_LOGGING_AND_METRICS = true
+prod-local: export USE_LOCAL_ASSETS = true
 prod-local: prod
 
 # dev #########################################
 
+dev: export USE_LOCAL_ASSETS = true
 dev: clear clean-dist install
 	$(call log, "starting DEV server")
 	@NODE_ENV=development webpack serve --config ./webpack/webpack.config.js

dotcom-rendering/src/client/decidePublicPath.test.ts

@@ -1,14 +1,5 @@
 import { decidePublicPath } from './decidePublicPath';
 
-const mockHostname = (hostname: string | undefined) => {
-	Object.defineProperty(window, 'location', {
-		value: {
-			hostname,
-		},
-		writable: true,
-	});
-};
-
 const mockFrontendAssetsFullURL = (frontendAssetsFullURL: string) => {
 	Object.defineProperty(window, 'guardian', {
 		value: {
@@ -24,26 +15,13 @@ describe('decidePublicPath', () => {
 	beforeEach(() => {
 		jest.resetModules();
 
-		mockHostname(undefined);
-
 		mockFrontendAssetsFullURL('https://assets.guim.co.uk/');
 
-		process.env = { NODE_ENV: undefined, HOSTNAME: undefined };
-	});
-
-	it('with development flag', () => {
-		process.env.NODE_ENV = 'development';
-		expect(decidePublicPath()).toEqual('/assets/');
-	});
-
-	it('with production flag', () => {
-		process.env.NODE_ENV = 'production';
-		expect(decidePublicPath()).toEqual('https://assets.guim.co.uk/assets/');
+		process.env = { USE_LOCAL_ASSETS: undefined };
 	});
 
-	it('with production flag and localhost', () => {
-		process.env.NODE_ENV = 'production';
-		mockHostname('localhost');
+	it('with USE_LOCAL_ASSETS flag', () => {
+		process.env.USE_LOCAL_ASSETS = 'true';
 		expect(decidePublicPath()).toEqual('/assets/');
 	});
 

dotcom-rendering/src/client/decidePublicPath.ts

@@ -4,10 +4,9 @@
  * @returns The webpack public path to use
  */
 export const decidePublicPath = (): string => {
-	const isDev = process.env.NODE_ENV === 'development';
-	const isLocalHost = window.location.hostname === 'localhost';
-	// Use relative path if running locally or in CI
-	return isDev || isLocalHost
+	const useLocalAssets = process.env.USE_LOCAL_ASSETS === 'true';
+
+	return useLocalAssets
 		? '/assets/'
 		: `${window.guardian.config.frontendAssetsFullURL}assets/`;
 };

dotcom-rendering/webpack/webpack.config.js

@@ -60,6 +60,9 @@ const commonConfigs = ({ platform }) => ({
 		new webpack.DefinePlugin({
 			'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
 			'process.env.HOSTNAME': JSON.stringify(process.env.HOSTNAME),
+			'process.env.USE_LOCAL_ASSETS': JSON.stringify(
+				process.env.USE_LOCAL_ASSETS,
+			),
 		}),
 		// Matching modules specified in this regex will not be imported during the webpack build
 		// We use this if there are optional dependencies (e.g in jsdom, ws) to remove uneccesary warnings in our builds / console outpouts.