Posted on Aug 3 • Originally published at thezal.dev Hello There, TheZal here! Ever wanted to slap a fully customizable full-text Search on your Astro website?Well, if you've so much as dreamt about it once, then this guide is right up your alley! Let's discover Orama! So, let's talk about Orama and how it works: this search engine is the real deal, written entirely in TypeScript. It's lightning-fast, able to search through millions of documents in less than a millisecond, yeah, we're talking microseconds!Orama comes packed with a bunch of impressive features like typo tolerance, facets, filters, and even supports stop word removal and stemming in 26 languages. The best part? It's built with zero dependencies, so you know it's got that independent spirit. You can run Orama wherever JavaScript runs, which is pretty sweet.And guess what? It's free and open source, so you can join in the discussions on GitHub or hop on the Slack channel!Get involved in this fast-growing community of developers who are shaping the next generation of full-text search engines. Exciting stuff, right? Let's break into the steps to utilize Orama and analyze how it works. I won't dig into the technical stuff because, hey, it's an open-source project, which means you can easily peek at the source code, no problemo!It's possible to install it using npm, yarn, pnpm:or import it directly in a browser module:Orama uses its own database which can be created with few lines of code.Let me show an example of a simple Pokémon databaseSo, here's the deal with Orama. It's all about indexing string stuff, like properties and whatnot. But hey, if you need to set and store some extra data, no worries, you can totally do that too.Once you've got your db instance all setup, it's time to start throwing in some documents. Let the fun begin!Alright, now that all the data's in the house, it's time to get down to business and start querying that database like a boss! Let the search extravaganza begin!In this scenario, we're on a mission to find all the documents that have the word "squirtle" in them. We're gonna dive deep into every nook and cranny, searching through every schema property (yeah, they are called indexes). Get ready to unleash the search power!It is also possible to specify the property to lookupand of course, we will get: Since the beginning of this rad project, Orama has been all about keeping things simple and making it super easy to add new features. They've nailed it with a slick plugin system that lets you customize Orama just the way you want, while keeping the core super lean and mean.Right now, the awesome Orama core team is busy cooking up some cool hooks that will let the community dive right in and tinker with Orama's inner workings. Talk about getting hands-on!But wait, there's more! The Orama core team is also working on some official plugins to support specific features that might not be everyone's cup of tea. So, no worries, you can cherry-pick the exact features you dig and leave the rest behind.And guess what? You can find all the juicy source code of these official plugins chilling out in the Orama monorepo. Just head over to the packages directory and dive into the magic. It's open for all to see!So, check it out: since I added Orama to my Astro-based blog, I thought it would be dope to write about how I actually implemented Orama on Astro using its plugin. The "plugin-astro" plugin is an incredible tool that brings a whole new level of functionality to your Astro websites.With this plugin, you can effortlessly index the content of your Astro site and provide your visitors with a powerful text search feature, it's like having a customized search engine right on your site, giving your users a seamless search experience!Let's set up it!It is possible to install the plugin with any major Node.js package manager:and that's it!The database will be created inside the dist folder of the project and will be named after the configuration inside the astro.config.mjs file.Mine is:Let's have a fast look at what I have inside the configuration:From now on when the build is launched a fresh database will be created!To use Orama I created a react component called OramaSearch.tsx that allows me to use it inside the Header.astro component.This is my first react component so there are errors for sure but let's see some code:I made the search result div even cooler by dynamically setting its background color, this way, it seamlessly adapts to the theme changes.Speaking of themes, I also added an instruction to the function that handles theme changes, so the background of the div reflects the current theme. It's all about those little details that make the user experience top-notch!Inside the navbar in the header component, I added the component created with a few lines of code:and that's all! The final result is under the eyes of everyone! Just look up! To wrap it all up, integrating Orama into your Astro website is a piece of cake. Although the project is still in its early stages and may not have all the fancy bells and whistles just yet, rest assured that it works like a charm. The team behind Orama has big plans to add exciting new features soon, so there's definitely more awesomeness to come.If you have a feature in mind that you'd like to see or if you're feeling extra adventurous and want to contribute to this incredible project, you're in luck! Check out the contribute guidelines on the GitHub repository and start collaborating. You can even explore the issues and see if there are any bounties up for grabs. Contributing not only helps improve the project but can also put some extra cash in your pocket. It's a win-win!So, don't hesitate to give Orama a whirl and join the growing community of developers who are shaping the future of full-text search engines. Exciting times lie ahead! After all, we can say that the addition of a search engine it's a piece of cake using Orama! 🔍A little shoutout to the Microsoft MVP Luca Del Puppo, check out his articles on how to use Orama inside a React application:And another little shoutout to Balastrong aka DevLeonardo for helping me in the early steps of the integration of Orama inside an Astro blog!If you found this useful feel free to leave a comment here or to reach me on Twitter, GitHub, or mail and share it with your dev friends!Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well Confirm For further actions, you may consider blocking this person and/or reporting abuse Dennis Persson - Jul 30 Olabisi Olaoye - Jul 30 losarcosdev - Jul 9 Daveyon Mayne 😻 - Jul 13 Once suspended, thezal will not be able to comment or publish posts until their suspension is removed. Once unsuspended, thezal will be able to comment and publish posts again. Once unpublished, all posts by thezal will become hidden and only accessible to themselves. If thezal is not suspended, they can still re-publish their posts from their dashboard. Note: Once unpublished, this post will become invisible to the public and only accessible to Riccardo Solazzi. They can still re-publish the post if they are not suspended. Thanks for keeping DEV Community safe. Here is what you can do to flag thezal: thezal consistently posts content that violates DEV Community's code of conduct because it is harassing, offensive or spammy. Unflagging thezal will restore default visibility to their posts. DEV Community — A constructive and inclusive social network for software developers. With you every step of your journey. Built on Forem — the open source software that powers DEV and other inclusive communities.Made with love and Ruby on Rails. DEV Community © 2016 - 2023. We're a place where coders share, stay up-to-date and grow their careers.