feat(gatsby): trailingSlash config option

.circleci/config.yml

@@ -467,6 +467,19 @@ jobs:
       - store_test_results:
           path: e2e-tests/contentful/cypress/results
 
+  e2e_tests_trailing-slash:
+    <<: *e2e-executor
+    environment:
+      <<: *e2e-executor-env
+      CYPRESS_PROJECT_ID: ofxgw8
+      CYPRESS_RECORD_KEY: 29c32742-6b85-40e0-9b45-a4c722749d52
+    steps:
+      - e2e-test:
+          test_path: e2e-tests/trailing-slash
+          test_command: yarn test
+      - store_test_results:
+          path: e2e-tests/trailing-slash/cypress/results
+
   starters_validate:
     executor: node
     steps:
@@ -669,6 +682,8 @@ workflows:
           <<: *e2e-test-workflow
       - e2e_tests_contentful:
           <<: *e2e-test-workflow
+      - e2e_tests_trailing-slash:
+          <<: *e2e-test-workflow
       - e2e_tests_development_runtime:
           <<: *e2e-test-workflow
       - e2e_tests_production_runtime:

.eslintrc.js

@@ -38,6 +38,7 @@ module.exports = {
     __ASSET_PREFIX__: true,
     _CFLAGS_: true,
     __GATSBY: true,
+    __TRAILING_SLASH__: true,
   },
   rules: {
     "@babel/no-unused-expressions": [

docs/docs/reference/config-files/gatsby-config.md

@@ -42,13 +42,16 @@ module.exports = {
 Options available to set within `gatsby-config.js` include:
 
 1. [siteMetadata](#sitemetadata) (object)
-2. [plugins](#plugins) (array)
-3. [flags](#flags) (object)
-4. [pathPrefix](#pathprefix) (string)
-5. [polyfill](#polyfill) (boolean)
-6. [mapping](#mapping-node-types) (object)
-7. [proxy](#proxy) (object)
-8. [developMiddleware](#advanced-proxying-with-developmiddleware) (function)
+1. [plugins](#plugins) (array)
+1. [flags](#flags) (object)
+1. [pathPrefix](#pathprefix) (string)
+1. [trailingSlash](#trailingslash) (string)
+1. [polyfill](#polyfill) (boolean)
+1. [mapping](#mapping-node-types) (object)
+1. [proxy](#proxy) (object)
+1. [developMiddleware](#advanced-proxying-with-developmiddleware) (function)
+1. [jsxRuntime](#jsxruntime) (string)
+1. [jsxImportSource](#jsximportsource) (string)
 
 ## siteMetadata
 
@@ -68,7 +71,7 @@ This way you can store it in one place, and pull it whenever you need it. If you
 
 See a full description and sample usage in [Gatsby.js Tutorial Part Four](/docs/tutorial/part-4/#data-in-gatsby).
 
-## Plugins
+## plugins
 
 Plugins are Node.js packages that implement Gatsby APIs. The config file accepts an array of plugins. Some plugins may need only to be listed by name, while others may take options (see the docs for individual plugins).
 
@@ -135,7 +138,7 @@ module.exports = {
 
 See more about [Plugins](/docs/plugins/) for more on utilizing plugins, and to see available official and community plugins.
 
-## Flags
+## flags
 
 Flags let sites enable experimental or upcoming changes that are still in testing or waiting for the next major release.
 
@@ -161,7 +164,17 @@ module.exports = {
 
 See more about [Adding a Path Prefix](/docs/how-to/previews-deploys-hosting/path-prefix/).
 
-## Polyfill
+## trailingSlash
+
+Configures the creation of URLs and whether to remove, append, or ignore trailing slashes.
+
+- `always`: Always add trailing slashes to each URL, e.g. `/x` to `/x/`.
+- `never`: Remove all trailing slashes on each URL, e.g. `/x/` to `/x`.
+- `ignore`: Don't automatically modify the URL
+
+Until Gatsby v4 it'll be set to `legacy` by default, in Gatsby v5 the default mode will be `always`. Gatsby Cloud automatically handles and supports the `trailingSlash` option, any other hosting provider (or if you're managing this on your own) should follow the "Redirects, and expected behavior from the hosting provider" section on the [initial RFC](https://github.com/gatsbyjs/gatsby/discussions/34205).
+
+## polyfill
 
 Gatsby uses the ES6 Promise API. Because some browsers don't support this, Gatsby includes a Promise polyfill by default.
 

e2e-tests/trailing-slash/.gitignore

@@ -0,0 +1,13 @@
+# Project dependencies
+.cache
+node_modules
+yarn-error.log
+
+# Build assets
+/public
+.DS_Store
+/assets
+
+# Cypress output
+cypress/videos/
+cypress/screenshots/

e2e-tests/trailing-slash/README.md

@@ -0,0 +1,15 @@
+# trailing-slash E2E Test
+
+This Cypress suite tests the `trailingSlash` option inside `gatsby-config` and its various different settings it takes. When you want to work on it, start watching packages inside the `packages` and start `gatsby-dev-cli` in this E2E test suite.
+
+Locally you can run for development:
+
+```shell
+TRAILING_SLASH=your-option yarn debug:develop
+```
+
+And for a build + serve:
+
+```shell
+TRAILING_SLASH=your-option yarn build && yarn debug:build
+```

e2e-tests/trailing-slash/cypress.json

@@ -0,0 +1,4 @@
+{
+  "videoUploadOnPasses": false,
+  "chromeWebSecurity": false
+}

e2e-tests/trailing-slash/cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

e2e-tests/trailing-slash/cypress/integration/always.js

@@ -0,0 +1,144 @@
+describe(`always`, () => {
+  beforeEach(() => {
+    cy.visit(`/`).waitForRouteChange()
+  })
+  it(`page-creator without slash`, () => {
+    cy.getTestElement(`page-creator-without`).click()
+    cy.waitForRouteChange().assertRoute(`/page-2/`)
+  })
+  it(`page-creator with slash`, () => {
+    cy.getTestElement(`page-creator-with`).click()
+    cy.waitForRouteChange().assertRoute(`/page-2/`)
+  })
+  it(`create-page with slash`, () => {
+    cy.getTestElement(`create-page-with`).click()
+    cy.waitForRouteChange().assertRoute(`/create-page/with/`)
+  })
+  it(`create-page without slash`, () => {
+    cy.getTestElement(`create-page-without`).click()
+    cy.waitForRouteChange().assertRoute(`/create-page/without/`)
+  })
+  it(`fs-api with slash`, () => {
+    cy.getTestElement(`fs-api-with`).click()
+    cy.waitForRouteChange().assertRoute(`/fs-api/with/`)
+  })
+  it(`fs-api without slash`, () => {
+    cy.getTestElement(`fs-api-without`).click()
+    cy.waitForRouteChange().assertRoute(`/fs-api/without/`)
+  })
+  it(`fs-api-simple with slash`, () => {
+    cy.getTestElement(`fs-api-simple-with`).click()
+    cy.waitForRouteChange().assertRoute(`/fs-api-simple/with/`)
+  })
+  it(`fs-api-simple without slash`, () => {
+    cy.getTestElement(`fs-api-simple-without`).click()
+    cy.waitForRouteChange().assertRoute(`/fs-api-simple/without/`)
+  })
+  it(`gatsbyPath works`, () => {
+    cy.getTestElement(`gatsby-path-1`).should(
+      "have.attr",
+      "href",
+      "/fs-api-simple/with/"
+    )
+    cy.getTestElement(`gatsby-path-2`).should(
+      "have.attr",
+      "href",
+      "/fs-api-simple/without/"
+    )
+  })
+  it(`hash`, () => {
+    cy.getTestElement(`hash`).click()
+    cy.waitForRouteChange().assertRoute(`/page-2/#anchor`)
+  })
+  it(`hash trailing`, () => {
+    cy.getTestElement(`hash-trailing`).click()
+    cy.waitForRouteChange().assertRoute(`/page-2/#anchor`)
+  })
+  it(`query-param`, () => {
+    cy.getTestElement(`query-param`).click()
+    cy.waitForRouteChange().assertRoute(`/page-2/?query_param=hello`)
+  })
+  it(`query-param-hash`, () => {
+    cy.getTestElement(`query-param-hash`).click()
+    cy.waitForRouteChange().assertRoute(`/page-2/?query_param=hello#anchor`)
+  })
+  it(`client-only-simple without slash`, () => {
+    cy.getTestElement(`client-only-simple-without`).click()
+    cy.waitForRouteChange().assertRoute(`/client-only/without/`)
+    cy.getTestElement(`title`).should(`have.text`, `without`)
+  })
+  it(`client-only-simple with slash`, () => {
+    cy.getTestElement(`client-only-simple-with`).click()
+    cy.waitForRouteChange().assertRoute(`/client-only/with/`)
+    cy.getTestElement(`title`).should(`have.text`, `with`)
+  })
+  it(`client-only without slash`, () => {
+    cy.getTestElement(`client-only-without`).click()
+    cy.waitForRouteChange().assertRoute(`/fs-api/without/without/`)
+    cy.getTestElement(`title`).should(`have.text`, `without`)
+  })
+  it(`client-only with slash`, () => {
+    cy.getTestElement(`client-only-with`).click()
+    cy.waitForRouteChange().assertRoute(`/fs-api/with/with/`)
+    cy.getTestElement(`title`).should(`have.text`, `with`)
+  })
+})
+
+describe(`always (direct visits)`, () => {
+  beforeEach(() => {
+    cy.visit(`/`).waitForRouteChange()
+  })
+  it(`page-creator`, () => {
+    cy.visit(`/page-2`).waitForRouteChange().assertRoute(`/page-2/`)
+  })
+  it(`create-page with`, () => {
+    cy.visit(`/create-page/with/`)
+      .waitForRouteChange()
+      .assertRoute(`/create-page/with/`)
+  })
+  it(`create-page without`, () => {
+    cy.visit(`/create-page/without`)
+      .waitForRouteChange()
+      .assertRoute(`/create-page/without/`)
+  })
+  it(`fs-api-simple with`, () => {
+    cy.visit(`/fs-api-simple/with/`)
+      .waitForRouteChange()
+      .assertRoute(`/fs-api-simple/with/`)
+  })
+  it(`fs-api-simple without`, () => {
+    cy.visit(`/fs-api-simple/without`)
+      .waitForRouteChange()
+      .assertRoute(`/fs-api-simple/without/`)
+  })
+  it(`client-only-simple with`, () => {
+    cy.visit(`/client-only/with/`)
+      .waitForRouteChange()
+      .assertRoute(`/client-only/with/`)
+  })
+  it(`client-only-simple without`, () => {
+    cy.visit(`/client-only/without`)
+      .waitForRouteChange()
+      .assertRoute(`/client-only/without/`)
+  })
+  it(`client-only with`, () => {
+    cy.visit(`/fs-api/with/with/`)
+      .waitForRouteChange()
+      .assertRoute(`/fs-api/with/with/`)
+  })
+  it(`client-only without`, () => {
+    cy.visit(`/fs-api/without/without`)
+      .waitForRouteChange()
+      .assertRoute(`/fs-api/without/without/`)
+  })
+  it(`query-param-hash with`, () => {
+    cy.visit(`/page-2/?query_param=hello#anchor`)
+      .waitForRouteChange()
+      .assertRoute(`/page-2/?query_param=hello#anchor`)
+  })
+  it(`query-param-hash without`, () => {
+    cy.visit(`/page-2?query_param=hello#anchor`)
+      .waitForRouteChange()
+      .assertRoute(`/page-2/?query_param=hello#anchor`)
+  })
+})