Redis OM Spring Autocomplete Demo

A Spring Boot demo of autocomplete functionality using Redis OM Spring.

Table of Contents

Cloning the project
What You Will build
What You Need
Setting up a Redis Stack Instance
- 🥞Redis Stack on Docker Locally
- 🌥️Redis Cloud
Spring Boot Skeleton
API Controller
Entry point into the React App
Building and Launching the Application
Play with the App
🧭Interact with the API
See Also
Credit

Cloning the project

To check out the project use the following git command to ensure the submodule is cloned along with the main repository:

git clone git@github.com:redis-developer/redis-om-autocomplete-demo.git

What You Will build

You will build an application that uses Redis JSON document and the @Document annotation to provide a Redis-powered data layer for a Spring Boot API backend serving Airport Codes and States using RediRediSearch auto-complete engine.

The UI is a simple JS webapp using the React JavaScript library for building user interfaces. The webapp can be found under the src/main/webapp.

Figure 1. Redis OM Autocomplete Webapp

What You Need

Java 17 or higher (JDK Java SE 17 or later)
Maven 3.2+
You can also import the code straight into your IDE:
- Spring Tool Suite (STS)
- IntelliJ IDEA
Spring Boot 3.0.2
A Redis database with the RediSearch module version 1.0.0 or higher installed. We’ve provided a docker-compose.yml with Redis Stack for this. You can also sign up for a free 30Mb database with Redis Enterprise Cloud - be sure to check the box to configure a Redis Stack instance, follow this guide.
Optional: RedisInsight, a free data visualization and database management tool for Redis. When downloading RedisInsight, be sure to select version 2.x.

Setting up a Redis Stack Instance

Before you can build the API, you need to set up the Redis Stack instance that will host our data. The server is freely available at https://redis.io/download.

There are many ways to get going with Redis but by far the three easiest are:

🥞Redis Stack on Docker Locally

Redis OM Spring relies on the power of the [RediSearch][redisearch-url] and [RedisJSON][redis-json-url] modules. We have provided a docker compose YAML file for you to quickly get started. To launch the docker compose application, on the command line (or via Docker Desktop), clone this repository and run (from the root folder):

docker compose up

This launches Redis Stack; Redis Stack Server on port 6379, and Redis Insight 8001.

🌥️Redis Cloud

If you’re using Redis Enterprise Cloud, you’ll need the hostname, port number, and password for your database. Use these to set the application.properties configuration like this:

spring.redis.host=<host>
spring.redis.port=<port>
spring.redis.password=<password>

For example if your Redis Enterprise Cloud database is at port 9139 on host enterprise.redis.com and your password is 5uper53cret then you’d set REDIS_OM_URL as follows:

spring.redis.host=enterprise.redis.com
spring.redis.port=9139
spring.redis.password=5uper53cret

Spring Boot Skeleton

The app starting skeleton was created using the Spring Initializr.

API Controller

The main API controller can be found at src/main/java/com/redis/om/autocomplete/controllers/AirportsController.java.

Entry point into the React App

We provide a Spring MVC controller that serves the HTML template hosting the React App. This controller can be found at src/main/java/com/redis/om/autocomplete/controllers/WebAppController.java.

Example 1. src/main/java/com/redis/om/autocomplete/controllers/WebAppController.java

@Controller
public class WebAppController {
    @GetMapping
    public String index() {
        return "index";
    }
}

@Controller marks this class as a Spring MVC controller.
@GetMapping flags the index() method to serve GET request on the / route.
It returns index as the name of the template, which Spring Boot’s autoconfigured view resolver will map to src/main/resources/templates/index.html.

Learn more about the React App in its README.

Building and Launching the Application

You can now launch the app either by running the main() method of com.redis.om.autocomplete.AutocompleteApplication inside your IDE or by typing ./mvnw spring-boot:run on the command line. (mvnw.bat for Windows users).

The output should show both the webapp (React) being bundled and the server-side (Spring Boot.. duh):

