From 2908b03345dceec8960fccce1349bbab6af99da8 Mon Sep 17 00:00:00 2001 From: Florian Dieminger Date: Wed, 4 Dec 2024 17:49:00 +0100 Subject: [PATCH 1/3] feat(spas): move 404 out of _spas and into a index.html This has been a special case, let's streamline it a bit. --- build/spas.ts | 2 +- client/src/app.tsx | 2 +- client/src/page-not-found/fallback-link.tsx | 4 ++-- client/src/page-not-found/index.tsx | 2 +- cloud-function/src/handlers/proxy-content.ts | 2 +- docs/spas.md | 2 +- package.json | 2 +- server/index.ts | 2 +- server/static.ts | 2 +- testing/tests/index.test.ts | 4 ++-- 10 files changed, 12 insertions(+), 12 deletions(-) diff --git a/build/spas.ts b/build/spas.ts index 7076f3f4c014..6802135d2d36 100644 --- a/build/spas.ts +++ b/build/spas.ts @@ -147,7 +147,7 @@ export async function buildSPAs(options: { const locale = DEFAULT_LOCALE; const url = `/${locale}/404.html`; const context: HydrationData = { url, pageNotFound: true }; - const outPath = path.join(BUILD_OUT_ROOT, locale.toLowerCase(), "_spas"); + const outPath = path.join(BUILD_OUT_ROOT, locale.toLowerCase()); fs.mkdirSync(outPath, { recursive: true }); const jsonFilePath = path.join( outPath, diff --git a/client/src/app.tsx b/client/src/app.tsx index ff38d1aafa04..001c73bba834 100644 --- a/client/src/app.tsx +++ b/client/src/app.tsx @@ -229,7 +229,7 @@ export function App(appProps: HydrationData) { to simulate it. */} diff --git a/client/src/page-not-found/fallback-link.tsx b/client/src/page-not-found/fallback-link.tsx index d2cecdf8af8e..ada1741d01fd 100644 --- a/client/src/page-not-found/fallback-link.tsx +++ b/client/src/page-not-found/fallback-link.tsx @@ -67,10 +67,10 @@ export default function FallbackLink({ url }: { url: string }) { // What if we attempt to see if it would be something there in English? // We'll use the `index.json` version of the URL let enUSURL = url.replace(`/${locale}/`, "/en-US/"); - // But of the benefit of local development, devs can use `/_404/` + // But of the benefit of local development, devs can use `/404/` // instead of `/docs/` to simulate getting to the Page not found page. // So remove that when constructing the English index.json URL. - enUSURL = enUSURL.replace("/_404/", "/docs/"); + enUSURL = enUSURL.replace("/en-US/404/", "/en-US/docs/"); // The fallback check URL should not force append index.json so it can // follow any redirects diff --git a/client/src/page-not-found/index.tsx b/client/src/page-not-found/index.tsx index 46011ea4d253..caf611c52ead 100644 --- a/client/src/page-not-found/index.tsx +++ b/client/src/page-not-found/index.tsx @@ -8,7 +8,7 @@ const FallbackLink = React.lazy(() => import("./fallback-link")); // NOTE! To hack on this component, you have to use a trick to even get to this // unless you use the Express server on localhost:5042. -// To get here, use http://localhost:3000/en-US/_404/Whatever/you/like +// To get here, use http://localhost:3000/en-US/404/Whatever/you/like // Now hot-reloading works and you can iterate faster. // Otherwise, you can use http://localhost:5042/en-US/docs/Whatever/you/like // (note the :5042 port) and that'll test it a bit more realistically. diff --git a/cloud-function/src/handlers/proxy-content.ts b/cloud-function/src/handlers/proxy-content.ts index 55ad0e31c793..adbfa8d8e9a2 100644 --- a/cloud-function/src/handlers/proxy-content.ts +++ b/cloud-function/src/handlers/proxy-content.ts @@ -10,7 +10,7 @@ import { Source, sourceUri } from "../env.js"; import { PROXY_TIMEOUT } from "../constants.js"; import { isLiveSampleURL } from "../utils.js"; -const NOT_FOUND_PATH = "en-us/_spas/404.html"; +const NOT_FOUND_PATH = "en-us/404/index.html"; let notFoundBuffer: ArrayBuffer; diff --git a/docs/spas.md b/docs/spas.md index 69e878c96a51..719eb9b4daa8 100644 --- a/docs/spas.md +++ b/docs/spas.md @@ -26,7 +26,7 @@ To debug the 404 page, in local development you have two choices: - -- +- The latter is used so you get hot-reloading as you're working on it. This will only work when you do local development on Yari. diff --git a/package.json b/package.json index cbfbbdb88b2c..2a4012fab36f 100644 --- a/package.json +++ b/package.json @@ -41,7 +41,7 @@ "prettier-check": "prettier --check .", "prettier-format": "prettier --write .", "render:html": "cross-env NODE_ENV=production NODE_OPTIONS=\"--no-warnings=ExperimentalWarning --loader ts-node/esm\" node build/ssr-cli.ts", - "start": "(test -f client/build/asset-manifest.json || yarn build:client) && (test -f ssr/dist/main.js || yarn build:ssr) && (test -f popularities.json || yarn tool popularities) && (test -d client/build/en-us/_spas || yarn tool spas) && (test -d client/build/en-us/_spas/404.html || yarn render:html -s) && nf -j Procfile.start start", + "start": "(test -f client/build/asset-manifest.json || yarn build:client) && (test -f ssr/dist/main.js || yarn build:ssr) && (test -f popularities.json || yarn tool popularities) && (test -d client/build/en-us/404 || yarn tool spas) && (test -d client/build/en-us/404/index.html || yarn render:html -s) && nf -j Procfile.start start", "start:client": "cd client && cross-env NODE_ENV=development BABEL_ENV=development PORT=3000 node scripts/start.js", "start:rari": "(test -f client/build/asset-manifest.json || yarn build:client) && (test -f ssr/dist/main.js || yarn build:ssr) && cross-env RARI=true nf -j Procfile.rari start", "start:rari-external": "(test -f client/build/asset-manifest.json || yarn build:client) && (test -f ssr/dist/main.js || yarn build:ssr) && cross-env RARI=true nf -j Procfile.start start", diff --git a/server/index.ts b/server/index.ts index f9d94e6282a3..b852678fd73d 100644 --- a/server/index.ts +++ b/server/index.ts @@ -127,7 +127,7 @@ async function send404(res: express.Response) { if (!RARI) { return res .status(404) - .sendFile(path.join(STATIC_ROOT, "en-us", "_spas", "404.html")); + .sendFile(path.join(STATIC_ROOT, "en-us", "404", "index.html")); } else { try { const index = await fetch_from_rari("/en-US/404"); diff --git a/server/static.ts b/server/static.ts index fc9a864766e4..ab7fd7485877 100644 --- a/server/static.ts +++ b/server/static.ts @@ -250,7 +250,7 @@ app.get("/*", async (req, res) => { console.log(`Don't know how to mock: ${req.path}`, req.query); res .status(404) - .sendFile(path.join(BUILD_OUT_ROOT, "en-us", "_spas", "404.html")); + .sendFile(path.join(BUILD_OUT_ROOT, "en-us", "404", "index.html")); }); const HOST = process.env.SERVER_HOST || undefined; diff --git a/testing/tests/index.test.ts b/testing/tests/index.test.ts index e23c9e368024..b2e997e53597 100644 --- a/testing/tests/index.test.ts +++ b/testing/tests/index.test.ts @@ -1173,9 +1173,9 @@ test("images that are in the folder but not in tags", () => { }); test("404 page", () => { - const builtFolder = path.join(buildRoot, "en-us", "_spas"); + const builtFolder = path.join(buildRoot, "en-us"); expect(fs.existsSync(builtFolder)).toBeTruthy(); - const htmlFile = path.join(builtFolder, "404.html"); + const htmlFile = path.join(builtFolder, "404", "index.html"); const html = fs.readFileSync(htmlFile, "utf-8"); const $ = cheerio.load(html); expect($("title").text()).toContain("Page not found"); From 59a41c81d6c47ff5d31ea49cde60feeb9cf25fbc Mon Sep 17 00:00:00 2001 From: Florian Dieminger Date: Wed, 4 Dec 2024 17:52:10 +0100 Subject: [PATCH 2/3] update spa url --- build/spas.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/build/spas.ts b/build/spas.ts index 6802135d2d36..b9c304bed0f5 100644 --- a/build/spas.ts +++ b/build/spas.ts @@ -145,7 +145,7 @@ export async function buildSPAs(options: { // The URL isn't very important as long as it triggers the right route in the const locale = DEFAULT_LOCALE; - const url = `/${locale}/404.html`; + const url = `/${locale}/404/index.html`; const context: HydrationData = { url, pageNotFound: true }; const outPath = path.join(BUILD_OUT_ROOT, locale.toLowerCase()); fs.mkdirSync(outPath, { recursive: true }); From 22a77f5faa0483b9cd20a88947327df84df938f2 Mon Sep 17 00:00:00 2001 From: Florian Dieminger Date: Thu, 5 Dec 2024 09:18:01 +0100 Subject: [PATCH 3/3] fix 404 path --- build/spas.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/build/spas.ts b/build/spas.ts index b9c304bed0f5..b7440fc41f6f 100644 --- a/build/spas.ts +++ b/build/spas.ts @@ -147,7 +147,7 @@ export async function buildSPAs(options: { const locale = DEFAULT_LOCALE; const url = `/${locale}/404/index.html`; const context: HydrationData = { url, pageNotFound: true }; - const outPath = path.join(BUILD_OUT_ROOT, locale.toLowerCase()); + const outPath = path.join(BUILD_OUT_ROOT, locale.toLowerCase(), "404"); fs.mkdirSync(outPath, { recursive: true }); const jsonFilePath = path.join( outPath,