How to Quickly Set Up Elastic App Search with Vagrant and Deploy a Custom Search UI

What is Elastic App Search?

Elastic App Search is a powerful set of APIs and developer tools built on Elasticsearch that enables developers to add robust, user‑focused search capabilities to applications with minimal effort.

Environment Preparation

The tutorial uses a Vagrant + VirtualBox environment to spin up an Elasticsearch 7.6.1 server and App Search 7.6.1 instance. Required tools:

macOS 10.15.4

Vagrant 2.2.7

VirtualBox 6.0.15

CentOS‑8 Vagrant box (bento/centos-8)

JDK 11.0.6

All provisioning scripts (Vagrantfile and pre‑install‑ES.sh) are available at https://github.com/martinliu/elastic-labs/.

vagrant up
vagrant ssh

After the VM boots, note the generated elastic user password displayed in the console.

Installing App Search

Install JDK 11:

sudo rpm -ivh /vagrant/rpm/jdk-11.0.6_linux-x64_bin.rpm

Install the App Search package: sudo rpm -ivh /vagrant/rpm/app-search-7.6.1.rpm Inspect the default configuration file:

sudo more /usr/share/app-search/config/app-search.yml

Update the file with the Elasticsearch credentials and custom settings:

allow_es_settings_modification: true
elasticsearch.host: http://192.168.50.10:9200
elasticsearch.username: elastic
elasticsearch.password: eczHJ7NPrsO1B1BRA8SS
app_search.external_url: http://192.168.50.10:3002
app_search.listen_host: 192.168.50.10
app_search.listen_port: 3002
log_directory: /var/log/app-search
filebeat_log_directory: /var/log/app-search

Copy the edited file back to the default location and start the service:

sudo cp /vagrant/appsearch/app-search.yml /usr/share/app-search/config/app-search.yml
sudo /usr/share/app-search/bin/app-search

The startup log prints the default credentials (e.g., username: app_search, password: vjqmjhv2s5rzixjc), which are needed to log in at http://192.168.50.10:3002.

Creating a Search Engine

In the App Search UI, create a new engine named games. Record the generated private‑key and the API endpoint http://192.168.50.10:3002/api/as/v1/ for later use.

Indexing Data via API

A JSON file video-games.json containing over 4,000 game records is stored in the repository. The following Ruby script uses the elastic-app-search client to batch‑index the data in chunks of 100 documents.

# gem install elastic-app-search progress_bar
require 'elastic-app-search'
require 'json'
require 'progress_bar'

API_ENDPOINT = 'http://192.168.50.10:3002/api/as/v1/'
API_KEY = 'private-...'
ENGINE_NAME = 'games'

client = Elastic::AppSearch::Client.new(api_key: API_KEY, api_endpoint: API_ENDPOINT)
file = File.read('./video-games.json')
data = JSON.parse(file)
bar = ProgressBar.new(data.count / 100)

data.each_slice(100) do |slice|
  client.index_documents(ENGINE_NAME, slice)
  bar.increment!
end

Running the script produces progress output and indexes all documents.

➜  app-search git:(master) ✗ ruby upload.rb
[##########################################################################] [40/40] [100.00%] [00:54] [00:00] [ 0.73/s]

Modifying the Schema

The schema can be edited at any time without affecting the front‑end experience. In the UI, add three new fields and a language field, then click Update Type to apply.

Search Settings

Creating Synonyms

Add a synonym for “Pokemon” → “Pikachu” in the Synonyms tab.

Adjusting Field Boosts

Increase the functional boost for global_sales and set a weight of 3 for the Name field, observing the impact in real‑time.

Creating Curations

Pin a specific result (e.g., pokemon‑ranger‑ds‑2006) to the top of the results for the keyword “pokemon”.

Building the User‑Facing Search UI

The Reference UI provides a ready‑made front‑end. After customizing, click Create Preview , then Download ZIP Package to obtain the source code.

Install dependencies and start the development server:

npm install
npm start

When satisfied, build a production bundle:

npm run build

Deploying the UI

Copy the built files to an Nginx server and serve them:

sudo yum install -y nginx
sudo mv -f build/* /usr/share/nginx/html

Visit http://192.168.50.10/index.html to see the final search interface.

Conclusion

Using Elastic App Search, developers can rapidly create a customized search system, fine‑tune backend relevance logic, and deploy a polished front‑end UI with minimal friction.