Gatsby: Force trailing slash

[bogdancss]

Hey,

I know there's a plugin to remove trailing slashes from urls - but I need to force trailing slashes - can anyone please give me any pointers on this?

[KyleAMathews]

Check out the source for that plugin. Perhaps just do the opposite of what it does? Would be a great plugin to have!

[bogdancss]

I guess what I am looking for has nothing to do with Gatsby - I want to force a redirect for all urls with no trailing slash to the one with:

somewebsite.com/about -> somewebsite.com/about/

I was trying to look at Netlify for this - but toggling pretty urls doesn't do the trick

[BayPhillips]

I'm actually looking for this right now because it looks like Github Pages redirects routes with no trailing slashes that are hitting directories. It's messing up SEO a bit so I'll take a stab at this.

[BayPhillips]

Ended up throwing this together, I think it works: https://github.com/BayPhillips/gatsby-plugin-force-trailing-slashes

@b0gd4n what you're asking for sounds like a rewrite rule, usually something thrown into a .htaccess file.

[bogdancss]

@BayPhillips I've installed your plugin and it seems to be working, however it does not solve my redirect issues. Unfortunately, Netlify does not support htaccess files and it's _redirects file does not seem to be able to force trailing slashes.

[bogdancss]

@BayPhillips scratch that - after adding the plugin at the end of my gatsby-config, building fails in gatsby-node. Commenting out gatsby-plugin-force-trailing-slashes in the config works just fine. Here's the error:

