test-with-ui.md

title	meta_title	meta_description	keywords	sidebar	nestedSidebar
Testing with Search UI	Run a search app with Atlas Search	Run a search app with Atlas Search and React Searchbox UI library.	overview atlas-search search-ui react-searchbox mongodb realm	docs	atlas-search

Here's a faceted search experience powered by Atlas Search and React Searchbox UI library.

The React app is built using the @appbaseio/react-searchbox package.

<iframe src="https://codesandbox.io/embed/demo-project-searchbox-c7wxz6?fontsize=14&hidenavigation=1&theme=dark" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" title="romantic-bird-spqfr" allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts" ></iframe>

Replace the default index, url and mongodb.db, mongodb.collection keys to point to the Realm function URL and your MongoDB database, collection and search index.

    index="default"
    url="https://us-east-1.aws.webhooks.mongodb-realm.com/api/client/v2.0/app/public-demo-skxjb/service/http_endpoint/incoming_webhook/reactivesearch"
    mongodb={{
      db: "sample_airbnb",
      collection: "listingsAndReviews"
    }}

API reference for the components is present over here:

• Searchbox
• Searchbase
• SearchComponent

For more examples (currently in REST format), refer to the search examples guide over here.

For more examples with React, refer to the Search examples with React guide over here.

For more examples with Vue, refer to the Search examples with Vue guide over here.

This search UI can be deployed using MongoDB App Service's static hosting feature with one CLI command and a click. Read the Search UI hosting guide over here.