Use USE_LOCAL_ASSETS env var to determine path for assets

[jonathonherbert]

What does this change?

Amend decidePublicPath to use the environment variable USE_LOCAL_ASSETS to determine the path for assets, rather than a combination of the NODE_ENV variable, and the hostname.

Why?

The hostname for using live harnesses to work on content atoms locally (docs) is always localhost. At the moment, decidePublicPath sees that hostname, and makes asset paths relative as a result — but because DCR isn't running locally, those paths don't resolve to assets. The hope is that this change accommodates both the workflows that require local assets (make dev, make prod-local, CI), and the workflows that require hosted assets (code, production, live harnesses).

Here's a table that maps out the old way, the new way, and the result, against all the workflows we know of (I've spoken to @arelra and @Jakeii). If other workflows exist, this PR may impact them, too — so please let me know if there's a row missing.

	NODE_ENV (old)	hostname (old)	USE_LOCAL_ASSETS (new)	Old assets path	New assets path
local	development	localhost	true	/assets/	/assets/
prod-local	production	localhost	true	/assets/	/assets/
ci	production	localhost	true	/assets/	/assets/
code	production	code.dev-theguardian.com	unset	${frontendAssetsFullURL}assets/	${frontendAssetsFullURL}assets/
prod	production	theguardian.com	unset	${frontendAssetsFullURL}assets/	${frontendAssetsFullURL}assets/
remote-preview	production	localhost	unset	/assets/	${frontendAssetsFullURL}assets/

How to test

• CI passes
• Running DCR locally (make dev) with frontend gives local asset paths
• Running DCR locally (make prod-local) with frontend gives local asset paths
• Running DCR in CODE works as expected
• Running live harnesses with Preview works as expected

Screenshots

N/A

[github-actions]

Hello 👋! When you're ready to run Chromatic, please apply the run_chromatic label to this PR.

You will need to reapply the label each time you want to run Chromatic.

Click here to see the Chromatic project.

[github-actions]

Deploy build 28819 of dotcom:rendering-all to CODE

All deployment options

• Deploy build 28819 of dotcom:rendering-all to CODE
• Deploy parts of build 28819 to CODE by previewing it first
• What's on CODE right now?

---

From guardian/actions-riff-raff.

[arelra]

I think the NODE_ENV variable here determines which port playwright uses i.e. 9000

dotcom-rendering/dotcom-rendering/playwright.config.ts

Lines 3 to 9 in ba85b8b

	const isDev = process.env.NODE_ENV !== 'production';
	/**
	* The server port for local development or CI
	*/
	export const PORT = isDev ? 3030 : 9000;
	export const ORIGIN = `http://localhost:${PORT}`;

I don't think these env variables on the GHA runner will make it to the container that the CI playwright tests run against?

Do we need to add USE_LOCAL_ASSETS=true to Containerfile ?

dotcom-rendering/dotcom-rendering/Containerfile

Lines 12 to 13 in ba85b8b

	ENV DISABLE_LOGGING_AND_METRICS=true
	ENV NODE_ENV=production

[jonathonherbert]

Ah, we don't use the container in production — so it's safe to add this?

Edit: the bundle doesn't look like it's build in the container, it's copied in, so we'll need to pass this in on build, if that's possible — run out of time tonight, but will pursue.

[jonathonherbert]

Okay, after a somewhat fragmented series of commits to better understand how this works, I think I now get it — we're not bundling at all in the container, we're copying in JS and running it, and so env vars are respected in that context. Verified by building locally with make riffraff-bundle, creating the container, and running — I can see local asset paths:

I think I'm confident enough to 🚢 this now.

[jonathonherbert]

(Change is 76e0de0)

[github-actions]

Deploy build 2091 of dotcom:ab-testing to CODE

All deployment options

• Deploy build 2091 of dotcom:ab-testing to CODE
• Deploy parts of build 2091 to CODE by previewing it first
• What's on CODE right now?

---

From guardian/actions-riff-raff.

[arelra]

Thanks for stellar tidy up ✨

Latest changes approved ✅

[gu-prout]

Overdue on PROD (merged by @jonathonherbert 30 minutes and 8 seconds ago) What's gone wrong?

[gu-prout]

Seen on PROD (merged by @jonathonherbert 40 minutes and 10 seconds ago) Please check your changes!