Gatsby: Create root domain redirect using gatsby-plugin-netlify

[janosh]

Can I use gatsby-plugin-netlify to implement Netlify's advice of redirecting my Netlify subdomain to my custom root domain?

If for SEO reasons you want to redirect your default Netlify subdomain to the primary domain, you can do so by adding the following rules to a _redirects file in the root of your site folder.

Redirect default Netlify subdomain to primary domain

https://mycustomdomain.netlify.com/* https://mycustomdomain.com/:splat 301!

I naively deployed the following changes to gatsby-node.js after installing and adding gatsby-plugin-netlify to my gatsby-config.js but they don't seem to take any effect.

exports.createPages = ({ graphql, actions }) => {
  const { createPage, createRedirect } = actions

  createRedirect({
    fromPath: `https://mycustomdomain.netlify.com/*`,
    toPath: `https://mycustomdomain.com/:splat`,
    isPermanent: true,
  })
  ...
}

[krismorf]

You can edit directly your netlify.toml file:

[[redirects]]
  from = "https://mycustomdomain.netlify.com/*"
  to = "https://mycustomdomain.com/:splat"
  force = true

[janosh]

@kmorf I tried that. Doesn't seem to be working. Did I do something wrong? Here's the repo.

// netlify.toml at root of repo
[[redirects]]
  from = "https://studenten-bilden-schueler.netlify.com/*"
  to = "https://studenten-bilden-schueler.de/:splat"
  status = 200
  force = true

[krismorf]

You want a 301 status code, so remove the status = 200 line since 301 is the default.

[janosh]

I tried that. Still not working, unfortunately.

One other question. Since gatsby-plugin-netlify and netlify.toml both handle redirects (and the latter apparently in even more cases) when should I prefer one over the other if both get the job done?

[krismorf]

Your redirect is working!
(Clear application storage from devtools and shift + cmd + R).

In regards to your question, as far as I understand gatsby-plugin-netlify adds the headers and redirects but doesn't let you modify the file, since it's added in your public folder. netlify.toml allows you to set you configuration environment (even overwriting settings you have set up in your Netlify app.)

[janosh]

(Clear application storage from devtools and shift + cmd + R).

Ah, I tried shift + cmd + R multiple times before reporting back but didn't think to clear app storage. That did the trick. Thanks a lot for your help!

[RobertWSaunders]

@kmorf I am looking into this as well, using createRedirect is there a way to force the redirect? I have the following:

exports.createPages = ({ actions }) => {

  const { createRedirect } = actions;

  createRedirect({ fromPath: "https://qhacks.ca/*", toPath: "https://qhacks.io/:splat", isPermanent: true });
  createRedirect({ fromPath: "https://qhacks-website.netlify.com/*", toPath: "https://qhacks.io/:splat", isPermanent: true });
};

But the output I get is:

https://qhacks.ca/*  https://qhacks.io/:splat  301
https://qhacks-website.netlify.com/*  https://qhacks.io/:splat  301

Does having 301 and not 301! matter?

[RobertWSaunders]

Just by looking at the code here: https://github.com/gatsbyjs/gatsby/blob/f502b26d58331392290514aef9f5972f112658fe/packages/gatsby-plugin-netlify/src/create-redirects.js#L17-L32

It appears overriding any existing content in the path with force isn't supported. I'll make a pull request to add it in.

[krismorf]

@RobertWSaunders I found it easier to handle redirects by editing my netlify.toml file.

Can you check that your rules are passed in a _redirects file in your public folder after building? I couldn't so I thought something must be wrong with the Docs. I only see a _headers file in my public folder.

gatsby-plugin-netlify: Automatically generates a _headers file and a _redirects file at the root of the public folder to configure HTTP headers and redirects on Netlify.

https://www.gatsbyjs.org/docs/actions/#createRedirect
https://www.gatsbyjs.org/packages/gatsby-plugin-netlify/#redirects

[RobertWSaunders]

Yeah using createRedirects works for me, it just didn't force the status by adding an exclamation mark. I added a couple of lines to my gatsby-node.js file to create the redirects file on the fly. I made this PR to add the force redirect status. https://github.com/gatsbyjs/gatsby/pull/8521