Simply copy and paste the following command line in your terminal to create your first Strapi project.
npx create-strapi-app
my-project
A headless content management system (CMS) is one of the best solutions for creating an omnichannel experience and providing streamlined content delivery. That is because a headless CMS works as a back-end content repository that serves digital content via an application programming interface (API).
As a result, it is easier to deliver content on multiple devices, platforms, and applications than with traditional CMS systems. However, you’ll need to optimize the headless CMS to make your content more easily accessible.
One of the easiest ways to do this is using an on-site search, which helps users browse large amounts of content quickly. Not only does this improve the navigational interface, but it also results in a better overall user experience.
This article will explore the benefits of using a headless CMS and what on-site search is. We’ll also provide suggestions for on-site search options for headless CMS solutions and explain how to use one in a web application.
A headless CMS architecture offers a backend content management system where the content repository is separated from the presentation layer, known as the “head.” In contrast, a traditional CMS architecture provides a single system for creating, managing, and presenting content.
You may want to scale content and operations regularly as your business grows. For that reason, using a headless CMS might be a good option. It enables developers to focus on building the front-end while the marketing team focuses on optimizing content and omnichannel marketing.
Strapi is the leading open-source customizable headless CMS platform that offers flexibility in creating APIs. It gives developers the freedom to choose their own frameworks and quickens the development process.
With a headless CMS like Strapi, users can easily manage and deploy the same content across mobile apps, websites, internet of things (IoT) devices, and other digital platforms. That way, you can deliver personalized content while maintaining consistent branding.
Strapi has many features that can help you build an engaging digital experience, such as an intuitive interface, a content builder, and a customizable API. In addition, its authentication and authorization feature can secure API endpoints by giving access based on different user roles.
Furthermore, the Strapi headless content management system can be integrated with many popular tools and frameworks, including Meilisearch, Angular, React, Hugo, and Gatsby. For example, using the Meilisearch Strapi plugin, you can add your Strapi content types into Meilisearch instances. This will make your data more accessible and easy to navigate directly from the database.
On-site search, also known as internal search, allows users to find website content by typing queries into a search bar. It helps users navigate a website and retrieve relevant information easier than if they were to search manually.
Dynamic and more complex websites such as web applications, web forums, and media sites may require on-site search. That’s because these sites have a lot of content that can be difficult to find. Without an on-site search function, users’ time is wasted and they may even exit your website in frustration.
For example, online stores that offer a wide range of products should have an on-site search tool. It will streamline the customer journey as users can find a product based on specific criteria. As a result, it enhances the customer experience and can boost conversions.
To create an effective on-site search functionality, check the factors below:
Since on-site search brings various benefits to your website, from enhancing the user experience and SEO to optimizing site performance, let’s review some on-site search options suitable for headless CMS platforms.
Meilisearch is an open-source search engine that offers various integrations to websites and applications. It focuses on the users’ needs by creating a fast and relevant search experience with typo tolerance, filters, and custom rankings.
Currently, Meilisearch is available with many popular web frameworks, front-end tools, and platforms. You can also install the Meilisearch WordPress plugin when it becomes available. However, ensure that your site uses reliable hosting to provide smooth performance and integration.
For this, opt for managed WordPress hosting instead of standard shared hosting. The former offers servers optimized for WordPress and often includes auto-updates. We recommend Hostinger.com as their WordPress hosting plans support Multisite and have unlimited bandwidth.
Pros:
Cons:
Algolia is one of the most popular on-site search engines that comes with a powerful API. It lets you add internal search to any web application seamlessly and quickly. Moreover, Algolia has built-in search analytics, which can give you valuable insights into your website and audience, from popular searches and click positions to conversion rates. This can help you to improve your search performance.
Since this tool can integrate with eCommerce platforms and product information management (PIM) software, many popular retail companies use Algolia as their search engine tools, such as Lacoste, Dior, and L'Occitane.
Pros:
Cons:
Elasticsearch is a search solution built on Apache Lucene that offers powerful features, such as a native web crawler, extensible APIs, and machine learning. With advanced tools like text classification and vector search, you can analyze search performance and set personalizations.
This search solution also enables you to detect anomalies and organize datasets. Additionally, Elasticsearch can be used as an alternative to MongoDB and RavenDB as it supports the JavaScript Object Notation (JSON) format to store data.
Pros:
Cons:
Typesense is an open-source search engine built using the C++ language. Through its dynamic sorting and typo tolerance features, you can deliver an instant search-as-you-type experience for site visitors.
Aside from that, this tool is easy to deploy as it offers an intuitive RESTful API and integrates with various frameworks. As a result, developers can increase their productivity to build an excellent search experience.
Other key features of Typesense are its various search parameters, such as grouping, faceting, and pagination. You can also download the tool as a WordPress plugin.
Pros:
Cons:
After discussing the benefits of using an on-site search solution with a headless CMS, let’s explore how to set up Meilisearch on Strapi for your web application project. In this example, we will demonstrate the steps for a movie web application.
Frontend refers to the presentation layer of an application that focuses on user interface elements such as buttons, checkboxes, and search fields. It enables web visitors to see and interact with content on your web application. Remember that creating a front-end system requires technical web development skills like HTML, CSS, and JavaScript.
To set up your frontend on Strapi, find the code from the GitHub repository. For example, use the front-end Strapi code or the Strapi starter code for your movie web application. Then, use npm run develop
to run the development server.
Before running Strapi with the command-line interface (CLI) installation script, ensure to install Node.js and npm or yarn on your computer. Then, create a new project in Strapi using the following command:
npx create-strapi-app@latest my-project --quickstart
The quickstart installation uses an SQL database like PostgreSQL. Alternatively, you can choose a custom installation with your preferred database.
To use Meilisearch locally, you’ll need to first set up and run it. Next, install the plugin by downloading it with npm or yarn. For example, to download a package with npm, add the following code:
npm install strapi-plugin-meilisearch
Next, rebuild your Strapi before developing your project by running the code npm run develop. In this case, your Strapi should be running on the localhost URL in your browser, where you will see a login page.
Once you are directed to the Strapi dashboard, click on Meilisearch -> Settings. Then, enter the URL for the Meilisearch instance. Now, you can add your movie collection to Meilisearch in the Collection tab.
To integrate the search functionality, pass the search input data from the Nav component to the Movies component and add it to the **fetchData**
function. In Movie.js, create a function that returns the search field value:
1
2
3
4
5
const [input, setInput] = useState("");
// use effect block
const pull_data =(dat)=>{
setInput(dat)
}
Then, pass the pull_data function to the Nav component:
<Nav func={pull_data}/>
Next, pass the value from the input field to this prop in Nav.js:
1
2
3
4
5
6
7
8
const Nav = ({func}) => {
const [input, setInput] = useState("");
func(input)
const handleInputChange = (e) => {
setInput(e.target.value);
};
//....
Finally, add input to the fetchData function in Movie.js:
1
2
3
4
5
6
7
const index = await client.getIndex('moviesapp');
const movies = await index.search(input);
setCollection(movies.hits);
};
fetchData();
}, [input]);
Now, you can type a movie title in the search field and receive the relevant information in your web application.
With a headless CMS like Strapi, you can create a seamless digital experience across multiple platforms, such as websites and mobile apps. That’s because a headless system supports omnichannel marketing and speedy content delivery, which is excellent for fast-growing web applications.
A headless CMS enables developers to build a front-end system with their chosen frameworks and easily integrate many tools to improve the user experience. To get the most out of your headless CMS, consider adding on-site search to optimize it.
We hope this article has helped you to understand the benefits of using a headless CMS and how to optimize it with on-site search. Good luck!