```ypeError: Cannot read property 'createPage' of undefined

• gatsby-node.js:10 Object.exports.onCreatePage
  [kaizen-2018]/[gatsby-plugin-force-trailing-sl ashes]/gatsby-node.js:10:28

• api-runner-node.js:110 runAPI
  [kaizen-2018]/[gatsby]/dist/utils/api-runner-n ode.js:110:36

• api-runner-node.js:187
  [kaizen-2018]/[gatsby]/dist/utils/api-runner-n ode.js:187:33

• map.js:27
  [kaizen-2018]/[async]/internal/map.js:27:9

• eachOfLimit.js:66 replenish
  [kaizen-2018]/[async]/internal/eachOfLimit.js: 66:17

• eachOfLimit.js:50 iterateeCallback
  [kaizen-2018]/[async]/internal/eachOfLimit.js: 50:17

• onlyOnce.js:12
  [kaizen-2018]/[async]/internal/onlyOnce.js:12: 16

• map.js:29
  [kaizen-2018]/[async]/internal/map.js:29:13

• util.js:16 tryCatcher
  [kaizen-2018]/[bluebird]/js/release/util.js:16 :23

• nodeify.js:23 Promise.successAdapter
  [kaizen-2018]/[bluebird]/js/release/nodeify.js :23:30

• promise.js:566 Promise._settlePromise
  [kaizen-2018]/[bluebird]/js/release/promise.js :566:21

• promise.js:606 Promise._settlePromiseCtx
  [kaizen-2018]/[bluebird]/js/release/promise.js :606:10

• async.js:138 Async._drainQueue
  [kaizen-2018]/[bluebird]/js/release/async.js:1 38:12

• async.js:143 Async._drainQueues
  [kaizen-2018]/[bluebird]/js/release/async.js:1 43:10

• async.js:17 Immediate.Async.drainQueues [as _o nImmediate]

[BayPhillips]

@b0gd4n what's the actual error? I ran into a similar issue too with my implementation of the plugin (it's live for me), and it was due to the fact that I was calling createPage on the same path multiple times. In the past, it seems it must have just been overwriting the generated page the second time. Once I removed that redundancy, everything worked fine.

If it's actually an intended behavior for Gatsby's page generation to allow overwriting, then there is probably some case we're not handling properly in the plugin. Nothing a PR couldn't fix :)

[bogdancss]

@BayPhillips TypeError: Cannot read property 'createPage' of undefined

This is happening in the gatsby-node file which creates a bunch of blog pages from Wordpress:

```
exports.createPages = ({ graphql, boundActionCreators }) => {
const { createPage } = boundActionCreators
...

[ben-rogerson]

@BayPhillips It's happening here too > same error

[BayPhillips]

@ben-rogerson got any more information? Any source code available? Which version of Gatsby are you using this on?

[jan-dh]

Had the same issue as @ben-rogerson . Don't really understand why there's a plugin, since the urls are still being generated in the gatsby-node.js file. I added the trailingSlash:false option in the createFilePath function. This is my setup now:

exports.onCreateNode = ({ node, actions, getNode }) => {
  const { createNodeField } = actions

  if (node.internal.type === `MarkdownRemark`) {
    const value = createFilePath({ node, getNode, trailingSlash: false })
    createNodeField({
      name: `slug`,
      node,
      value,
    })
  }
}

This combined with a siteUrl in my gatsby-config.js seems to do the trick, even without the plugin.

[BayPhillips]

@jan-dh similar to the above, are you able to provide more information? I'm using the plugin on the latest v2 beta and haven't used it on V1. Perhaps that's what's causing the issue?

[jan-dh]

These are my dependencies, I'm on Gatsby v2 as well

"dependencies": {
    "babel-plugin-tailwind": "^0.1.10",
    "gatsby": "^2.0.0-beta.59",
    "gatsby-plugin-feed": "^2.0.0-beta.4",
    "gatsby-plugin-google-analytics": "^2.0.0-beta.3",
    "gatsby-plugin-google-fonts": "0.0.4",
    "gatsby-plugin-offline": "^2.0.0-beta.5",
    "gatsby-plugin-react-helmet": "^3.0.0-beta.4",
    "gatsby-plugin-robots-txt": "^1.2.0",
    "gatsby-plugin-sharp": "^2.0.0-beta.7",
    "gatsby-plugin-sitemap": "^1.2.25",
    "gatsby-plugin-typography": "^2.2.0-beta.3",
    "gatsby-remark-copy-linked-files": "^2.0.0-beta.3",
    "gatsby-remark-external-links": "0.0.4",
    "gatsby-remark-images": "^2.0.1-beta.9",
    "gatsby-remark-prismjs": "^3.0.0-beta.4",
    "gatsby-remark-responsive-iframe": "^2.0.0-beta.3",
    "gatsby-remark-smartypants": "^2.0.0-beta.3",
    "gatsby-source-filesystem": "^2.0.1-beta.10",
    "gatsby-transformer-remark": "^2.1.1-beta.4",
    "gatsby-transformer-sharp": "^2.1.1-beta.6",
    "lodash": "^4.17.5",
    "postcss": "^6.0.22",
    "postcss-cli": "^5.0.0",
    "prismjs": "^1.15.0",
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "react-emotion": "^9.2.6",
    "react-helmet": "^5.2.0",
    "react-typography": "^0.16.13",
    "tailwindcss": "^0.5.3",
    "typography": "^0.16.17",
    "typography-theme-bootstrap": "^0.16.7",
    "typography-theme-fairy-gates": "^0.15.11"
  },
  "devDependencies": {
    "eslint": "^4.19.1",
    "eslint-plugin-react": "^7.7.0",
    "gh-pages": "^1.1.0",
    "prettier": "^1.12.0"
  },

[BayPhillips]

@jan-dh gotcha thank you! And are you aware of any pages you might be calling createPage on multiple times? I too had an issue where I was creating my /blog/ index twice due to some laziness on my part. Also, I'd be curious what page it's dying on (I will generally throw some console.log in these various hooks to see what's up.

[jan-dh]

Sorry, I didn't actually got an error, my issue was that trailing slashes weren't being removed. Seems like maybe a conflict between the trailing plugin and trailingSlash setting?

[centrical]

+1 - running v1 with the same error.

[gatsbot[bot]]

Old issues will be closed after 30 days of inactivity. This issue has been quiet for 20 days and is being marked as stale. Reply here or add the label "not stale" to keep this issue open!

[gatsbot[bot]]

This issue is being closed due to inactivity. Is this a mistake? Please re-open this issue or create a new issue.