Kent C. Dodds: 0:00 Redirects with a client-side router are interesting because, traditionally, people would redirect just with the client-side router and things would work out pretty well that way. You could have all of your routes defined in one place.

0:11 The problem with that is search engines and browsers don't get the proper status codes for those kinds of things. You can get dinged in search engine optimization context as well as the browser behaving properly for your redirects because you can't set the 301 or 302 status code for that.

0:28 Instead, it's better to do a redirect through the configuration of the CDN or the server that you're using. There are three contexts where we're using servers for our application, and we want to configure all three of them.

0:43 For the first one, it's this local server that we've got as we're running our application locally for development. We're using create-react-app and it has this feature for setupProxy, which will allow us to modify the Express server that is running our development server here.

1:01 This module Exports here is exporting a function, and this function accepts an app. With this app, I can add a .get. This is just an Express app. If you're not familiar with Express, that's fine. You're not going to be doing a whole lot in this file anyway.

1:16 We're basically going to say, "Hey, if you hit a route, if you're trying to get a route, that is just the / route, so the home route. Then we're going to take that request and response, and we're going to take that response and say redirect you to /discover." We want to redirect you to the discover page.

1:35 When we do this, we need to restart our server, so I'm going to stop it. We'll run npm start again. Now we're going to the home route, and we're getting redirected to the discover page. We don't start on the page that says, "Hey, are you lost here?"

1:51 The next thing is when we build our project, and we want to run it locally, we're using a module called Serve. We're going to configure Serve to handle this as well. With Serve, we're going to say redirects. This is an array of redirects objects where the source is /.

2:08 If we land on a / page, then the destination should be /discover, and the type is a 302. That's the status code that the server will send the browser for this redirection.

2:22 Finally, we're deploying to Netlify which accepts this _redirects file in this public directory. Here we'll add a line for /. If somebody lands on that URL, then they shouldn't be redirected to discover. We'll make this do a 302, and we'll force that redirection. With all of those reconfigured, we'll now redirect all / traffic to the discover page.

2:48 I wouldn't say it's very typical to redirect all users from the root route to a separate route, but it is fairly typical to redirect the user from one old route to a new route, or one short version of the URL to the longer version of the URL. That should definitely happen on the server side, so that the status codes can be set properly.

3:08 In review, what we did to make all of this work is we used the setupProxy feature from create-react-app so that our development server can automatically redirect us as we're developing to the home route of discover.

3:20 Then, we updated our serve JSON configuration so that when we run our build and run the local server, that will also get redirected to the discover page. Then, we updated the _redirects file for Netlify, so that clients who try to access the home route will get redirected here as well.

3:40 I just want to add here that the most important takeaway from this particular extra credit is not the specifics on how you configure these different tools, but the fact that you probably should be configuring these tools so that your redirects are happening on the server and not on the client.