Reactive Spring Pet Clinic Example

Difficulty: Beginner

Estimated Time: 15 minutes

Do you want to see a reactive version of the Spring Pet Clinic project? Then, you're at the right place!

This scenario focuses on what the final Reactive Spring Pet Clinic app looks like so you can see where we are going.

What is Reactive Programming?

Reactive Programming is a declarative programming paradigm. It uses non-blocking data streams that propagate changes. You can read more about how the DataStax Cassandra driver supports reactive programming here.

Check out the later scenarios to learn how to do Spring reactive programming and see how we created this app.

Here are the components of the Reactive Pet Clinic app:

We'll deploy the app, step-by-step, from the bottom up.

Let's get started!

ver 0.002

This scenario showed you how to run the example Reactive Spring Pet Clinic app.

In this scenario, we:

Set up the Astra Cassandra database
Deployed the reactive backend API server
Accessed the backend API server with Swagger UI
Deployed the UI app

Now that you see what the app looks like, you may want to explore other scenarios that explain how to create a reactive API.

Your environment is currently being packaged as a Docker container and the download will begin shortly. To run the image locally, once Docker has been installed, use the commands

cat scrapbook_datastax_spring-reactive-pet-clinic/run-the-app_container.tar | docker load

docker run -it /datastax_spring-reactive-pet-clinic/run-the-app:

Restart Scenario

Next Scenario

Step 1 of 3

Set up an Astra Cassandra Database

The first step is to set up the database. We'll use Apache Cassandra™ as a service on Astra because it's a world-class database that is easy to set up. If you don't have an Astra account, take 30 seconds to set one up - it's free.

To deploy the database, open a tab in your browser to astra.datastax.com.

NOTE: If you already have an Astra database, you can just use it! We'll show you in the next step how to customize the app for an existing Astra database.

When you log in the first time you'll find yourself looking at the main Astra details screen that looks like the image below. Fill in the fields with these values:

Compute size: Select free tier
Location: Select a region near you
Database name: petclinic
Keyspace name: spring_petclinic
Database username: astra
Database password: astra2020

First time create database screen

Once you have filled in the form, click on the launch Database button near the bottom. Then, click on the View Database button on the pop-up.

It may take a few minutes for the database to deploy, but you'll get an email when it's ready and you will see the status change to Active.

Active Database

Wow, it's really easy to set up Cassandra using Astra!

Set up the backend API server

In this step, we'll set up the reactive backend API server. Start by cloning the API server project.

git clone https://github.com/clun/spring-petclinic-reactive.git
cd /root/spring-petclinic-reactive

Astra provides a secure connection bundle you will want to download. Here's the command, but notice you will need to replace <paste link here> with a link to the secure bundle. Copy this command and paste it in the terminal window, but DO NOT EXECUTE THE COMMAND YET!!!!!!

curl -L "<paste link here>" > creds.zip

You can find the link on the Astra page by clicking as shown below. Note that this link is time-sensitive, so you need to complete the next couple of steps without delay.

Get Secure Bundle Link

Now, go back to the terminal tab. Paste the link (the one you just copied) into the curl command as indicated - be sure to include the double quotes. The curl command with the link will look something like this.

Curl Command

Once you have pasted the link, execute the curl command.

We need to create an environment variable that has the path of the secure connection bundle you just downloaded.

export ASTRA_DB_BUNDLE='/root/spring-petclinic-reactive/creds.zip'

Now, let's configure the backend to use our Astra database by setting up three more environment variables. If you followed the recommendations when you set up your database, you can just execute the following to create the necessary environment variables. Otherwise, create your own export statements for your database configuration.

Set the value for your keyspace.

export ASTRA_DB_KEYSPACE=spring_petclinic

Set the value of your database username.

export ASTRA_DB_USERNAME=astra

Set the value of your database password.

export ASTRA_DB_PASSWORD=astra2020

Verify the settings are correct.

echo $ASTRA_DB_KEYSPACE
echo $ASTRA_DB_USERNAME
echo $ASTRA_DB_PASSWORD

Launch the backend API server (this can take a minute, so please be patient).

mvn spring-boot:run

Once you see the Pet Clinic ASCII art in the server output (plus another several lines), the API server is ready.

ASCII Art

We can test the APIs using Swagger UI.

What is Swagger UI?

Swagger UI is a tool that describes the API and allows us to interact with it. You can read more here.

Launch Swagger UI in a separate browser tab by clicking on the following.

Use Swagger to access the backend API

Take a look at the Pet Types API. Click on the Pet Types API to view the commands.

Swagger Pet Types API

Let's access the API to list the various pet types. We'll get a list of the pet types by clicking on the GET command.

List Pet Types

Then, click on the Try it out button.

Try it out button

Finally, click the Execute button.

Execute Button

This causes Swagger to access the Pet Clinic API and display the results.

Pet Types Results

Woot! The Reactive Spring Pet Clinic backend API server is working!

Attach a UI to the backend server

Let's attach an Angular UI to our Pet Clinic API.

What is Angular?

Angular is a TypeScript-based open-source web application framework from Google. You can read more here.

Start by cloning and setting up the Pet Clinic UI project in a second terminal by clicking the following.

git clone https://github.com/spring-petclinic/spring-petclinic-angular.git
cd spring-petclinic-angular
npm install -g n
n stable
npm install > /dev/null 2> /dev/null

We need to configure the UI to attach to our backend server. Open the environment.ts by clicking on the following.

Open spring-petclinic-angular/src/environments/environment.ts

Because we are running in Katacoda, we need to alter the base REST_API_URL to point at the external URL for the Katacoda virtual machine. Just click on the following to make this change.

https://[[HOST_SUBDOMAIN]]-9966-[[KATACODA_HOST]].environments.katacoda.com

Now, we can build and launch the UI server.

ng build
ng serve --port 4200 --host 0.0.0.0 --disable-host-check

Once the server is running, click on the following to open the UI in a different browser tab.

check out the app

You can access the API to get the list of pet types by clicking on the Pet Types tabs.

UI Pet Types

Feel free to explore the other parts of the app.

Excellent! you have the full reactive stack running.

Terminal

cd <directory>	Change directory
ls	List directory
echo 'contents' > <file>	Write contents to a file
cat <file>	Output contents of file

i	In Command Mode	Change into Insert Mode, you can now insert and edit text in the file
esc	In Insert Mode	Change into Command Mode, you can now execute commands
:wq	In Command Mode	Save and Exit

Welcome!

Reactive Spring Pet Clinic Example

Congratulations!

You've completed the scenario!

Scenario Rating

Steps