Implementing Multi-Language Search in Gatsby v2 — Powered Projects

Hello, my name is Alex. I work at humansee labs. We create cool web-projects in shortest time using JAMstack approach, React and Gatsby. Now, I’ll show you how we implement multi-language search in our projects.

If you decided to get some search plugin from Gatsby Library then you will identify that there are not too many variants there in case you need a multi language search. Thus we have nothing to do except writing our own search plugin.

We start with finding a search engine which could help us and choose lunrjs. After a few days, npm multi-language search module is written, and it’s available on npm as gatsby-plugin-lunr — any pull requests are welcome! :-)

In this article I will show how to add the multi language search functionality to the Gatsby v2 boilerplate project using our plugin. It’s even faster than I can run 100 yards.

First of all, you need to create a gatsby project. You could do all the steps by yourself but I recommend to use gatsby starters. In this tutorial I will use gatsby-starter-default with Gatsby v2.

Install Boilerplate

Gatsby boilerplate is installed. Let’s add our search plugin. I use gatsby-plugin-lunr. List of supported languages is in the link.

Add the Search Plugin

To add the plugin, open gatsby-config.js file in the root directory and add the following code in the plugin section:

In the plugin, I use mapPagesUrls, so add this code to the top of gatsby-config.js:

The search plugin is indexing static files such as .json or .md. In my example, I will use files with .md extension.

Add .md Files Support

Let’s add support of .md files to our project. To do so, open gatsby-config.js and add the following plugins:

After adding the plugins, install these modules via npm or yarn.

Now we have support of .md files, but still no content. I recommend creating a templates folder in the root directory. Files in this folder are pure React components that will be initialized with content that we have in data folder with .md extensions.

In the templates folder, create the Page.js file and add the following code:

This React component will create a page from the content that we have in our .md file. Let’s create index.md in data directory:

Small step should be done before we finish. We still have to let gatsby know how to create pages. To do so, open gatsby-node.js and add the following code:

Add the Search React Component

Go to the components folder and create a Search.js file:

Now add our Search component to Header.js in the components folder:

Our Layout.js component should look like this:

Finish

Now, everything is done, but it’s not working.

The reason is in the principle of creating indexed files. These files are created when you build a gatsby project. Run gatsby build.

After the build is successfully ran, restart the gatsby develop server. That’s all, now our search component works as we expected. Try to input “React” in the search field.

Full code for this article is available on github, issues and any proposals are welcome :-)

Thanks for reading!