Skip to content

Commit 63e57cf

Browse files
piehpieh
authored
feat(gatsby,gatsby-adapter-netlify): support pathPrefix and trailingSlash options (#38666)
* initial wip * prefix all the things * lambda handler stripping path prefix * test: adjust e2e setup to also run variant with path prefix and no trailing slashes * chore: use queue for file moving to limit concurrency * tmp: don't clean up deploys while debugging things * test: added variant variables to deploy title * fix TS * fix unit tests * try different cypress group * try different cypress group2 * maybe fix passing cypress env? * fix ssr path_prefix * keep 404/500 status pages in original place * fix typo * fix assertion? * streamline file moving logic * cache (and restore) publishdir locally too * add pretty-url unit tests * handle dynamic paths when generating pretty url file names * update intercepting glob to handle path prefix * update intercepting glob to handle path prefix 2 * restore automatic deploys deletion * test: jest ensure we mount files that we test filepaths for * handle path prefix in header rules * drop debug helpers * first check if local * drop debug log * handle external redirects when pathPrefix is used. Thanks @techfg * make placeholder syntax consistent * update comment * move dynamic route path normalization to its own function
1 parent 22c2412 commit 63e57cf

File tree

26 files changed

+721
-127
lines changed

26 files changed

+721
-127
lines changed

‎e2e-tests/adapters/cypress/configs/netlify.ts

+1-2
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,7 @@ import { defineConfig } from "cypress"
33
export default defineConfig({
44
e2e: {
55
baseUrl: process.env.DEPLOY_URL || `http://localhost:8888`,
6-
// Netlify doesn't handle trailing slash behaviors really, so no use in testing it
7-
excludeSpecPattern: [`cypress/e2e/trailing-slash.cy.ts`],
6+
excludeSpecPattern: [],
87
projectId: `4enh4m`,
98
videoUploadOnPasses: false,
109
experimentalRunAllSpecs: true,

‎e2e-tests/adapters/cypress/e2e/basics.cy.ts

+8-5
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
11
import { title } from "../../constants"
22
import { WorkaroundCachedResponse } from "../utils/dont-cache-responses-in-browser"
33

4+
const PATH_PREFIX = Cypress.env(`PATH_PREFIX`) || ``
5+
46
describe("Basics", () => {
57
beforeEach(() => {
6-
cy.intercept("/gatsby-icon.png").as("static-folder-image")
7-
cy.intercept("/static/astro-**.png", WorkaroundCachedResponse).as(
8-
"img-import"
9-
)
8+
cy.intercept(PATH_PREFIX + "/gatsby-icon.png").as("static-folder-image")
9+
cy.intercept(
10+
PATH_PREFIX + "/static/astro-**.png",
11+
WorkaroundCachedResponse
12+
).as("img-import")
1013

1114
cy.visit("/").waitForRouteChange()
1215
})
@@ -35,7 +38,7 @@ describe("Basics", () => {
3538
failOnStatusCode: false,
3639
})
3740

38-
cy.get("h1").should("have.text", "Page not found")
41+
cy.get("h1").should("have.text", "Page not found (custom)")
3942
})
4043
it("should apply CSS", () => {
4144
cy.get(`h1`).should(`have.css`, `color`, `rgb(21, 21, 22)`)

‎e2e-tests/adapters/cypress/e2e/client-only.cy.ts

+27-19
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
1-
Cypress.on('uncaught:exception', (err) => {
2-
if (err.message.includes('Minified React error')) {
1+
Cypress.on("uncaught:exception", err => {
2+
if (err.message.includes("Minified React error")) {
33
return false
44
}
55
})
66

7-
describe('Sub-Router', () => {
7+
describe("Sub-Router", () => {
88
const routes = [
99
{
1010
path: "/routes/sub-router",
1111
marker: "index",
12-
label: "Index route"
12+
label: "Index route",
1313
},
1414
{
1515
path: `/routes/sub-router/page/profile`,
@@ -51,39 +51,47 @@ describe('Sub-Router', () => {
5151
})
5252
})
5353

54-
describe('Paths', () => {
54+
describe("Paths", () => {
5555
const routes = [
5656
{
57-
name: 'client-only',
58-
param: 'dune',
57+
name: "client-only",
58+
param: "dune",
5959
},
6060
{
61-
name: 'client-only/wildcard',
62-
param: 'atreides/harkonnen',
61+
name: "client-only/wildcard",
62+
param: "atreides/harkonnen",
6363
},
6464
{
65-
name: 'client-only/named-wildcard',
66-
param: 'corinno/fenring',
65+
name: "client-only/named-wildcard",
66+
param: "corinno/fenring",
6767
},
6868
] as const
6969

7070
for (const route of routes) {
7171
it(`should return "${route.name}" result`, () => {
72-
cy.visit(`/routes/${route.name}${route.param ? `/${route.param}` : ''}`).waitForRouteChange()
72+
cy.visit(
73+
`/routes/${route.name}${route.param ? `/${route.param}` : ""}`
74+
).waitForRouteChange()
7375
cy.get("[data-testid=title]").should("have.text", route.name)
7476
cy.get("[data-testid=params]").should("have.text", route.param)
7577
})
7678
}
7779
})
7880

79-
describe('Prioritize', () => {
80-
it('should prioritize static page over matchPath page with wildcard', () => {
81-
cy.visit('/routes/client-only/prioritize').waitForRouteChange()
82-
cy.get("[data-testid=title]").should("have.text", "client-only/prioritize static")
81+
describe("Prioritize", () => {
82+
it("should prioritize static page over matchPath page with wildcard", () => {
83+
cy.visit("/routes/client-only/prioritize").waitForRouteChange()
84+
cy.get("[data-testid=title]").should(
85+
"have.text",
86+
"client-only/prioritize static"
87+
)
8388
})
84-
it('should return result for wildcard on nested prioritized path', () => {
85-
cy.visit('/routes/client-only/prioritize/nested').waitForRouteChange()
86-
cy.get("[data-testid=title]").should("have.text", "client-only/prioritize matchpath")
89+
it("should return result for wildcard on nested prioritized path", () => {
90+
cy.visit("/routes/client-only/prioritize/nested").waitForRouteChange()
91+
cy.get("[data-testid=title]").should(
92+
"have.text",
93+
"client-only/prioritize matchpath"
94+
)
8795
cy.get("[data-testid=params]").should("have.text", "nested")
8896
})
8997
})

‎e2e-tests/adapters/cypress/e2e/headers.cy.ts

+34-17
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import { WorkaroundCachedResponse } from "../utils/dont-cache-responses-in-browser"
22

3+
const PATH_PREFIX = Cypress.env(`PATH_PREFIX`) || ``
4+
35
describe("Headers", () => {
46
const defaultHeaders = {
57
"x-xss-protection": "1; mode=block",
@@ -73,23 +75,38 @@ describe("Headers", () => {
7375
}
7476

7577
beforeEach(() => {
76-
cy.intercept("/", WorkaroundCachedResponse).as("index")
77-
cy.intercept("routes/ssr/static", WorkaroundCachedResponse).as("ssr")
78-
cy.intercept("routes/dsg/static", WorkaroundCachedResponse).as("dsg")
79-
80-
cy.intercept("**/page-data.json", WorkaroundCachedResponse).as("page-data")
81-
cy.intercept("**/app-data.json", WorkaroundCachedResponse).as("app-data")
82-
cy.intercept("**/slice-data/*.json", WorkaroundCachedResponse).as(
83-
"slice-data"
84-
)
85-
cy.intercept("**/page-data/sq/d/*.json", WorkaroundCachedResponse).as(
86-
"static-query-result"
87-
)
88-
89-
cy.intercept("/static/astro-**.png", WorkaroundCachedResponse).as(
90-
"img-webpack-import"
91-
)
92-
cy.intercept("*.js", WorkaroundCachedResponse).as("js")
78+
cy.intercept(PATH_PREFIX + "/", WorkaroundCachedResponse).as("index")
79+
cy.intercept(
80+
PATH_PREFIX + "/routes/ssr/static",
81+
WorkaroundCachedResponse
82+
).as("ssr")
83+
cy.intercept(
84+
PATH_PREFIX + "/routes/dsg/static",
85+
WorkaroundCachedResponse
86+
).as("dsg")
87+
88+
cy.intercept(
89+
PATH_PREFIX + "/**/page-data.json",
90+
WorkaroundCachedResponse
91+
).as("page-data")
92+
cy.intercept(
93+
PATH_PREFIX + "/**/app-data.json",
94+
WorkaroundCachedResponse
95+
).as("app-data")
96+
cy.intercept(
97+
PATH_PREFIX + "/**/slice-data/*.json",
98+
WorkaroundCachedResponse
99+
).as("slice-data")
100+
cy.intercept(
101+
PATH_PREFIX + "/**/page-data/sq/d/*.json",
102+
WorkaroundCachedResponse
103+
).as("static-query-result")
104+
105+
cy.intercept(
106+
PATH_PREFIX + "/static/astro-**.png",
107+
WorkaroundCachedResponse
108+
).as("img-webpack-import")
109+
cy.intercept(PATH_PREFIX + "/**/*.js", WorkaroundCachedResponse).as("js")
93110
})
94111

95112
it("should contain correct headers for index page", () => {

‎e2e-tests/adapters/cypress/e2e/redirects.cy.ts

+7-3
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ Cypress.on("uncaught:exception", err => {
77
})
88

99
const TRAILING_SLASH = Cypress.env(`TRAILING_SLASH`) || `never`
10+
const PATH_PREFIX = Cypress.env(`PATH_PREFIX`) || ``
1011

1112
// Those tests won't work using `gatsby serve` because it doesn't support redirects
1213

@@ -122,7 +123,8 @@ describe("Redirects", () => {
122123

123124
cy.location(`pathname`).should(
124125
`equal`,
125-
applyTrailingSlashOption(`/routes/redirect/hit`, TRAILING_SLASH)
126+
PATH_PREFIX +
127+
applyTrailingSlashOption(`/routes/redirect/hit`, TRAILING_SLASH)
126128
)
127129
cy.location(`hash`).should(`equal`, `#anchor`)
128130
cy.location(`search`).should(`equal`, ``)
@@ -138,7 +140,8 @@ describe("Redirects", () => {
138140

139141
cy.location(`pathname`).should(
140142
`equal`,
141-
applyTrailingSlashOption(`/routes/redirect/hit`, TRAILING_SLASH)
143+
PATH_PREFIX +
144+
applyTrailingSlashOption(`/routes/redirect/hit`, TRAILING_SLASH)
142145
)
143146
cy.location(`hash`).should(`equal`, ``)
144147
cy.location(`search`).should(`equal`, `?query_param=hello`)
@@ -154,7 +157,8 @@ describe("Redirects", () => {
154157

155158
cy.location(`pathname`).should(
156159
`equal`,
157-
applyTrailingSlashOption(`/routes/redirect/hit`, TRAILING_SLASH)
160+
PATH_PREFIX +
161+
applyTrailingSlashOption(`/routes/redirect/hit`, TRAILING_SLASH)
158162
)
159163
cy.location(`hash`).should(`equal`, `#anchor`)
160164
cy.location(`search`).should(`equal`, `?query_param=hello`)

‎e2e-tests/adapters/cypress/e2e/ssr.cy.ts

+5-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
const staticPath = "/routes/ssr/static"
22
const paramPath = "/routes/ssr/param"
33

4+
const PATH_PREFIX = Cypress.env(`PATH_PREFIX`) || ``
5+
46
describe("Server Side Rendering (SSR)", () => {
57
it(`direct visit no query params (${staticPath})`, () => {
68
cy.visit(staticPath).waitForRouteChange()
@@ -32,8 +34,8 @@ describe("Server Side Rendering (SSR)", () => {
3234
cy.visit(errorPath, { failOnStatusCode: false }).waitForRouteChange()
3335

3436
cy.location(`pathname`)
35-
.should(`equal`, errorPath)
37+
.should(`equal`, PATH_PREFIX + errorPath)
3638
.get(`h1`)
37-
.should(`have.text`, `INTERNAL SERVER ERROR`)
39+
.should(`have.text`, `INTERNAL SERVER ERROR (custom)`)
3840
})
39-
})
41+
})

‎e2e-tests/adapters/cypress/support/e2e.ts

+3-1
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@ declare global {
1515
}
1616
}
1717

18+
const PATH_PREFIX = Cypress.env(`PATH_PREFIX`) || ``
19+
1820
Cypress.Commands.add(`assertRoute`, route => {
19-
cy.url().should(`equal`, `${window.location.origin}${route}`)
21+
cy.url().should(`equal`, `${window.location.origin}${PATH_PREFIX}${route}`)
2022
})

‎e2e-tests/adapters/gatsby-config.ts

+3
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ import { siteDescription, title } from "./constants"
55
const shouldUseDebugAdapter = process.env.USE_DEBUG_ADAPTER ?? false
66
const trailingSlash = (process.env.TRAILING_SLASH ||
77
`never`) as GatsbyConfig["trailingSlash"]
8+
const pathPrefix = (process.env.PATH_PREFIX ||
9+
undefined) as GatsbyConfig["pathPrefix"]
810

911
let configOverrides: GatsbyConfig = {}
1012

@@ -21,6 +23,7 @@ const config: GatsbyConfig = {
2123
siteDescription,
2224
},
2325
trailingSlash,
26+
pathPrefix,
2427
plugins: [],
2528
headers: [
2629
{

‎e2e-tests/adapters/package.json

+7-4
Original file line numberDiff line numberDiff line change
@@ -6,19 +6,21 @@
66
"author": "LekoArts",
77
"scripts": {
88
"develop": "cross-env CYPRESS_SUPPORT=y gatsby develop",
9-
"build": "cross-env CYPRESS_SUPPORT=y gatsby build",
9+
"build": "cross-env CYPRESS_SUPPORT=y gatsby build --prefix-paths",
1010
"build:debug": "cross-env USE_DEBUG_ADAPTER=y CYPRESS_SUPPORT=y npm run build",
1111
"serve": "gatsby serve",
1212
"clean": "gatsby clean",
1313
"cy:open": "cypress open --browser chrome --e2e",
1414
"develop:debug": "start-server-and-test develop http://localhost:8000 'npm run cy:open -- --config baseUrl=http://localhost:8000'",
1515
"ssat:debug": "start-server-and-test serve http://localhost:9000 cy:open",
16-
"test:template": "cross-env-shell CYPRESS_GROUP_NAME=$ADAPTER TRAILING_SLASH=$TRAILING_SLASH node ../../scripts/cypress-run-with-conditional-record-flag.js --browser chrome --e2e --config-file \"cypress/configs/$ADAPTER.ts\" --env TRAILING_SLASH=$TRAILING_SLASH",
17-
"test:template:debug": "cross-env-shell CYPRESS_GROUP_NAME=$ADAPTER TRAILING_SLASH=$TRAILING_SLASH npm run cy:open -- --config-file \"cypress/configs/$ADAPTER.ts\" --env TRAILING_SLASH=$TRAILING_SLASH",
16+
"test:template": "cross-env-shell CYPRESS_GROUP_NAME=\"adapter:$ADAPTER / trailingSlash:${TRAILING_SLASH:-always} / pathPrefix:${PATH_PREFIX:--}\" TRAILING_SLASH=$TRAILING_SLASH PATH_PREFIX=$PATH_PREFIX node ../../scripts/cypress-run-with-conditional-record-flag.js --browser chrome --e2e --config-file \"cypress/configs/$ADAPTER.ts\" --env TRAILING_SLASH=$TRAILING_SLASH,PATH_PREFIX=$PATH_PREFIX",
17+
"test:template:debug": "cross-env-shell CYPRESS_GROUP_NAME=\"adapter:$ADAPTER / trailingSlash:${TRAILING_SLASH:-always} / pathPrefix:${PATH_PREFIX:--}\" TRAILING_SLASH=$TRAILING_SLASH PATH_PREFIX=$PATH_PREFIX npm run cy:open -- --config-file \"cypress/configs/$ADAPTER.ts\" --env TRAILING_SLASH=$TRAILING_SLASH,PATH_PREFIX=$PATH_PREFIX",
1818
"test:debug": "npm-run-all -s build:debug ssat:debug",
1919
"test:netlify": "cross-env TRAILING_SLASH=always node scripts/deploy-and-run/netlify.mjs test:template",
2020
"test:netlify:debug": "cross-env TRAILING_SLASH=always node scripts/deploy-and-run/netlify.mjs test:template:debug",
21-
"test": "npm-run-all -c -s test:netlify"
21+
"test:netlify:prefix-never": "cross-env TRAILING_SLASH=never PATH_PREFIX=/prefix node scripts/deploy-and-run/netlify.mjs test:template",
22+
"test:netlify:prefix-never:debug": "cross-env TRAILING_SLASH=never PATH_PREFIX=/prefix node scripts/deploy-and-run/netlify.mjs test:template:debug",
23+
"test": "npm-run-all -c -s test:netlify test:netlify:prefix-never"
2224
},
2325
"dependencies": {
2426
"gatsby": "next",
@@ -29,6 +31,7 @@
2931
"devDependencies": {
3032
"cross-env": "^7.0.3",
3133
"cypress": "^12.14.0",
34+
"dotenv": "^8.6.0",
3235
"gatsby-cypress": "^3.11.0",
3336
"netlify-cli": "^15.8.0",
3437
"npm-run-all": "^4.1.5",

‎e2e-tests/adapters/scripts/deploy-and-run/netlify.mjs

+35-22
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,23 @@
11
// @ts-check
2-
32
import { execa } from "execa"
43

5-
process.env.NETLIFY_SITE_ID = process.env.E2E_ADAPTERS_NETLIFY_SITE_ID
4+
// only set NETLIFY_SITE_ID from E2E_ADAPTERS_NETLIFY_SITE_ID if it's set
5+
if (process.env.E2E_ADAPTERS_NETLIFY_SITE_ID) {
6+
process.env.NETLIFY_SITE_ID = process.env.E2E_ADAPTERS_NETLIFY_SITE_ID
7+
}
68
process.env.ADAPTER = "netlify"
79

8-
const deployTitle = process.env.CIRCLE_SHA1 || "N/A"
10+
const deployTitle = `${
11+
process.env.CIRCLE_SHA1 || "N/A commit"
12+
} - trailingSlash:${process.env.TRAILING_SLASH || `always`} / pathPrefix:${
13+
process.env.PATH_PREFIX || `-`
14+
}`
915

1016
const npmScriptToRun = process.argv[2] || "test:netlify"
1117

18+
// ensure clean build
19+
await execa(`npm`, [`run`, `clean`], { stdio: `inherit` })
20+
1221
const deployResults = await execa(
1322
"ntl",
1423
["deploy", "--build", "--json", "--message", deployTitle],
@@ -30,28 +39,32 @@ if (deployResults.exitCode !== 0) {
3039

3140
const deployInfo = JSON.parse(deployResults.stdout)
3241

33-
process.env.DEPLOY_URL = deployInfo.deploy_url
42+
const deployUrl = deployInfo.deploy_url + (process.env.PATH_PREFIX ?? ``)
43+
process.env.DEPLOY_URL = deployUrl
3444

35-
console.log(`Deployed to ${deployInfo.deploy_url}`)
45+
console.log(`Deployed to ${deployUrl}`)
3646

3747
try {
3848
await execa(`npm`, [`run`, npmScriptToRun], { stdio: `inherit` })
3949
} finally {
40-
// if (!process.env.GATSBY_TEST_SKIP_CLEANUP) {
41-
// console.log(`Deleting project with deploy_id ${deployInfo.deploy_id}`)
42-
// const deleteResponse = await execa("ntl", [
43-
// "api",
44-
// "deleteDeploy",
45-
// "--data",
46-
// `{ "deploy_id": "${deployInfo.deploy_id}" }`,
47-
// ])
48-
// if (deleteResponse.exitCode !== 0) {
49-
// throw new Error(
50-
// `Failed to delete project ${deleteResponse.stdout} ${deleteResponse.stderr} (${deleteResponse.exitCode})`
51-
// )
52-
// }
53-
// console.log(
54-
// `Successfully deleted project with deploy_id ${deployInfo.deploy_id}`
55-
// )
56-
// }
50+
if (!process.env.GATSBY_TEST_SKIP_CLEANUP) {
51+
console.log(`Deleting project with deploy_id ${deployInfo.deploy_id}`)
52+
53+
const deleteResponse = await execa("ntl", [
54+
"api",
55+
"deleteDeploy",
56+
"--data",
57+
`{ "deploy_id": "${deployInfo.deploy_id}" }`,
58+
])
59+
60+
if (deleteResponse.exitCode !== 0) {
61+
throw new Error(
62+
`Failed to delete project ${deleteResponse.stdout} ${deleteResponse.stderr} (${deleteResponse.exitCode})`
63+
)
64+
}
65+
66+
console.log(
67+
`Successfully deleted project with deploy_id ${deployInfo.deploy_id}`
68+
)
69+
}
5770
}

‎e2e-tests/adapters/src/pages/404.jsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,10 @@ const paragraphStyles = {
1717
marginBottom: 48,
1818
}
1919

20-
2120
const NotFoundPage = () => {
2221
return (
2322
<main style={pageStyles}>
24-
<h1 style={headingStyles}>Page not found</h1>
23+
<h1 style={headingStyles}>Page not found (custom)</h1>
2524
<p style={paragraphStyles}>
2625
Sorry 😔, we couldn’t find what you were looking for.
2726
<br />

0 commit comments

Comments
 (0)