----

June 16, 2025 · View on GitHub

:toc: :toc-placement!:

= Redis OM Spring + React • https://www.todobackend.com[Todo-Backend]

This project's commits walk you through the process of using Redis OM Spring to build a RESTful API that satisfies the simple web API spec set by the https://www.todobackend.com[Todo-Backend] project using JSON Documents stored in Redis.

The Todo-Backend project defines a simple web API spec - for managing a todo list. Contributors https://www.todobackend.com/contribute.html[implement] that spec using various tech stacks. A https://www.todobackend.com/specs/index.html[spec runner] verifies that each contribution implements the exact same API, by running an automated test suite which https://github.com/TodoBackend/todo-backend-js-spec/blob/master/js/specs.js[defines] the API.

The Todo-Backend project was inspired by the http://todomvc.com/[TodoMVC project].

toc::[] == Cloning the project

This project includes a server-side spec runner https://github.com/TodoBackend/todo-backend-js-spec[todo-backend-js-spec] in the js-spec folder.

==== [source,bash]

git clone git@github.com:redis-developer/redis-om-spring-react-todomvc.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 that satisfies the contract set out by the Todo-Backend project.

For the UI you will then craft a pure JS webapp following the specifications set by the http://todomvc.com/[TodoMVC project] and using the https://reactjs.org[React] JavaScript library for building user interfaces. The webapp can be found under the src/main/webapp and it provides it's own https://github.com/redis-developer/redis-om-spring-react-todomvc/blob/main/src/main/webapp/README.asc[README].

image::https://raw.githubusercontent.com/tastejs/todomvc-app-css/main/screenshot.png[TodoMVC App]

== What You Need

== Setting up a Redis Stack Instance

Before you can build the TodoBackend 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 CE on Docker Locally

Redis OM Spring relies on the power of the [Redis Query Engine][redisearch-url] and [Redis JSON][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/redislabs/edu/todo/controllers/TodosController.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/redislabs/edu/todo/controllers/WebAppController.java.

.src/main/java/com/redislabs/edu/todo/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/tut-spring-data-redis-react-todomvc/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.roms.todo.TodoApplication 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.redislabs.edu:tut-spring-data-redis-react-todomvc >-------- [INFO] Building Spring Data Redis + React.js Spring Boot Todo MVC Tutorial 0.0.1-SNAPSHOT [INFO] --------------------------------[ jar ]--------------------------------- ... [INFO] --- frontend-maven-plugin:1.11.0:install-node-and-npm (install node and npm) @ tut-spring-data-redis-react-todomvc --- [INFO] Installing node version v14.15.3 ... [INFO] Installed node locally. [INFO] Installing npm version 6.14.10 [INFO] Installed npm locally. [INFO] [INFO] --- frontend-maven-plugin:1.11.0:npm (npm install) @ tut-spring-data-redis-react-todomvc --- [INFO] Running 'npm install' in ... [INFO] audited 352 packages in 2.236s [INFO] --- frontend-maven-plugin:1.11.0:webpack (webpack build) @ tut-spring-data-redis-react-todomvc --- [INFO] Running 'webpack.js ' ... [INFO] modules by path ./node_modules/ 1.11 MiB 31 modules [INFO] modules by path ./src/ 18.8 KiB [INFO] modules by path ./src/components/.js 7.65 KiB 5 modules [INFO] ./src/app.js 872 bytes [built] [code generated] [INFO] ./src/context/todos_context.js 4.05 KiB [built] [code generated] [INFO] ./src/services/todos_api.js 5.15 KiB [built] [code generated] [INFO] ./src/hooks/use_on_click_outside.js 1.05 KiB [built] [code generated] [INFO] modules by path ./scss/.scss 50 bytes (javascript) 9.33 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 9.33 KiB [code generated] [INFO] webpack 5.11.1 compiled successfully in 3258 ms ... [INFO] <<< spring-boot-maven-plugin:2.4.1:run (default-cli) < test-compile @ tut-spring-data-redis-react-todomvc <<< [INFO] [INFO] [INFO] --- spring-boot-maven-plugin:2.4.1:run (default-cli) @ tut-spring-data-redis-react-todomvc --- [INFO] Attaching agents: []

. ____ _ __ _ _ /\ / ' __ _ () __ __ _ \ \ \
( ( )__ | '_ | '| | ' / ` | \ \ \
\/ __)| |)| | | | | || (| | ) ) ) ) ' || .__|| ||| |_, | / / / / =========||==============|/=////

:: Spring Boot :: (v3.4.5)

2025-06-16T14:15:01.183-07:00 INFO 46180 --- [ restartedMain] com.redis.roms.todo.TodoApplication : Starting TodoApplication using Java 21.0.4 with PID 46180 ... ... 2025-06-16T14:15:02.614-07:00 INFO 46180 --- [ restartedMain] com.redis.roms.todo.TodoApplication : Started TodoApplication in 1.577 seconds (process running for 1.89)

====

== Play with the App

The Server-Side Endpoint is found at http://localhost:8080/todos and the React webapp is mounted at the root at http://localhost:8080. The Database is preloaded with a few Beatles related Todos. Enjoy!

We've also embedded the server-side spec runner as a git submodule. To launch it, simply open the following HTML file on your browser (Mac open command shown below):

==== [source,bash]

open ./js-spec/index.html

====

In the input field shown enter http://localhost:8080/todos and press return. The spec runner will execute the specs, if everything is working correctly you should see the all the server-side specifications passing.

== 🧭Interact with the API

You can interact with the API directly with CURL or through the http://localhost:8080/swagger-ui/[Swagger interface].

== See Also

The following guides may also be helpful:

== Credit

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