https://github.com/redis-developer/redis-om-autocomplete-demo

Redis OM Spring Autocomplete/Autosuggest Demo
https://github.com/redis-developer/redis-om-autocomplete-demo
Last synced: about 1 year ago
JSON representation
Redis OM Spring Autocomplete/Autosuggest Demo
Host: GitHub
URL: https://github.com/redis-developer/redis-om-autocomplete-demo
Owner: redis-developer
Created: 2022-08-17T17:20:45.000Z (almost 4 years ago)
Default Branch: main
Last Pushed: 2023-03-30T21:55:54.000Z (about 3 years ago)
Last Synced: 2025-05-08T21:44:10.523Z (about 1 year ago)
Language: Java
Size: 522 KB
Stars: 6
Watchers: 2
Forks: 3
Open Issues: 1
Metadata Files:
- Readme: README.asc
Awesome Lists containing this project

README

          :toc:

:toc-placement!:

:imagesdir: ./images

= Redis OM Spring Autocomplete Demo

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

toc::[]

== Cloning the project

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

====

[source,bash]

----

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 https://redis.io[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 https://reactjs.org[React] JavaScript library for building user interfaces. The webapp can be found under

the `src/main/webapp`.

.Redis OM Autocomplete Webapp

image::redis-om-autocomplete-loop.gif['Redis OM Autocomplete Webapp', 640, 400]

== What You Need

* Java 17 or higher (http://www.oracle.com/technetwork/java/javase/downloads/index.html[JDK Java SE 17] or later)

* http://maven.apache.org/download.cgi[Maven 3.2+]

* You can also import the code straight into your IDE:

** https://spring.io/guides/gs/sts[Spring Tool Suite (STS)]

** https://spring.io/guides/gs/intellij-idea/[IntelliJ IDEA]

* Spring Boot 3.0.2

* A https://redis.io[Redis] database with the https://redisearch.io[RediSearch] module version 1.0.0 or higher installed.  We've provided a `docker-compose.yml` with Redis Stack for this. You can also https://redis.com/try-free/[sign up for a free 30Mb database with Redis Enterprise Cloud] - be sure to check the box to configure a Redis Stack instance, follow https://developer.redis.com/create/rediscloud/[this guide].

* Optional: https://redis.com/redis-enterprise/redis-insight/[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):

====

[source,bash]

----

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:

====

[source,bash]

----

spring.redis.host=

spring.redis.port=

spring.redis.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:

====

[source,bash]

----

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 https://start.spring.io[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`.

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

====

[source,java,highlight=1,3,5]

----

@Controller

public class WebAppController {

    @GetMapping

    public String index() {

        return "index";

    }

}

----

<1> `@Controller` marks this class as a Spring MVC controller.

<2> `@GetMapping` flags the `index()` method to serve GET request on the `/` route.

<3> 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 https://github.com/redis-developer/redis-om-autocomplete/blob/main/src/main/webapp/README.asc[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):

====

[source,text]

----

➜ ./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 http://localhost:8080/swagger-ui/index.html[Swagger interface].

== See Also

The following guides may also be helpful:

* https://redis.io/docs/stack/get-started/tutorials/stack-spring/[Redis OM Spring Tutorial]

* https://spring.io/guides/gs/spring-data-reactive-redis/[Accessing Data Reactively with Redis]

* https://spring.io/guides/gs/messaging-redis/[Messaging with Redis]

* https://spring.io/guides/gs/spring-boot/[Building an Application with Spring Boot]

== Credit

Created by https://github.com/bsbodden[Brian Sam-Bodden] @ https://redis.com[Redis]
ecosyste.ms

Data

Tools

Indexes

Applications

Experiments

Awesome

https://github.com/redis-developer/redis-om-autocomplete-demo

Awesome Lists containing this project

README