➜ ./mvnw clean spring-boot:run
[INFO] Scanning for projects...
[INFO]
[INFO] -------------------< com.redis.om:autocomplete-demo >-------------------
[INFO] Building Redis OM Spring Autocomplete Demo 0.0.1-SNAPSHOT
[INFO] --------------------------------[ jar ]---------------------------------
[INFO]
[INFO] --- maven-clean-plugin:3.2.0:clean (default-clean) @ autocomplete-demo ---
[INFO] Deleting /Users/bsb/Code/redis-om-autocomplete-demo/target
[INFO]
[INFO] >>> spring-boot-maven-plugin:2.7.0:run (default-cli) > test-compile @ autocomplete-demo >>>
[INFO]
[INFO] --- frontend-maven-plugin:1.12.1:install-node-and-npm (install node and npm) @ autocomplete-demo ---
[INFO] Installing node version v18.6.0
[INFO] Unpacking /Users/bsb/.m2/repository/com/github/eirslett/node/18.6.0/node-18.6.0-darwin-x64.tar.gz into /Users/bsb/Code/redis-om-autocomplete-demo/target/node/tmp
[INFO] Copying node binary from /Users/bsb/Code/redis-om-autocomplete-demo/target/node/tmp/node-v18.6.0-darwin-x64/bin/node to /Users/bsb/Code/redis-om-autocomplete-demo/target/node/node
[INFO] Installed node locally.
[INFO] Installing npm version 8.17.0
[INFO] Unpacking /Users/bsb/.m2/repository/com/github/eirslett/npm/8.17.0/npm-8.17.0.tar.gz into /Users/bsb/Code/redis-om-autocomplete-demo/target/node/node_modules
[INFO] Installed npm locally.
[INFO]
[INFO] --- frontend-maven-plugin:1.12.1:npm (npm install) @ autocomplete-demo ---
[INFO] Running 'npm install' in /Users/bsb/Code/redis-om-autocomplete-demo/src/main/webapp
[INFO]
[INFO] up to date, audited 525 packages in 1s
[INFO]
[INFO] 36 packages are looking for funding
[INFO]   run `npm fund` for details
[INFO]
[INFO] found 0 vulnerabilities
[INFO]
[INFO] --- frontend-maven-plugin:1.12.1:webpack (webpack build) @ autocomplete-demo ---
[INFO] Running 'webpack.js ' in /Users/bsb/Code/redis-om-autocomplete-demo/src/main/webapp
[INFO] asset bundle.js 1.43 MiB [compared for emit] (name: app) 1 related asset
[INFO] asset bundle.css 231 KiB [compared for emit] (name: app) 1 related asset
[INFO] Entrypoint app 1.65 MiB (1.92 MiB) = bundle.css 231 KiB bundle.js 1.43 MiB 2 auxiliary assets
[INFO] orphan modules 609 KiB (javascript) 975 bytes (runtime) [orphan] 25 modules
[INFO] runtime modules 1.25 KiB 6 modules
[INFO] modules by path ./node_modules/ 1.34 MiB 98 modules
[INFO] modules by path ./src/ 7.43 KiB
[INFO]   ./src/app.js 5.5 KiB [built] [code generated]
[INFO]   ./src/services/airports_api.js 1.92 KiB [built] [code generated]
[INFO] modules by path ./scss/*.scss 50 bytes (javascript) 230 KiB (css/mini-extract)
[INFO]   ./scss/app.scss 50 bytes [built] [code generated]
[INFO]   css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./scss/app.scss 230 KiB [built] [code generated]
[INFO] webpack 5.74.0 compiled successfully in 6801 ms
...

  .   ____          _            __ _ _
 /\\ / ___'_ __ _ _(_)_ __  __ _ \ \ \ \
( ( )\___ | '_ | '_| | '_ \/ _` | \ \ \ \
 \\/  ___)| |_)| | | | | || (_| |  ) ) ) )
  '  |____| .__|_| |_|_| |_\__, | / / / /
 =========|_|==============|___/=/_/_/_/
 :: Spring Boot ::                (v2.7.0)

2022-08-17 09:00:53.060  INFO 49420 --- [  restartedMain] c.r.o.a.AutocompleteApplication          : Starting AutocompleteApplication using Java 17.0.3 on BSB.local with PID 49420 (/Users/bsb/Code/redis-om-autocomplete-demo/target/classes started by briansam-bodden in /Users/bsb/Code/redis-om-autocomplete-demo)
...
2022-08-17 09:00:56.560  INFO 49420 --- [  restartedMain] c.r.om.spring.RedisModulesConfiguration  : Creating Indexes......
2022-08-17 09:00:56.566  INFO 49420 --- [  restartedMain] c.r.om.spring.RedisModulesConfiguration  : Found 1 @Document annotated Beans...
2022-08-17 09:00:56.566  INFO 49420 --- [  restartedMain] c.r.om.spring.RedisModulesConfiguration  : Found @Document annotated class: com.redis.om.autocomplete.domain.Airport
2022-08-17 09:00:56.574  INFO 49420 --- [  restartedMain] c.r.om.spring.RedisModulesConfiguration  : Found 0 @RedisHash annotated Beans...
2022-08-17 09:00:56.581  INFO 49420 --- [  restartedMain] c.r.o.a.AutocompleteApplication          : Started AutocompleteApplication in 3.903 seconds (JVM running for 4.358)
2022-08-17 09:09:31.316  INFO 49420 --- [nio-8080-exec-1] o.a.c.c.C.[Tomcat].[localhost].[/]       : Initializing Spring DispatcherServlet 'dispatcherServlet'
2022-08-17 09:09:31.316  INFO 49420 --- [nio-8080-exec-1] o.s.web.servlet.DispatcherServlet        : Initializing Servlet 'dispatcherServlet'
2022-08-17 09:09:31.317  INFO 49420 --- [nio-8080-exec-1] o.s.web.servlet.DispatcherServlet        : Completed initialization in 1 ms

Play with the App

The Server-Side Endpoint is found at 0 and the React webapp is mounted at the root at http://localhost:8080. The Database is preloaded with a list of Airports containing the airport name, code and state. Enjoy!

🧭Interact with the API

You can interact with the API directly with CURL or through the Swagger interface.

Credit

Created by Brian Sam-Bodden @ Redis

redis-developer/redis-om-autocomplete-demo