How to Build a Search UI with Atlas App Services

Create API keys for your Atlas organization or project and configure the API access list.

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.

1. Replace private_key_value with your private API key and run the following command:

   private_key={private_key_value}

2. Replace public_key_value with your public API key and run the following command:

   public_key={public_key_value}

Create an App Services app and copy its ID.

1. Go to App Services.

2. Create an app.

3. Find Your App ID.

4. Copy the App ID from the application dashboard.

(Optional) Set the environment variable for your App Services app.

Replace app_id_value with your App Services App ID and run the following command:

app_id={app_id_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

Install dependencies.

1. Change the working directory:

   cd reactivesearch-realm-function

2. Run one of the following commands to install the project dependencies:

   yarn

   npm install

Deploy the ReactiveSearch API.

1. 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 and my-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.data.mongodb-api.com/app/application-0-iuzth/endpoint/http_endpoint_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.data.mongodb-api.com/app/application-1-ftcqo/endpoint/http_endpoint_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
   }'

2. Copy the HTTPS endpoint (formerly webhook) URL (highlighted in the previous example) from your output.

3. (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 HTTPS endpoint:

   1
   curl -XPOST https://us-east-1.aws.data.mongodb-api.com/app/application-1-ftcqo/endpoint/http_endpoint_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
   }'

Download the search UI files.

1. Open a terminal and run the following command to clone the searchbox repository:

   git clone https://github.com/appbaseio/searchbox.git

2. Run the following command to make a temporary directory.

   mkdir tmp

3. Copy the local search UI directory to the temporary directory:

   cp -R searchbox/packages/react-searchbox/examples/by-usecases/facet-filters tmp

Edit the App.js file.

1. Open the App.js file from the following directory:

   /tmp/facet-filters/src

2. Replace the URL on line 11 with your HTTPS endpoint (formerly webhook) URL and save the file.

Build the search UI.

1. Run the following command to change the working directory:

   cd ../

2. Run one of the following commands to build the search UI application:

   yarn && yarn build

   npm install && npm run build

   The command places the search UI files in the /tmp/facet-filters/build directory.

Deploy a React Site with Vercel.

To learn more, see How to Deploy a React Site with Vercel.

Example:

Run the following command and follow the prompts:

vercel

Open the hosted page.

Copy and paste the returned preview URL into your browser.

View Atlas Search query results.

View the search query results for the facet-filter use case in the Searchbox UI.