This is a generated search experience created with Search UI.
To set up and run this project, follow the instructions below.
Requires npm.
Dependencies:
- Node v16.13.0
One can leverage NVM to install Node before proceeding to start the application by running the following commands:
# Run this to install Node 16.13.0
nvm install 16.13.0
# Run this to use the installed Node version
nvm use 16.13.0Run the following commands to start this application:
# Run the `cd` command to change the current directory to the
# location of your downloaded Reference UI. Replace the path
# below with the actual path of your project.
cd ~/Downloads/app-search-reference-ui
# Run this to set everything up
npm install
# Run this to start your application and open it up in a new browser window
npm startThe project is configured via a JSON config file. This file has been automatically generated for you when downloading this project. If you would like to make configuration changes, there is no need to regenerate this app from your App Search Dashboard. Additional configuration can be made by modifying that file.
You can simply open up the engine.json file, update the options, and then restart this app.
The following is a complete list of options available for configuration in engine.json.
| option | value type | required/optional | source |
|---|---|---|---|
engineName |
String | required | Found in your App Search Dashboard. |
endpointBase |
String | required* | (*) Elastic Enterprise Search deployment URL, example: "http://127.0.0.1:3002". |
searchKey |
String | required | Found in your App Search Dashboard. |
searchFields |
Array[String] | required | A list of fields that will be searched with your search term. |
resultFields |
Array[String] | required | A list of fields that will be displayed within your results. |
querySuggestFields |
Array[String] | optional | A list of fields that will be searched and displayed as query suggestions. |
titleField |
String | optional | The field to display as the title in results. |
urlField |
String | optional | A field with a url to use as a link in results. |
sortFields |
Array[String] | optional | A list of fields that will be used for sort options. |
facets |
Array[String] | optional | A list of fields that will be available as "facet" filters. Read more about facets within the App Search documentation. |
To embed this application into a website, it can be built into static assets using the following command:
npm run build
This will create two files in the build directory:
build/static/js/main.<hash>.js
build/static/css/main.<hash>.css
Include the built static assets as well as an element with id="root". For example:
<!DOCTYPE html>
<html lang="en">
<head>
<script defer="defer" src="/static/js/main.<hash>.js"></script>
<link href="/static/css/main.<hash>.css" rel="stylesheet" />
</head>
<body>
<div id="root" class="app-container"></div>
</body>
</html>This app can be easily published to any server as static assets and served. We recommend Netlify, but you have other options as well.
To deploy:
npm run build
npm install netlify-cli -g
netlify deploy # enter ./build as the deploy path
You'll then simply follow the command prompt to log into Netlify and deploy your site. This can be completed in just a few minutes.
If you are embedding this app inside of another page, and you would like to
source the configuration from outside of the engine.json file,
you can simply write the configuration directly to window.appConfig.
You can follow the previous steps, but then you will need to create and configure engine.json.
To do so, make a copy of engine.json.example,
rename it to engine.json and configure it with your Engine's specific details.
cp src/config/engine.json.example src/config/engine.jsonThis project is built with Search UI, which is a React library for building search experiences. If you're interested in using this project as a base for your own, most of what you'll need can be found in the Search UI documentation.
If something is not working as expected, please open an issue.
You can checkout the Elastic Enterprise Search community discuss forums.
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent