|
| 1 | +--- |
| 2 | +title: "Working with Redirects and Rewrites" |
| 3 | +description: "Learn how to leverage redirects, rewrites, and reverse proxies in Gatsby Cloud" |
| 4 | +label: cloud |
| 5 | +--- |
| 6 | + |
| 7 | +## What is a redirect? |
| 8 | + |
| 9 | +Redirects are settings in the network layer that allow you to route traffic from one url path to another with little to no disruption. |
| 10 | + |
| 11 | +For instance, while rebuilding your cooking blog, you might want to move all of your recipes from their old path of blog/recipes to a new path of recipes. To make sure that all the existing links to your recipes still work, you would need a way to redirect your users from blog/recipes/mouthwatering-lasagna to recipes/mouthwatering-lasagna. No one wants to lose access to such a, well, mouthwatering recipe. |
| 12 | + |
| 13 | +## ♻️ How to create redirects in Gatsby Hosting |
| 14 | + |
| 15 | +In order to use redirects, you must include the gatsby-plugin-gatsby-cloud in your project. |
| 16 | + |
| 17 | +If your Gatsby project doesn't already have a gatsby-node.js file, add one at that top level of your project (alongside your gatsby-config.js). |
| 18 | + |
| 19 | +In gatsby-node.js file, you'll want to export the createPages method and use the createRedirects action to generate any redirects that you want to add. Here's an example showing the lasagna recipe above: |
| 20 | + |
| 21 | +```javascript:title=gatsby-node.js |
| 22 | +// gatsby-node.js |
| 23 | +exports.createPages = async ({ graphql, actions }) => { |
| 24 | + const { createRedirect } = actions; |
| 25 | + |
| 26 | + createRedirect({ |
| 27 | + fromPath: `/blog/recipes/mouthwatering-lasagna`, |
| 28 | + toPath: `/recipes/mouthwatering-lasagna`, |
| 29 | + }); |
| 30 | +} |
| 31 | +``` |
| 32 | + |
| 33 | +Once you've made these changes and deployed the changes through Gatsby Cloud, you should be able to test your changes once the CDN cache has been purged. |
| 34 | + |
| 35 | +There are a few extra options that you can add for redirects, so make sure that you checkout the Gatsby Docs for more details. |
| 36 | + |
| 37 | +## 🖥️ Advanced Use Cases |
| 38 | + |
| 39 | +Wildcard Path Redirects |
| 40 | +In our example above, you've explicitly redirected one of your recipe urls, and after adding a few others, you realize that you won't have time to get all the old urls. So you decide that any other url that uses your old path blog/recipes/\* should just be redirected to the new /recipes path. Here's how you'd handle that: |
| 41 | + |
| 42 | +```js:title=gatsby-node.js |
| 43 | +exports.createPages = async ({ graphql, actions }) => { |
| 44 | + const { createRedirect } = actions; |
| 45 | + |
| 46 | + createRedirect({ |
| 47 | + fromPath: `/blog/recipes/mouthwatering-lasagna`, |
| 48 | + toPath: `/recipes/mouthwatering-lasagna`, |
| 49 | + }); |
| 50 | + |
| 51 | + // All your other redirects |
| 52 | + |
| 53 | + createRedirect({ |
| 54 | + fromPath: `/blog/recipes/*`, |
| 55 | + toPath: `/recipes`, |
| 56 | + }); |
| 57 | +} |
| 58 | +``` |
| 59 | + |
| 60 | +### Splat Redirects |
| 61 | + |
| 62 | +Extending our wildcard example above, you may have a high degree confidence that all of your old recipes that lived at /blog/recipes have been migrated to /recipe . In that case, you can use a \* marker in the toPath to indicate that you want the redirect to include everything after the base url. In that case /blog/recipes/any-awesome-url-path would become /recipes/any-awesome-url-path. Here's how you'd handle that: |
| 63 | + |
| 64 | +```js:title=gatsby-node.js |
| 65 | +exports.createPages = async ({ graphql, actions }) => { |
| 66 | + const { createRedirect } = actions; |
| 67 | + |
| 68 | + createRedirect({ |
| 69 | + fromPath: `/blog/recipes/*`, |
| 70 | + toPath: `/recipes/*`, |
| 71 | + }); |
| 72 | +} |
| 73 | +``` |
| 74 | + |
| 75 | +### Country Based Redirects |
| 76 | + |
| 77 | +If your site has multi-national pages, Gatsby provides the ability of redirecting based in the country that the request is made. We use a Two-letter country code based on the regional indicator symbol standard to define the country you might want to redirect. If you would like a certain page redirected to its language equivalent you can use the conditions: { country: ""} key in `createRedirect`. `country` can either be a string or an array of strings. |
| 78 | + |
| 79 | +```js:title=gatsby-node.js |
| 80 | +// gatsby-node.js |
| 81 | +createRedirect({ |
| 82 | + fromPath: `/blog`, |
| 83 | + toPath: `/italian/blog`, |
| 84 | + conditions: { |
| 85 | + country: `it` |
| 86 | + } |
| 87 | +}) |
| 88 | + |
| 89 | +createRedirect({ |
| 90 | + fromPath: `/blog`, |
| 91 | + toPath: `/english/blog`, |
| 92 | + conditions: { |
| 93 | + country: [`us`, `gb`] |
| 94 | + } |
| 95 | +}) |
| 96 | +``` |
| 97 | + |
| 98 | +You can also return status's 404,403,451,500 if you would like to have non redirect pages returned. |
| 99 | +The example below will return a 404 page for all users located in the United States (us). |
| 100 | + |
| 101 | +```js:title=gatsby-node.js |
| 102 | +createRedirect({ |
| 103 | + fromPath: `/*`, |
| 104 | + toPath: `/`, |
| 105 | + statusCode: 404, |
| 106 | + conditions: { |
| 107 | + country: `us` |
| 108 | + } |
| 109 | +}) |
| 110 | +``` |
| 111 | + |
| 112 | +The next example will return 451 page users located in the United States (us) and Canada (ca) from all paths. Essentially, all hits from US and CA will be sent to a 451. |
| 113 | + |
| 114 | +```js:title=gatsby-node.js |
| 115 | +createRedirect({ |
| 116 | + fromPath: `/*`, |
| 117 | + toPath: `/`, |
| 118 | + statusCode: 451, |
| 119 | + conditions: { |
| 120 | + country: [`us`, `ca`], |
| 121 | + } |
| 122 | +}) |
| 123 | +``` |
| 124 | + |
| 125 | +If you have defined a custom status page: 404, 403, 451, 500, that custom page will be rendered and sent to your users. If you haven’t defined a custom status page, Gatsby Cloud will return a generic status page. Only if you give `createRedirect` a redirect statusCode: 3XX will it return a redirect to the user. |
| 126 | + |
| 127 | +## Query Param redirects |
| 128 | + |
| 129 | +Query params allows you to further control URL matches. For example, /param?id=7redirects to /gatsby_file.pdf |
| 130 | + |
| 131 | +```js:title=gatsby-node.js |
| 132 | +createRedirect({ |
| 133 | + fromPath: `/param?id=7`, |
| 134 | + toPath: `/gatsby_file.pdf`, |
| 135 | +}) |
| 136 | +``` |
| 137 | + |
| 138 | +A more complex example is described here, where we will redirect from /param?id=idto /param/:id |
| 139 | + |
| 140 | +```js:title=gatsby-node.js |
| 141 | +createRedirect({ |
| 142 | + fromPath: `/param?id=:id`, |
| 143 | + toPath: `/param/:id`, |
| 144 | +}) |
| 145 | +``` |
| 146 | + |
| 147 | +### Language based redirects |
| 148 | + |
| 149 | +Language based redirects use the Accept-Language header in a request to match a route and perform a redirect. This allows you to redirect your site to the site that will match your user's language. We use the Two-letter code identifier defined by ISO 639-1. The example below will redirect users with en Accept-Language header to /en/book_list and users with zh to /zh/book_list when they reach out to /book_list |
| 150 | + |
| 151 | +```js:title=gatsby-node.js |
| 152 | +createRedirect({ |
| 153 | + fromPath: `/book_list`, |
| 154 | + toPath: `/en/book_list`, |
| 155 | + conditions: { |
| 156 | + language: [`en`], |
| 157 | + }, |
| 158 | +}) |
| 159 | + |
| 160 | +createRedirect({ |
| 161 | + fromPath: `/book_list/*`, |
| 162 | + toPath: `/zh/book_list/*`, |
| 163 | + conditions: { |
| 164 | + language: [`zh`], |
| 165 | + }, |
| 166 | +}) |
| 167 | +``` |
| 168 | + |
| 169 | +### ☝️Tip: Using a Static File to Manage Redirects |
| 170 | + |
| 171 | +You might want to simplify managing your redirects by using a static file to store redirects. Storing that file in your Gatsby project can simplify your code and make it easier fo other contributors to add more redirects. |
| 172 | + |
| 173 | +At Gatsby, we use a YAML file to store our redirects so that the whole team can easily add new redirects without having to change the gatsby-node file. You could also use a JSON file if your team is comfortable with that. |
| 174 | + |
| 175 | +Here's how you could do it for our recipes site using a JSON file: |
| 176 | + |
| 177 | +```json |
| 178 | +// redirects.json |
| 179 | +[ |
| 180 | + { |
| 181 | + "fromPath": "/blog/recipes/mouthwatering-lasagna", |
| 182 | + "toPath": "/recipes/mouthwatering-lasagna" |
| 183 | + }, |
| 184 | + { |
| 185 | + "fromPath": "/blog/recipes/*", |
| 186 | + "toPath": "/recipes/" |
| 187 | + } |
| 188 | +] |
| 189 | +``` |
| 190 | + |
| 191 | +```js:title=gatsby-node.js |
| 192 | +const redirects = require("./redirects.json"); |
| 193 | +exports.createPages = async ({ graphql, actions }) => { |
| 194 | + const { createRedirect } = actions; |
| 195 | + |
| 196 | + redirects.forEach(redirect => |
| 197 | + createRedirect({ |
| 198 | + fromPath: redirect.fromPath, |
| 199 | + toPath: redirect.toPath, |
| 200 | + }); |
| 201 | + ); |
| 202 | +} |
| 203 | +``` |
| 204 | + |
| 205 | +### Rewrites/Reverse Proxies |
| 206 | + |
| 207 | +Whenever you set a statusCode of 200 on createRedirect you create a rewrite or a reverse proxy. If your toPath is a page that already exists as part of your Gatsby site it will render that page. If the toPath is an external URL, then we will proxy that request. Maybe you have one site sitting in front of multiple other domains and you want to use rewrites to proxy the traffic. Imagine awesomesite.com was actually several different sites. Docs, dashboard, and marketing, for example. You could have all traffic start out routed to awesomesite.com and then rewrite to the other sites as needed. Such as: |
| 208 | + |
| 209 | +```js:title=gatsby-node.js |
| 210 | +createRedirect({ |
| 211 | + fromPath: `/docs/*`, |
| 212 | + toPath: `https://www.awesomesite.com/docs/*`, |
| 213 | + statusCode: 200, |
| 214 | +}) |
| 215 | +``` |
| 216 | + |
| 217 | +The important part here is that you have an external toPath with a complete URL and a statusCode of 200 to indicate the rewrite. |
| 218 | + |
| 219 | +### Current Limitations |
| 220 | + |
| 221 | +- Infinitely looping rules, where the “from” and “to” resolve to the same location, are incorrect and will be ignored. |
| 222 | +- We limit internal rewrites to one “hop” — you cannot proxy from Gatsby Site A to Gatsby Site B to Gatsby Site C in a single request. |
| 223 | +- A proxy request will timeout after 20 seconds |
0 commit comments