Hasty Treat - Gatsby Tips

syntax.

Get 14 days for free of LogRocket. Now what is LogRocket? Well, it's the service that allows you to see your bugs and errors happening

anything goes wrong, you often ask mhmm. Maybe you look in your bug tracker to see maybe what browser or what what some of the code was that hit it, but this actually gives you a video of the event happening. Imagine being a detective and having a video of the murder take place. That is really what this is doing. So head over to logrocket.comforward/syntax layouts and as they pertain to animations in in Gatsby are kinda difficult.

Bos, and Scott Toroloco,

tips JS the title said. So the first one we have here

then I I I would find myself being like, I'm not sure what to to set up. So The the reason why Gatsby build is is so instant is because there's a massive cache.

what I do is create a SEO on each of my pages, I would use React Helmet to set all the head metadata. And you in there, you'd have your Open Graph meta tags, of how that works. I won't say the code here, but

strings and images maybe 2 or 3 times the whole page and all the data and everything like that, and I just checked if the path matched. In my case, it was thumbnail.

Gatsby tips.

Hey, Wes. This episode is sponsored by one of our longtime sponsors over here, and that's LogRocket.

Monday. Monday. Monday.

Twitter specific meta tags. You'd have, So if if all of your pages are, like, about dash Wes Bos, uses dash west boss, like, everything is dash west boss, the entire nav and footer and everything that is in my layout. If that's the case, then there's nothing wrong with just manually wrapping a layout component on every single page where you need it and then just not doing it in the rest. Let's I'm just thinking about that. You know, one, like, really cool thing I I like about that is,

So, Wes,

Open wide dev fans. Get ready to stuff your face with JavaScript, CSS, Node modules, barbecue tips, get workflows, breakdancing, soft skill, web development, the hastiest, the craziest, the tastiest web development treats coming in hot. Here is Wes, barracuda,

Tolinski.

and then set all of your defaults in there. So your default title.

hasty treat. We're gonna be talking about Gatsby, learn that stuff. You know what? Gatsby has a a page. Was it just like the, in their documentation let me see if I can find the exact page.

component that in turn uses React Helmet,

on github.comforward/wespossforward/wesposs Scott like 2 options. So Gatsby doesn't have any specific

Cool. And mine actually kinda goes along with this, which is to run the build locally to troubleshoot production issues because this the reason why this goes along with this in some regard is that I think, there's sometimes when people first start writing this stuff, they might not have even written any Node. Js code specifically or maybe they're they're just thinking about React. Right? This is a front end thing. This is a front end result.

match CommonJS until

Wes what I found myself doing I sometimes go as far to just Tolinski your node modules folder, delete your package lock file, life cycle methods that you can hook into,

and ESM will allow you to React Helmet will allow you to set up a title template.

So I've just been writing ES modules everywhere in every file and sharing them amongst the files.

Node over it, and then I also found for pages that I didn't specifically have anything special for that other than the title of the page,

mix and

And, it's great. There's you can look at my Wes repo

And what you you don't often think about is, hey.

and ES modules.

you just have you're seeing how fast these these Gatsby sites are? And, honestly, you get so many extra features

without having a full refresh. Imagine that. Right? So Gatsby just makes some of these things so incredibly easy. I think I could probably spin up a Gatsby site faster and quicker than I could most anything else. So, big big fan of Gatsby. Love these tips. Maybe we should do another one of these sometime.

use if you've got lots of images and you're finding your build times are very slow, you can use Gatsby Parallel Runner, and that will

that HTML doesn't have. Right? You get this ability to change page routes

Peace.

for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show.

Yeah. I love this. This is a lot of great tips on, on one of my favorite platforms, Gatsby.

offload the image generation So these are just gonna be things that after building a couple of Gatsby websites Yarn little and Gatsby SSR.

to Google Cloud,

Sanity Image. All of those work with the Gatsby images as Wes. So that's that's an option as well. And and if that's the case, you don't have to generate any images on build time. You just they're just done on demand, which is pretty nifty.

and that will make it much faster. And that's why I use it on my own site. And there's also, like, an example

Cloudinary,

beyond and, I'm excited. I love Gatsby. In fact, I I had one of the first courses on Gatsby in the entire YouTube. So I've been on the Gatsby train for a long time, a big, big, big fan. I know Wes is a huge fan too. He just built his site in Gatsby. My name is Scott Polinski. I'm a developer from Denver, Colorado. And with me as always is the Wes Bos. Hey, everybody.

