Run the Cassandra Spring Reactive Pet Clinic Application

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!

This scenario is also available on our datastax.com/dev site, where you can find many more resources to help you succeed with Apache Cassandra™.

ver 0.004

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. Or, create a new keyspace. We'll show you in the next step how to customize the app for existing Astra database settings.

When you log in the first time you'll find yourself looking at the main Astra dashboard screen that looks like the image below. click on the Add Database button.

Astra dashboard

Configure your database by selecting the Free plan.

Select free plan

Next, select a provider.

Select provider

Now, select a region near you for your database and click the Configure button.

Select region

Fill in the Configure and Create Database fields with the following values, then click the Create Database button.

Database name: petclinic
Keyspace name: spring_petclinic
Database username: astra
Database password: astra2020

Configure and Create Database

You will see the dashboard with your newly created database. While the database is initializing, the CONNECT button is inactive, but becomes active once the database is ready.

Connect Database dashboard

It may take a minute for the database to deploy, but you'll get an email when it's ready.

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/spring-petclinic/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

To get the link to the secure connection bundle, follow these steps. 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 (if your username is not astra, please modify the following export command accordingly).

export ASTRA_DB_USERNAME=astra

Set the value of your database password (if your password is not astra2020, please modify the following export command accordingly).

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 output like the following, the API server is ready.

INFO  org.springframework.samples.petclinic.PetClinicApplication : Started PetClinicApplication in 10.736 seconds (JVM running for 11.347)

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!

Run the Cassandra Spring Reactive Pet Clinic Application

Congratulations!

You've completed the scenario!

Scenario Rating

Steps