The frontend of Search controls what the user sees when they ask a question, including how the results page is structured, what each results card looks like, and other optional components like facets. The Search Frontend Theme is the low-code option that allows you to quickly build a frontend using JSON, HTML, CSS, and JavaScript. It must be connected to a Search backend to populate search results.

Components of the Frontend

There are three components of the Search Frontend Theme: the Search UI SDK, the Theme, and Jambo.

The Search UI SDK JavaScript Library

The Search UI SDK is the JavaScript library of components that define the frontend Search experience, such as the Search Bar, Universal Search Results, and Direct Answers.

The Theme

The Theme is a bundled package of files and code templates that sets up the basic structure and functionality for an entire Search experience.

To access the Theme, you must use a solution template called the "Search Jambo Template." A solution template is a pre-built configuration you can apply to your account. The Search Jambo Template contains the Answers Hitchhiker Theme — all the files and code structure for results pages and result cards. The Theme files translate the configuration files in your code repository to use the Search UI SDK components, so you don't have to manually add or create components from scratch. From there, you can add customizations like changing branding or adding custom cards.

Jambo

Jambo is a static site generator that takes all the files in your repository — including theme files, templates, and customizations — and creates the static HTML pages that an end user actually sees. Jambo also provides commands that enable you to easily interact with the theme, such as by adding verticals, adding cards, and overriding the theme. Because the theme itself is complex and fragile, Jambo handles direct manipulation by creating copies of the theme template files for you.

The Jambo Build Process

If you're building a Search experience with the Theme and Jambo, you'll go through these steps:

1. Create a repository that houses your code.
2. Update files in that repository.
3. Preview those changes locally.
4. Commit your changes.
5. The system attempts to "build."
6. The system "deploys" or "publishes."

Jambo and Jamstack

At its core, Jambo is a static site generator (SSG) that relies on the JAM architecture (Jamstack | JavaScript, APIs, and Markup). Written in JavaScript, Jambo operates on a set of JSON files and Handlebars templates to produce static HTML files that can be served from a CDN.

Why Jamstack?

1. Better performance. Pages are generated at deploy-time and delivered over a CDN — the most recent version of every page is accessible from multiple points of presence across the globe, delivering fast page load speed and continuous updates.
2. Lower cost of scaling. A Jamstack web app uses fewer resources since servers and databases are not necessarily needed. CDNs also help with scalability by serving deployments from anywhere.
3. Better security. Traditional server-side applications expose lots of APIs and services, all at risk of attack. With Jamstack, you're using static files — read-only and not susceptible to the same types of attacks. There is no code to run and therefore no vulnerabilities to exploit.
4. Better developer experience. There is no tight coupling between the application backend and frontend, giving developers more targeted development and debugging.

For additional reading: jamstack.org/resources, jamstack.wtf, snipcart.com/blog/jamstack

Jambo vs. the Theme

Jambo itself doesn't know anything about the Yext Search UI SDK. Its sole purpose is to build the website quickly, efficiently, and easily from static templates. The backend servers exist only to provide data to the page — in this case, search results from the search system.

The Theme is where all the knowledge about setting up the SDK and API lives. Think of the Theme as an architect and Jambo as the contractor. The architect specifies the overall design with blueprints; the contractor takes materials and blueprints and produces the finished product. The Theme leverages Jambo's templating power to convert intuitive markup and configuration files into raw HTML files that make all the needed calls to the Search UI SDK. It takes all of the complexity out so that you don't need to be a developer to build an experience.

Jambo Commands

To do things like add pages or override the theme, you will use "Jambo Commands." Jambo is a Command-Line Interface (CLI) — in the Yext UI you're using it under the hood in the Code Editor. You can access Jambo Commands by clicking on Tools > Jambo Commands in the Code Editor.

Jambo has a number of built-in commands, and the Answers Hitchhikers Theme adds additional custom commands to make developing Search faster and easier.

Create a Pages Site with Jambo

Search frontends are housed in the Pages architecture. Out of the box, Yext uses Git to manage your Search code. When you're ready to build a search experience, you'll create a Git repository in GitHub by creating a site in Pages and adding a repository with the Search Jambo Template, which generates a GitHub repository with all the pre-built files you need. In many cases, this step will be done for you if you are starting with a Hitchhikers Challenge or a Solution Template.

1. Click Pages in the navigation bar and click All Sites.
2. Click Add New Site in the top right corner.

3. In the Add a New Site modal, choose Pages or Classic Pages Site (Legacy). Yext recommends the standard Pages path. Steps differ depending on the option:

   Pages:

   1. Choose where to store your repository. When building with Jambo and the Theme, select the option for Yext to manage the GitHub repo.

      

   2. Click Next.
   3. Fill in the name of your site. This is only shown internally.
   4. Select Create New Repository.
   5. Name your repo. This will be the name of the GitHub repo associated with the site. It is automatically filled in based on your site name and account ID.
   6. Keep Search Jambo Template selected. This creates a repo with all the files you need to build your Search frontend.

   7. Click Create Site. You'll see a build in progress. Once it completes successfully, you'll have your first deploy with links for preview, staging, and production.

      

   Classic Pages (Legacy):

   1. At the bottom of the Add New Site modal, click the add a Classic site link.
   2. Enter the name of your site.

   3. Click Continue. You will be directed to the Site screen.

      

   4. Click Create Repository at the bottom of the screen.
   5. Enter the name of your repo.
   6. Keep Search Jambo Template selected.
   7. Click Continue.
4. Now you are ready to open the Code Editor and start building your experience.