Head on over to syntax.fm as they happened. It's a video session replay. It's very, very cool. It's one of those services that you would have wish you would have had in any project you were doing because anytime that that seem scarier than they are at first. In fact, all of the additional sort of little API things in Gatsby are scarier than they are than they actually are. So,

So if you're doing layout, you you would want to put them in wrap page element, and that will every single page that you have will be wrapped in this specific layout, and there's no need to manually wrap every single page in that.

So the the whole wrap page element and wrap root element things are definitely topics

Learn all that stuff. There's a lot of really useful stuff in there. It's gonna come in handy. So even if you're just building something basic, you wanna get better at Gatsby, you're asking how to get better, that's how you get better. You'll you'll learn this stuff. Yeah. Just read all of it, and then that gives you a headspace of what are the possible

consider just manually adding the layout component to each page if you want that.

and they will definitely come in handy when you need it. So my my other tip is the flip side of that is

So if you don't want every single page to have a layout like, I ran in a situation Wes, like, if I want Wes/

inside of your providers, and wrap root element is outside of your providers.

wrap your layout automatically in Gatsby Node and Gatsby land because

Gatsby API

layout, any ways to to to do a layout. You just have to create your own layout component and wrap your components in it. So my 1st tip and my 2nd tip are gonna contradict each other. So first one is

in Gatsby SSR and Gatsby dash browser. Those 2 file files will allow you to hook into, over to your page, you can do that via the on create page hook.

If you had to Gatsby site and then you click on docs and then you click on

I think what I've I've read is wrap page element is set a whole bunch of defaults, is to make a reusable

what is it? It's Gatsby node, Gatsby config,

And it looks like you have a a little additional notes here too. Yeah. Just Animations. But Gatsby the way Gatsby and Next. Js do things with their their routing based rerun, most of your your page to mount and unmount on page change, right, which is one of the reasons why they have the whole v one

And even though that sometimes takes a couple minutes, that will often fix some of these weird issues that comes along.

Next one we have here is to use, ES modules everywhere. So one, like, weird thing about Gatsby is that SEO meta tags. And, like, I find myself using the same

sometimes Gatsby gets into a weird space, and you just gotta start over. Cash involved.

And sometimes it gets a little bit weird, so you gotta just clean it out. So just run Gatsby clean.

that's what you gotta do. So, for me, when in doubt, stop the build and restart.

Those are all done in common JS because they're they're Node files. Right? And then it's annoying if you wanna share those with Gatsby browser or or anything like that. And, also, like, you're writing ES modules in React, but then you have to write common JS in the config files.

re npm install, and restart.

Put that stuff. There's no reason not to. If your site doesn't need a person that modifying and updating the content, I would not reach for layout plug in or whatever from the old Gatsby version layout because people liked that way of doing things.

exact same text from the thing. And I get that they're showing you a very simple intro to sourcing data, but it seems kinda silly not to to have to just type text into a file, and then it goes into the API. And then and then you gotta clear that. Yeah. I think sometimes people get the false impression that, like, what I did there is I I took the page's path. You have access to

rating queries JS type this text into this file, then query that

you gotta do that stuff. But to be honest, if something is output only a couple of times or it's not going to change, it's the name of your website or it's hard coded text or maybe it doesn't need to come in from an API. A lot of these sites that we're building with Gatsby, they don't have a CMS back end. It's just a site. Right? My name is Scott.

or or WordPress or any of these things because

a CMS back end. Right? I'm not gonna reach for Contentful

keep it in code. It's gonna be way easier for you. Last tip I have here, I've said this before, there's a lot more advanced functionality you can accomplish fairly easily with them as long as you just learn them. So, yeah, good one. Last one for me here is that you don't have to query for everything. You know? It's it's funny. I think is is it the example that shows that you're querying for metadata? I'm, like, getting it confused with the others' content or, No. I'm talking about logrocket.com.

tip. My next one is one of these hooks that Scott was just talking about is, SEO component that sets all of your defaults. So that are spread into the introduction to,

Gridsum and whatever. Like, that's what they show you as, like, the ESLint

And

use the on create page to pass context to the layout. So on create page is a hook in Gatsby. And when your site is building, it will call that and it allows you to step in

and you can do whatever you want. And in my case, And what I've been doing for almost a year now is using Wes, Red Helmet will allow you to set a a template for that. So you only have to pass in about and uses or the the name of the blog post or the name of the page, and then it will render that out for you. So was pass in titles and images and thumbnails and stuff into your SEO component, Nifty.

