/redis-om-spring-react-todomvc

Tutorial: Redis OM Spring + React TodoMVC

Primary LanguageJavaScript

Redis OM Spring + React • 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 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 implement that spec using various tech stacks. A spec runner verifies that each contribution implements the exact same API, by running an automated test suite which defines the API.

The Todo-Backend project was inspired by the TodoMVC project.

Table of Contents

Cloning the project

This project includes a server-side spec runner todo-backend-js-spec as a git submodule. 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-java/tut-spring-data-redis-react-todomvc.git --recurse-submodules

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 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 TodoMVC project and using the React JavaScript library for building user interfaces. The webapp can be found under the src/main/webapp and it provides it’s own README.

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 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/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.

Example 1. src/main/java/com/redislabs/edu/todo/controllers/WebAppController.java
@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 README.

Building and Launching the Application

You can now launch the app either by running the main() method of com.redislabs.edu.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):

➜ ./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 ::                (v2.4.1)

2021-01-05 12:11:23.560  INFO 88152 --- [  restartedMain] com.redislabs.edu.todo.TodoApplication   : Starting TodoApplication using Java 11.0.9 on Your Box Baby with PID 88152 ...
...
2021-01-05 12:11:25.689  INFO 88152 --- [  restartedMain] com.redislabs.edu.todo.TodoApplication   : Started TodoApplication in 2.717 seconds (JVM running for 3.286)

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):

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 Swagger interface.

See Also

The following guides may also be helpful:

Credit

Created by Brian Sam-Bodden @ Redis