Skip to main content
Version: 2.5.0

Quickstart Guide

In this guide, we will be using odo to create a to-do list application, with the following:

  • ReactJS for the frontend
  • Java Spring Boot for the backend
  • PostgreSQL to store all persistent data

At the end of the guide, you will be able to list, add and delete to-do items from the web browser.

Prerequisites

Clone the quickstart guide

Clone the quickstart repo from GitHub:

git clone https://github.com/odo-devfiles/odo-quickstart
cd odo-quickstart

Create a project

We will create a project named quickstart on the cluster to keep all quickstart-related activities separate from rest of the cluster:

odo project create quickstart

Create the frontend Node.JS component

Our frontend component is a React application that communicates with the backend component.

We will use the catalog command to list all available components and find nodejs:

odo catalog list components

Example output of odo catalog list components:

Odo Devfile Components:
NAME DESCRIPTION REGISTRY
nodejs Stack with Node.js 14 DefaultDevfileRegistry
nodejs-angular Stack with Angular 12 DefaultDevfileRegistry
nodejs-nextjs Stack with Next.js 11 DefaultDevfileRegistry
nodejs-nuxtjs Stack with Nuxt.js 2 DefaultDevfileRegistry
...

Pick nodejs to create the frontend component:

cd frontend
odo create nodejs frontend

Create a URL in order to access the component in the browser:

odo url create --port 3000 --host <CLUSTER-HOSTNAME>

Minikube users: Use minikube ip to find out the hostname and then use <MINIKUBE-HOSTNAME>.nip.io for --host.

Push the component to the cluster:

odo push

The URL will be listed in the odo push output, or can be found in odo url list.

Browse the site and try it out! Note that you will not be able to add, remove or list the to-dos yet, as we have not linked the frontend and the backend components yet.

Create the backend Java component

The backend application is a Java Spring Boot based REST API which will list, insert and delete to-dos from the database.

Find java-springboot in the catalog:

odo catalog list components

Example output of odo catalog list components:

Odo Devfile Components:
NAME DESCRIPTION REGISTRY
java-quarkus Quarkus with Java DefaultDevfileRegistry
java-springboot Spring Boot® using Java DefaultDevfileRegistry
java-vertx Upstream Vert.x using Java DefaultDevfileRegistry
...

Let's create the component below:

cd ../backend
odo create java-springboot backend
odo url create --port 8080 --host <CLUSTER-HOSTNAME>
odo push

Note, you will not be able to access http://<YOUR-URL>/api/v1/todos yet until we link the backend component to the database service.

Create the Postgres service

Use odo catalog list services to list all available operators.

By default, Operator Lifecycle Manager (OLM) includes no Operators and they must be installed via Operator Hub

Install the Postgres Operator on the cluster:

kubectl create -f https://operatorhub.io/install/postgresql.yaml

Find postgresql in the catalog:

odo catalog list services

Example output of odo catalog list services:

Services available through Operators
NAME CRDs
postgresoperator.v5.0.3 PostgresCluster

If you don't see the PostgreSQL Operator listed yet, it may still be installing. Check out our Operator troubleshooting guide for more information.

Create the service usng the provided postgrescluster.yaml file from CrunchyData's Postgres guide:

odo service create --from-file ../postgrescluster.yaml

The service from postgrescluster.yaml should now be added to your devfile.yaml, do a push to create the database on the cluster:

odo push

Now we will link the the backend component (Java API) to the service (Postgres).

First, see if the service has been deployed:

odo service list
NAME MANAGED BY ODO STATE AGE
PostgresCluster/hippo Yes (backend) Pushed 3m42s

Link the backend component with the above service:

odo link PostgresCluster/hippo

Push the changes and odo will link the service to the component:

odo push

Now your service is linked to the backend component!

For our last step, we will now link the backend Java component (which also uses the Postgres service) and the frontend Node.JS component.

This will allow both to communicate with each other in order to store persistent data.

Change to the frontend component directory and link it to the backend:

cd ../frontend
odo link backend

Push the changes:

odo push

We're done! Now it's time to test your new multi-component and service application.

Testing your application

Frontend Node.JS component

Find out what URL is being used by the frontend:

odo url list
Found the following URLs for component frontend
NAME STATE URL PORT SECURE KIND
http-3000 Pushed http://<URL-OUTPUT> 3000 false ingress

Visit the link and type in some to-dos!

Backend Java component

Let's see if each to-do is being stored in the backend api and database.

Find out what URL is being used by the backend:

odo url list
Found the following URLs for component backend
NAME STATE URL PORT SECURE KIND
8080-tcp Pushed http://<URL-OUTPUT> 8080 false ingress

When you curl or view the URL on your browser, you'll now see the list of your to-dos:

curl http://<URL-OUTPUT>/api/v1/todos
[{"id":1,"description":"hello"},{"id":2,"description":"world"}]

Further reading

Want to learn what else odo can do? Check out the Tutorials on the sidebar.