This course has been updated! We now recommend you take the Intermediate Gatsby, v2 course.
Transcript from the "Setting up Dynamic Routes" Lesson
[00:00:00]
>> Jason Lengstorf: The lookup site, we're gonna just step outside of yarn workspaces entirely and just not stress about them. So the way that this is gonna work is we're going to start by just getting into the site and getting it running. So let's get this site moving and if we look inside.
[00:00:20] There's really very little in here. We've got some scripts added, but we don't even have our dependencies yet. So let's, move into it. We're gonna get into look up and then I'm going to yarn add gatsby react react-dom.
>> Jason Lengstorf: Okay, so we've got gatsby react and react-dom in there.
[00:00:42] And now what I wanna do is I wanna set up two pages. I want an index page and that's gonna give us our, just kinda like our splash page, it will link over to a search page. And the search page is where the app is actually gonna live.
[00:00:56] So let's go ahead and get those started. So we'll start with a source folder, pages folder and index.js. So I'm gonna import react from react and for this particular site, we're not gonna worry about making it look nice. We're gonna skip the UI, we're gonna skip styling in general and just put together the functionality cuz we spent a lot of time on styling today and I don't want to re-hash the same ground.
[00:01:23] So let's import react from react, we're going to import link from gatsby. And then we're gonna set up our index page. And so our index page is going to be nice and straightforward. We will setup a fragment so that we don't have any extra junky markup. We'll say this is gonna be the Rick and Morty character look up.
[00:01:52] I always feel like a little bit of an impostor when I make this. Whenever I work with this Rick and Morty API because I've actually only ever seen two episodes of the show. But I love this API because it's perfect for demos and showing off how different things work.
[00:02:12] Okay, so we're gonna say let's look up your favorite characters from Rick and Morty using the Rick and Morty.API.com Rick and Morty API. Okay and then down here we're just gonna link to the search page which we'll need to create, okay and I think that looks like a page.
[00:02:53] So let's export it.
>> Jason Lengstorf: Okay, and then we'll create-
>> Speaker 2: Just a heads up, you're missing a single quote on line two.
>> Jason Lengstorf: Good catch. Thank you very much. There it goes now it's auto formatting. Cool, thank you. So we've got our index and then in our search I'm actually just gonna take a lot of this and drop it right in and we'll say.
[00:03:28] Search for Rick & Morty characters and then we can say give it some fun marketing copy trying to remember which, Rick you're talking about? Try out this handy search interface, okay. So in here, we're gonna be able to set up an actual search interface but right now, we don't have one so we need to add a search form and we need to add results, right?
[00:04:09] So here, let's make it so that look, we know that we want our search results to live on the page. So let's go ahead and move this up. And I'm just going to use yarn develop. Because again, we're not using themes so we don't need to use workspaces anymore.
[00:04:26] We can just jump right in and use a new standard development. So here is our highly styled Rick & Morty API lookup, let me zoom in a little bit. And when I click over my search page, we are able to see our search page. And so what we have to do yet, is we have to add in our search form, and we have to results.
[00:04:46] But with the results, the way that we want this to work is when somebody searches, we wanted to show up where they're going to search, let's say Rick. And that should redirect to the search page and show us results, and that way, if I take this, copy it, and send it to somebody, they should be able to see those results.
[00:05:04] One of the major problems that you run into a search is when you have a search field, I type into it It shows me the results page, but the URL still just says search. So I have no way of sharing those results with somebody. So if I'm looking for, like, if I'm on an e-commerce site and I search for a product and I go, this is what I want for my birthday, and I want to share this link, hey, you can give me any one of these.
[00:05:29] I can't share that, right? So I can't get my birthday present, and everybody's sad. So we wanna make our search results linkable. And to do that, you will take advantage of client-side routing in Gatsby. Which fortunately, there's an API for that. So in our root, we're going to create a Gatsby node.js.
[00:05:53] And in our Gatsby node, we are going to look for the onCreatePage API. And so onCreatePage fires whenever a new page gets created and it allows us to modify it if we need to. There are a bunch of things that you can tweak. Specifically, what we're going to do today is look for a specific path.
[00:06:15] And if we find it, we're going to set it as a dynamic like a client side only route. So let's set up if, the page path matches and then we're gonna use our regular expression. Everybody's favorite way to get themselves in trouble. So if it starts with /search, we know that we're on the search page.
[00:06:38] So if that comes back through, we know that we are where we wanna be. So then, we're gonna sat page.matchPath and we are just gonna set it to search with the blog. So anything that gets past this particular URL/search will kinda get treated as if it's all the same page.
[00:07:02] It will all get redirected to search. Then, we just call createPage with the tweak page. So this just overrides the defaults that were with the original createPage. So, this is only half of the story though because we've told Gatsby to do it which means that Gatsby will respect it But if we refresh the page, if we get linked from somewhere else, we would never get to the gatsby for that to get rendered.
[00:07:32] So the next thing that we have to is we have to set up a redirect and as a shortcut, nullify has a really handy CLI that will let you do a bunch of things. But most specifically, it'll let you manage redirects locally. So I'm gonna go ahead and set that up.
[00:07:48] So we can install it with yarn global add netlify-cli. And then in my route, I'm gonna create a file called. I'm gonna create a file called netlified.tamo Tamo is like animals more confusing sibling, and it's super fun to work with, but this is how we use it. So [LAUGH] you set up redirects, it's a double array because I guess that means that it's Like a key but there can be multiple instances of that key, so, double array.
[00:08:31] And then we setup from and it can go from any search. So any instance of search, it can be /search and then any trailing amount of characters. And then we're gonna redirect that to search. And we're going to send a status code of 200, which makes it a rewrite instead of a redirect.
[00:08:55] If it was a redirect, it would pollute the history and there's all sorts of trouble that we don't want to get into. So we're just gonna have netlify lie. And say that that redirect never happened and you just got the page. So that means that we should be able now to type anything after slash search and it should bring us to that search results page.
[00:09:17] To test it, I'm gonna use something called netlify dev. So now that we've installed that netlify CLI, we have the ability to run netlify dev which will detect our Gatsby config. And then it starts up on port 8888 instead of 8000, which is the standard USB port, and it will make our redirects work, okay.
[00:09:36] So the way that netlify dev works is it auto detects Gatsby based on the presence of files. And so to trick it into recognizing this as a Gatsby site, we're going to set up a Gatsby JS.config. And then we can run netlify dev, and it will run gatsby develop.
[00:09:53] So the gatsby config doesn't need to have anything in it, it just needs to exist for netlify dev to recognize that it's a gatsby site. Now in any real site, you're gonna have some kind of gatsby config. You'll have site metadata for the SEO. You'll have things like that.
[00:10:08] So that's not an unreasonable thing to expect to exist. So now, we can already see that our search, I can put anything in here, and it's still gonna take us back to that search page. And if I come back and just go to straight search, it still shows us the search page.
[00:10:25] So at this point, what we've got is a functioning client side app that will take whatever we throw at that search page, and always bring us to that search component. And that sets us up to actually do the the lookup part. So let's save our work and then we'll add to that next piece.