From 01a61c903a7d7075153f56c6176e7821815591aa Mon Sep 17 00:00:00 2001 From: pieh Date: Mon, 25 Jul 2022 15:19:07 +0200 Subject: [PATCH 1/3] test --- .../cypress/integration/navigate.js | 10 +++ .../cypress/integration/path-prefix.js | 69 ++++++++++++------- e2e-tests/path-prefix/package.json | 8 +-- e2e-tests/path-prefix/scripts/serve.js | 19 +---- e2e-tests/path-prefix/src/pages/index.js | 9 +++ e2e-tests/path-prefix/src/pages/ssr.js | 25 +++++++ 6 files changed, 97 insertions(+), 43 deletions(-) create mode 100644 e2e-tests/path-prefix/src/pages/ssr.js diff --git a/e2e-tests/path-prefix/cypress/integration/navigate.js b/e2e-tests/path-prefix/cypress/integration/navigate.js index c7bb2d59787c4..92f32673c1e72 100644 --- a/e2e-tests/path-prefix/cypress/integration/navigate.js +++ b/e2e-tests/path-prefix/cypress/integration/navigate.js @@ -58,6 +58,16 @@ describe(`navigate`, () => { .location(`pathname`) .should(`eq`, `${pathPrefix}/subdirectory/page-2`) }) + + it(`can navigate to SSR page`, () => { + cy.getTestElement(`page-ssr-button-link`) + .click() + .waitForRouteChange() + .location(`pathname`) + .should(`eq`, withTrailingSlash(`${pathPrefix}/ssr`)) + + cy.getTestElement(`server-data`).contains(`foo`) + }) }) it(`can navigate to 404`, () => { diff --git a/e2e-tests/path-prefix/cypress/integration/path-prefix.js b/e2e-tests/path-prefix/cypress/integration/path-prefix.js index b0ae7ef7f11ac..690a1008bbb56 100644 --- a/e2e-tests/path-prefix/cypress/integration/path-prefix.js +++ b/e2e-tests/path-prefix/cypress/integration/path-prefix.js @@ -3,39 +3,43 @@ const { pathPrefix } = require(`../../gatsby-config`) const withTrailingSlash = url => `${url}/` describe(`Production pathPrefix`, () => { - beforeEach(() => { - cy.visit(`/`).waitForRouteChange() - }) + describe(`navigation`, () => { + beforeEach(() => { + cy.visit(`/`).waitForRouteChange() + }) - it(`returns 200 on base route`, () => { - cy.location(`pathname`).should(`eq`, withTrailingSlash(pathPrefix)) - }) + it(`returns 200 on base route`, () => { + cy.location(`pathname`).should(`eq`, withTrailingSlash(pathPrefix)) + }) - it(`renders static image`, () => { - cy.getTestElement(`static-image`) - .should(`have.attr`, `srcset`) - .and(srcset => { - srcset.split(/\s*,\s*/).forEach(part => { - expect(part).to.contain(`/blog`) + it(`renders static image`, () => { + cy.getTestElement(`static-image`) + .should(`have.attr`, `srcset`) + .and(srcset => { + srcset.split(/\s*,\s*/).forEach(part => { + expect(part).to.contain(`/blog`) + }) }) - }) - }) + }) - it(`renders dynamic image`, () => { - cy.getTestElement(`gatsby-image`) - .should(`have.attr`, `srcset`) - .and(srcset => { - srcset.split(/\s*,\s*/).forEach(part => { - expect(part).to.contain(`/blog`) + it(`renders dynamic image`, () => { + cy.getTestElement(`gatsby-image`) + .should(`have.attr`, `srcset`) + .and(srcset => { + srcset.split(/\s*,\s*/).forEach(part => { + expect(part).to.contain(`/blog`) + }) }) - }) - }) + }) - describe(`navigation`, () => { it(`prefixes link with /blog`, () => { cy.getTestElement(`page-2-link`) .should(`have.attr`, `href`) .and(`include`, `/blog`) + + cy.getTestElement(`page-ssr-link`) + .should(`have.attr`, `href`) + .and(`include`, `/blog`) }) it(`can navigate to secondary page`, () => { @@ -73,5 +77,24 @@ describe(`Production pathPrefix`, () => { withTrailingSlash(`${pathPrefix}/blogtest`) ) }) + + it(`can navigate to ssr page`, () => { + cy.getTestElement(`page-ssr-link`).click() + + cy.location(`pathname`).should( + `eq`, + withTrailingSlash(`${pathPrefix}/ssr`) + ) + + cy.getTestElement(`server-data`).contains(`foo`) + }) + }) + + it(`can visit ssr page`, () => { + cy.visit(`/ssr/`).waitForRouteChange() + + cy.location(`pathname`).should(`eq`, withTrailingSlash(`${pathPrefix}/ssr`)) + + cy.getTestElement(`server-data`).contains(`foo`) }) }) diff --git a/e2e-tests/path-prefix/package.json b/e2e-tests/path-prefix/package.json index 45a09bd94c189..7f738c1d23a3f 100644 --- a/e2e-tests/path-prefix/package.json +++ b/e2e-tests/path-prefix/package.json @@ -15,6 +15,7 @@ "gatsby-plugin-sitemap": "next", "gatsby-source-filesystem": "next", "gatsby-transformer-sharp": "next", + "http-proxy": "^1.18.1", "react": "^17.0.2", "react-dom": "^17.0.2", "react-helmet": "^5.2.0" @@ -25,11 +26,11 @@ "license": "MIT", "scripts": { "prebuild": "del-cli -f assets && make-dir assets/blog", - "build": "gatsby build --prefix-paths", + "build": "cross-env CYPRESS_SUPPORT=y gatsby build --prefix-paths", "postbuild": "cpy --cwd=./public --parents '**/*' '../assets/blog'", "develop": "gatsby develop", "format": "prettier --write '**/*.js'", - "test": "cross-env CYPRESS_SUPPORT=y npm run build && npm run start-server-and-test", + "test": "npm run build && npm run start-server-and-test", "start-server-and-test": "start-server-and-test serve \"http://localhost:9000/blog/|http://localhost:9001/blog/\" cy:run", "serve": "npm-run-all --parallel serve:*", "serve:site": "gatsby serve --prefix-paths", @@ -46,11 +47,10 @@ "make-dir-cli": "^2.0.0", "npm-run-all": "^4.1.5", "prettier": "2.0.4", - "serve-handler": "^6.0.0", "start-server-and-test": "^1.7.1" }, "repository": { "type": "git", "url": "https://github.com/gatsbyjs/gatsby-starter-default" } -} \ No newline at end of file +} diff --git a/e2e-tests/path-prefix/scripts/serve.js b/e2e-tests/path-prefix/scripts/serve.js index 62eef37e84e71..202add85a70fd 100644 --- a/e2e-tests/path-prefix/scripts/serve.js +++ b/e2e-tests/path-prefix/scripts/serve.js @@ -1,22 +1,9 @@ -const handler = require(`serve-handler`) const http = require(`http`) -const path = require(`path`) +const httpProxy = require("http-proxy") +const proxy = httpProxy.createProxyServer() const server = http.createServer((request, response) => - handler(request, response, { - public: path.resolve(`assets`), - headers: [ - { - source: `**/*`, - headers: [ - { - key: `Access-Control-Allow-Origin`, - value: `*`, - }, - ], - }, - ], - }) + proxy.web(request, response, { target: "http://localhost:9000" }) ) server.listen(9001, () => { diff --git a/e2e-tests/path-prefix/src/pages/index.js b/e2e-tests/path-prefix/src/pages/index.js index f5bb4b74b3565..7961c85849f1f 100644 --- a/e2e-tests/path-prefix/src/pages/index.js +++ b/e2e-tests/path-prefix/src/pages/index.js @@ -40,6 +40,15 @@ const IndexPage = ({ data }) => { Go to subdirectory + + Go to SSR page + + ) } diff --git a/e2e-tests/path-prefix/src/pages/ssr.js b/e2e-tests/path-prefix/src/pages/ssr.js new file mode 100644 index 0000000000000..89c0f41dad72a --- /dev/null +++ b/e2e-tests/path-prefix/src/pages/ssr.js @@ -0,0 +1,25 @@ +import * as React from "react" +import { Link } from "gatsby" + +import Layout from "../components/layout" + +const SSRPage = ({ serverData }) => ( + +

Hi from the SSR page

+

Welcome to SSR page

+ + Go back to the homepage + + {serverData?.dataFromServer} + +) + +export default SSRPage + +export function getServerData() { + return { + props: { + dataFromServer: `foo`, + }, + } +} From 1de72ed9275170dff964ebe359f0365e8524f275 Mon Sep 17 00:00:00 2001 From: pieh Date: Mon, 25 Jul 2022 15:50:00 +0200 Subject: [PATCH 2/3] wait with proxy until serve is up --- e2e-tests/path-prefix/package.json | 3 ++- e2e-tests/path-prefix/scripts/serve.js | 27 +++++++++++++++++++------- 2 files changed, 22 insertions(+), 8 deletions(-) diff --git a/e2e-tests/path-prefix/package.json b/e2e-tests/path-prefix/package.json index 7f738c1d23a3f..da5d85ebae653 100644 --- a/e2e-tests/path-prefix/package.json +++ b/e2e-tests/path-prefix/package.json @@ -47,7 +47,8 @@ "make-dir-cli": "^2.0.0", "npm-run-all": "^4.1.5", "prettier": "2.0.4", - "start-server-and-test": "^1.7.1" + "start-server-and-test": "^1.7.1", + "wait-on": "^6.0.0" }, "repository": { "type": "git", diff --git a/e2e-tests/path-prefix/scripts/serve.js b/e2e-tests/path-prefix/scripts/serve.js index 202add85a70fd..ddfa92cf6e1c5 100644 --- a/e2e-tests/path-prefix/scripts/serve.js +++ b/e2e-tests/path-prefix/scripts/serve.js @@ -1,11 +1,24 @@ const http = require(`http`) const httpProxy = require("http-proxy") +const waitOn = require("wait-on") -const proxy = httpProxy.createProxyServer() -const server = http.createServer((request, response) => - proxy.web(request, response, { target: "http://localhost:9000" }) -) +waitOn( + { + resources: [`http://localhost:9000/blog/`], + }, + function (err) { + if (err) { + console.error(err) + process.exit(1) + } + + const proxy = httpProxy.createProxyServer() + const server = http.createServer((request, response) => + proxy.web(request, response, { target: "http://localhost:9000" }) + ) -server.listen(9001, () => { - console.log(`Running at http://localhost:9001`) -}) + server.listen(9001, () => { + console.log(`Assets server running at http://localhost:9001`) + }) + } +) From 0d555594f21d446a5e7a6d8b4720ccbf40c84481 Mon Sep 17 00:00:00 2001 From: pieh Date: Mon, 25 Jul 2022 16:09:21 +0200 Subject: [PATCH 3/3] fix(gatsby): use pathPrefix for SSR/DSG page-data requests with gatsby serve --- packages/gatsby/src/commands/serve.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/gatsby/src/commands/serve.ts b/packages/gatsby/src/commands/serve.ts index af5bae64a9790..8daeb0c3ed6fb 100644 --- a/packages/gatsby/src/commands/serve.ts +++ b/packages/gatsby/src/commands/serve.ts @@ -202,7 +202,7 @@ module.exports = async (program: IServeProgram): Promise => { dbPath: path.join(program.directory, `.cache`, `data`, `datastore`), }) - app.get( + router.get( `/page-data/:pagePath(*)/page-data.json`, async (req, res, next) => { const requestedPagePath = req.params.pagePath