How to Build a Search UI with Atlas App Services
This tutorial describes how to set up Atlas Search and use Atlas App Services to build a search UI with Searchbox and ReactiveSearch UI libraries. It also demonstrates how to run Atlas Search queries using the ReactiveSearch App Services function endpoint.
This tutorial takes you through the following steps:
Deploy the ReactiveSearch API as an App Services function.
Host a search UI with App Services's hosting.
Run Atlas Search queries.
Prerequisites
Before you begin:
Ensure that your Atlas cluster meets the requirements described in the Prerequisites.
Create an Atlas Search index named
default
that uses dynamic mappings against thesample_airbnb.listingsAndReviews
collection from the sample datasets. To learn more, see Create an Atlas Search Index.
Deploy the Reactive Search API
In this section, you will deploy the ReactiveSearch API as an App Services function.
Create API keys for your Atlas organization or project and configure the API access list.
Note
You need the public and private API key values to deploy the Reactive Search API.
To create the API keys and configure the API access list for the API keys, see the following pages:
Create an API Key in an Organization
For an organization, you must assign the API key the
Organization Member
organization role or higher and invite the organization API key to your project.Create an API Key for a Project
For a project, you must assign the API key the
Project Owner
project role.
(Optional) Set the following environment variables for you API key.
Note
If you don't set the following variables, you must manually specify your API keys when you deploy the ReactiveSearch API.
Replace
private_key_value
with your private API key and run the following command:private_key={private_key_value} Replace
public_key_value
with your public API key and run the following command:public_key={public_key_value}
Clone the reactivesearch-realm-project
repository.
Run the following command to clone the reactivesearch-realm-project repository:
git clone https://github.com/appbaseio/reactivesearch-realm-function.git
Deploy the ReactiveSearch API.
Note
If you didn't set the environment variables, you must manually specify your API keys and App ID when you deploy the ReactiveSearch API.
Run one of the following commands:
To deploy the ReactiveSearch API without basic authentication enabled, run the following command:
node rs-cli --private-api-key $private_key --api-key $public_key --app-id $app_id To deploy the Reactive Search API with basic authentication enabled replace
my-user
andmy-password
with your username and password, and run the following command:node rs-cli --private-api-key $private_key --api-key &$public_key --app-id $app_id --app-authentication <my-user>:<my-password>
If the deploy succeeds, the output should resemble the following example:
1 Successfully deployed webhook. 2 3 Deployed webhook endpoint : https://us-east-1.aws.webhooks.mongodb-realm.com/api/client/v2.0/app/application-0-tzwlw/service/http_endpoint/incoming_webhook/reactivesearch 4 5 You can make a test request to this webhook using this curl command 6 7 curl -XPOST https://us-east-1.aws.webhooks.mongodb-realm.com/api/client/v2.0/app/application-0-tzwlw/service/http_endpoint/incoming_webhook/reactivesearch \ 8 -H "Content-Type: application/json" \ 9 -d '{ 10 "query": [{ 11 "id": "search", 12 "dataField": "*", 13 "size": 5 14 }], 15 "mongodb": { 16 "db": "'"$database"'", 17 "collection": "'"$collection"'" 18 } 19 }' Copy the webhook URL (highlighted in the previous example) from your output.
(Optional) Copy the curl command from your output, specify a database and collection (highlighted in the following example), and run the command to verify the webhook:
1 curl -XPOST https://us-east-1.aws.webhooks.mongodb-realm.com/api/client/v2.0/app/application-0-tzwlw/service/http_endpoint/incoming_webhook/reactivesearch \ 2 -H "Content-Type: application/json" \ 3 -d '{ 4 "query": [{ 5 "id": "search", 6 "dataField": "*", 7 "size": 5 8 }], 9 "mongodb": { 10 "db": "'"sample_airbnb"'", 11 "collection": "'"listingsAndReviews"'" 12 } 13 }'
Host a Search UI
In this section, you will host a search UI with hosting from App Services. The ReactiveSearch App Services function endpoint exposes a REST API that all of the ReactiveSearch and Searchbox UI libraries use to express the declarative search intent.
Note
This tutorial uses the sample queries in facet-filters
example.
The by-usecases
directory contains several other examples.
Repeat the following steps for any other use cases that you want to
try.
Enable hosting from the App Services UI.
Log in to App Services.
Click Hosting in the left navigation pane.
Click Enable Hosting and complete the steps to enable hosting. To learn more, see Enable Hosting.
Download the search UI files.
Open a terminal and run the following command to clone the searchbox repository:
git clone https://github.com/appbaseio/searchbox.git Run the following command to make a temporary directory.
mkdir tmp Copy the local search UI directory to the temporary directory:
cp -R searchbox/packages/react-searchbox/examples/by-usecases/facet-filters tmp
Upload the search UI files from the build
directory.
Log in to App Services.
Click Hosting in the left navigation pane.
Drag and drop the search UI files from your local
build
directory including thestatic
folder and subfolders onto the Hosting page.Note
The new
index.html
file replaces the existing one.Click Review Draft and Deploy.
This action generates a public URL for your search UI application.
Run Atlas Search Queries
You can now access the hosted URL and run Atlas Search queries using the ReactiveSearch App Services function endpoint.