And if it was a thumbnail page, then you can just say page Scott context dot whatever.

Good You Node? Under underutilized JS in, like,

unfortunately, it requires, it gives you not only, like, a ton of overhead in all sorts of ways, it just makes the entire process that much more complex. So if you don't need that content editing, Now you're gonna want to check out log rocket.comforward/ Welcome to syntax in this Monday

that there's going to be time to unmount and things like that. So if you want to have any interior pages or elements animate themselves, you kinda have to orchestrate it from the root element or page element layout wrapper that you've created

that is taking place on the container itself.

Node we have to use this whole wrap root element and wrap page or wrap page element, and those are the types of features that you're going to want to use if you're getting into interface animations and transitions.

is,

animate out in some sort of custom way, or you're throwing on maybe, like, a framer motion animated routes kinda situation

JS something that is not going to get un mounted or mounted on everything. That way, you can maybe throw in a little delay here while the internals

So just throwing an animation or an interface transition into your page or component is not a recipe for success. You kinda need to orchestrate it a little bit with Gatsby considering and get 14 days for free. Check it out. Very, very cool service.

And in Gatsby, it's just what it looks like, and I I could wrap it 6 times if I wanted and have 6 navigation. Obviously, I don't wanna do that, but I just did that by accident.

the WordPress land is, like, the the logic of wrap page element and wrap root element.

Some people would see that as a fault because they're they well, you're using this incorrectly. It should break. I don't know if I'm of that mindset, but I I definitely think that is is like a a positive in my mind. You could put your nav wherever you want if you wanted to put your nav. Flexibility.

like a microsite or a custom custom URL that's still within my Gatsby site, and I don't want it to include I wanted to pass some additional context to my layout Scott JS component.

in WordPress React Helmet will also allow you this is something I didn't know.

Yeah. Another one here is along the lines of layouts. Now

I once accidentally wrapped my website twice in a layout component. I did both of the ones I talked about, and it worked. Like, I just had the whole layout twice. And I was like, that would have never have worked

setting up headers and all of that, and the template are so tightly bound.

Yeah. It's pretty cool.

That's really cool.

and then serve the build locally as a production build before deploying Because sometimes people, they get all done with their project, and they they just say, okay. I'm gonna get commit, brought up to Netlify, and then, oh, it's not working on Netlify. And now now I think it's a problem with Netlify. Little do I know that I wrote some code that's maybe I used to, like, a a window dot or something, like, basically, stop the build and restart.

without having to worry about whether it's being hosted or whatever. So just make sure you run that build before you you push it up. Next I have is

creates actual HTML files from that. So my tip here is do not forget to run the build I think those hooks are largely underutilized.

and I broke the the whole thing. These are way easier to solve ahead of time on your local machine,

your that's how it generates the static build, is that it runs the site in Node and and

There is Node things that are happening and taking place, and at the end of the day, your entire application needs to compile in Node. Js, right, because it's it's running And if you don't know Gatsby, give it a give it a real hard look. If if you're just a reactive novice or any of those things, don't worry because, man, you don't have to know Node ton of React to get a very fast site out of Gatsby. It it it is I always have the these funny conversations with people where they're like, I just don't understand why you would use a JavaScript framework to build a site sometimes, it it needs a a restart here where you have to cold stop the build so that the node processes actually,

meta tags And then finally, allow yourself to pass just additional, Yeah. Yeah. Let us know what your tips are to it as at syntax f m. I think that's it for today, and we will catch you on Wednesday.

different trees of the application, whether or not it's, like, in this layout or this layout or whatever. But as these trees go down, you can make your React Helmet as specific as you want. Fantastic. That's a, like, a low key But

tags like you would to react helmet, and then those will just be put later on in your SEO component. And those will overwrite anything that you you wanna overwrite.

SEO component. So meaning that you can also pass additional JS done with ES modules and Gatsby will allow us to use ES modules, this is a really good solution.

Yeah. I think that's the important thing is that the the React ESLint will overwrite. It's not like you can only have 1 of them. So my general strategy personally for React helmet is to have one at the, like, the sort of app level that is just like a blanket covers every page. Right? And then as we go, I make them more specific based on

Too many times, I think people had issues where maybe a plug in's not being recognized or maybe they gooshed something up in the config. Either that or Gatsby is just behaving oddly, not what they're expecting to have happen. Now because Gatsby and when you could do it in HTML and JavaScript. I'm like, well,

super duper duper constantly useful, like, every project kind of component that is is React Helmet. So next 1 is going to be, when in doubt,