--- title: "Tim Tries: Algolia Crawler Plugin for Netlify" description: "Sometimes I try out new tech or web services for the first time. I give feedback as I go, in real-time. This is the #timtries Series. In this episode I try out the Algolia Crawler for #Netlify. Conclusion: you should try this out! I’ll use this on all my Jamstack websites going forward. Wow!" date: "2021-05-03T14:00:02.000Z" url: "https://timbenniks.dev/videos/tim/049-7jk6nyalhuc" youtube_url: "https://www.youtube.com/watch?v=7JK6NYaLHuc" playlist: "tim" image: "https://i.ytimg.com/vi/7JK6NYaLHuc/maxresdefault.jpg" tags: ["composable-architecture", "frontend", "developer-experience", "devrel"] --- # Tim Tries: Algolia Crawler Plugin for Netlify Sometimes I try out new tech or web services for the first time. I give feedback as I go, in real-time. This is the #timtries Series. In this episode I try out the Algolia Crawler for #Netlify. Conclusion: you should try this out! I’ll use this on all my Jamstack websites going forward. Wow! Watch on YouTube: https://www.youtube.com/watch?v=7JK6NYaLHuc ## Transcript welcome back to another episode of the tim tries series so in a tim tries episode i try new software that i haven't used before and based on the experience that i have as a web developer i will just give you my opinions as i go along so this is raw and unedited at least most of the time and therefore i hope it can provide value to other developers so in this episode we're going to be talking about search and i am an algolia ambassador right so why not use the algolia crawler plugin for netlify and see how easy that is to set up and to use are you ready to go to the studio i am let's rock [Music] all right we are in the browser now so let's just start by googling i guess algolia crawler natalie fine there we go okay let's have a look so i've been to a bunch of those but i guess that's a while ago because i haven't really truly implemented this right so i see the netlift oh i hear an npm package let's go there oh there's click quick start there are some other stuff here so um let's just start with this quick start one okay so as i said um i created a netlife version of my website to make sure that of course we can do this because normally i host on for sale so i do know because this is a crawler that thinks like canonical urls maybe site map urls maybe robots.txt stuff becomes complicated with crawler so what i did do in preparation for this video is i actually put my website on netlify i fixed all urls to the new temporary url to test this video right to test for this video and so let's just go to netlify for a sec and actually have a look at that website there we go so it became nostalgic joliot okay so this is just my website as you can see there's a homepage there's a bunch of videos there's a bunch of blog posts and so i want to be indexing this to be able to search through my website right so they all have like tags and content and related videos all really lovely for crawling so um my website is based on nuxt cms is prismic and it's a gemstack site and it uses for images and now it will also be using algolia for search right so there's my netlify instance let's just go to okay so let's go to this quick start and just go over it so let's have a look link your site to algolia first go to the algolia crawler for natalie fine and sign in with i'll go sign into algolia with netlify kinda makes sense let's just look over this for a bit okay then allow algolia access to my netlify account sure some fun fancy all out stuff going on here and then we can go to the crawler admin console and set it all up oh wait we have to then find my um site well this is the joliot one right that's the one we have to type in okay then we want to install the site it's going to add some stuff like algolia api key it's nice that it does that for you okay and then you get a code snippet well of course i have a next website it's based on fuel right so i would love to have like a next or view plugin for this um i guess for the purposes of this video we're just going to add this in the next config and then run with it it's cool and then there's a bit of indexation and branches by default algolia solely builds the master branch this probably poses a problem because i actually created a fancy new branch just for this project right because i don't want to change my my official website's master branch and so you can see that um here it's netlify algolia plugin so we're gonna have to check um how to fix that i don't really see how to pass the branch but i'm assuming as it's a netlify plugin we can use a netlify.2ml file um we'll figure that out when when we get there it's it's likely gonna fill on first run because we're gonna put it on the master branch and then here we go so it just indexes everything and then look at the records and then we have to install yeah this is that same thing we just saw okay okay let's do it right let's go to the algolia crawler for netlify sign in to algolia with netlify here it goes until now it's smooth okay authorizing there it is link a new site so there it is the juliot install okay cluster i am in europe ah here it is here it is eu west that's me install smooth okay so we now have a crawler a netlify one i can uninstall and reinstall okay so this is my algolia app id and this is the algolia api key oh we're gonna let's just check this out so these are all my api keys for our goalie i guess okay we're gonna likely need that later because there is this whole thing here well of course as i have a next site i cannot just plop this in but what i can do is probably just go to the header wait let's just go to next config right i can just add like something like this so it's a stylesheet i always have to remember what to type for stylesheets there we go what else do we have we have a script so this is just an embed basically but then a bit of a poor man's version of it but that's all good because you will likely use your own right so we're just going to add a source oh what's going wrong here yes and then we have some inline stuff but we have tricks for that with next watch this i think what i can do because i already added this dangerously disabled sanitizers so i can likely do this i did that before kids don't do this but for this demo this is cool right so just have a template literal we're adding stuff oh you see that's that api key that we need to find which we found here so search only we're not going to be changing anything and then we're going to add that here okay and then the selector is diff search so it's a div with an id search so let's just go to pages just gonna plop that on my home page okay so this was done now let's go back to okay so we did like a bunch of steps already we implemented this um should we just look at that you know what we're just going to look at that branch thing but i don't really see that here just going to click and see because they want to do library parameters right but we're not coding this thing we're just installing it so this worries me a little you see there you can actually set these branches okay um so we don't need this i have this here ah there's branches also in the npm four days ago we're bleeding edge baby okay so available parameters input branches this is what we need right because we need this one netlifealgolia plugin so set the right branch example here we go yeah so this is one of those 2ml files i have one open you saw it just now in my editor right but it's just empty you just copy all that stuff go to visual studio code there it is and we likely don't need this stuff we just need to give it like we don't have this let's just add it here so it was natalify oh yeah plug it okay i don't know why this is not highlighting or i think this is fine okay so i did a bunch of code here so how about we actually commit this add everything edit natalie bye i'll go clear plugin code no typos no typos running running wearing i'm gonna have to push that of course that's what you get in the tim tries video i make my stakes mistakes all the time there it is okay starting the build anyways let's just see if this works let it run but what i also want to see is like now that we did all this if we now go to our actual algolia app let's see what what happens so right now there's likely nothing so it did create crawl or netlify but there's no index because we didn't actually build it yet right this it's still logical so i'm assuming that in this page things will start changing once the build is done okay so it's now having to generate with next to my jam sex site so it might take a minute a few moments later oh it seems to have worked oh look look look there's the crawler yeah and then i'll go the united fight plugin started on success it ran something shall we just go to this url magic yeah it's actually now after the fact crawling my website and so oh look there it is nostalgic julio i'm really interested in this because you see these are all my urls okay so it's finished it has success can we ah here url inspector let's just have a look at the ignored ones okay so ignored all the fast fasted urls that just filters the same list so i'm assuming it's just smart and say okay we're not going to do the query parameter things let's have a look at the one that's successful okay so these are my writings there's some videos here um i guess it just worked so let's have a look at the should we just wait before we go to the website i want to see how it has indexed everything right so let's refresh this page let's see you see oh there's an index now and there's data so this is my writings page videos page sponsor me it seems like it got everything nice nice nice okay um i think it's time to click on the link and see if it searches yes my div search became something okay view nice okay wait performance nice again dim okay so this thing basically works this is amazing all right yeah what more should i say you should try this and also if you've looked this far and you enjoyed what you saw there will be a link in the description to algolia because i have a partner link so if you want to subscribe through that that's awesome for me and also for you because you can get to use it for free anyways this was yet another dim dries and a pretty successful one at that i'm gonna dive into this and do more because i want my own design right anyways cheers and see you next time