Skip to main contentCloud Native Reference Implementation

Deploy Storefront (Quarkus Version) locally on your machine

Introduction

Storefront is a simple shopping application that displays a catalog of antique computing devices, where users can search and buy products. It has a Web interface, and it relies on BFF (Backend for Frontend) services to interact with the backend services.

Pre-requisites:

For more details on installation, check this out.

Running the application locally

Let us now deploy all the microservices of our storefront one by one locally.

Inventory

  • Clone inventory repository
git clone https://github.com/ibm-garage-ref-storefront/inventory-ms-quarkus.git
cd inventory-ms-quarkus

Deploy MySQL database


# Start a MySQL Container with a database user, a password, and create a new database
docker run --name inventorymysql \
-e MYSQL_ROOT_PASSWORD=admin123 \
-e MYSQL_USER=dbuser \
-e MYSQL_PASSWORD=password \
-e MYSQL_DATABASE=inventorydb \
-p 3306:3306 \
-d mysql

If it is successfully deployed, you will see something like below.

$ docker ps
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
e87f041c7da7 mysql "docker-entrypoint.s…" 2 hours ago Up 2 hours 0.0.0.0:3306->3306/tcp, 33060/tcp inventorymysql
  • Now let us populate the MySQL with data.

Firstly, ssh into the MySQL container.

docker exec -it inventorymysql bash
  • Now, run the below command for table creation.
mysql -udbuser -ppassword
  • This will take you to something like below.
root@e87f041c7da7:/# mysql -udbuser -ppassword
mysql: [Warning] Using a password on the command line interface can be insecure.
Welcome to the MySQL monitor. Commands end with ; or \g.
Your MySQL connection id is 13
Server version: 8.0.23 MySQL Community Server - GPL
Copyright (c) 2000, 2021, Oracle and/or its affiliates.
Oracle is a registered trademark of Oracle Corporation and/or its
  • Go to scripts > mysql_data.sql. Copy the contents from mysql_data.sql and paste the contents in the console.

  • You can exit from the console using exit.

mysql> exit
Bye
  • To come out of the container, enter exit.
root@d88a6e5973de:/# exit

Deploy Inventory app


Run the below command.

# Package the application using native profile
./mvnw package -Pnative -Dquarkus.native.container-build=true
# Build the docker image
docker build -f src/main/docker/Dockerfile.native -t inventory-ms-quarkus-native .
# Run the application
docker run -it -d --rm -e quarkus.datasource.jdbc.url=jdbc:mysql://host.docker.internal:3306/inventorydb?useSSL=true -e quarkus.datasource.username=dbuser -e quarkus.datasource.password=password -p 8082:8080 inventory-ms-quarkus-native
  • You can also verify it as follows.
$ docker ps
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
b50a1ad23fed inventory-ms-quarkus-native "./application -Dqua…" 2 days ago Up 2 days 0.0.0.0:8082->8080/tcp pedantic_murdock
20c0472e885f mysql "docker-entrypoint.s…" 2 days ago Up 2 days 0.0.0.0:3306->3306/tcp, 33060/tcp inventorymysql

Catalog

  • Clone catalog repository
git clone https://github.com/ibm-garage-ref-storefront/catalog-ms-quarkus.git
cd catalog-ms-quarkus

Deploy ElasticSearch


# Start an Elasticsearch Container
docker run --name catalogelasticsearch \
-e "discovery.type=single-node" \
-p 9200:9200 \
-p 9300:9300 \
-d docker.elastic.co/elasticsearch/elasticsearch:6.3.2

If it is successfully deployed, you will see something like below.

$ docker ps
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
6c27955669e2 docker.elastic.co/elasticsearch/elasticsearch:6.3.2 "/usr/local/bin/dock…" 2 days ago Up 2 days 0.0.0.0:9200->9200/tcp, 0.0.0.0:9300->9300/tcp catalogelasticsearch
b50a1ad23fed inventory-ms-quarkus-native "./application -Dqua…" 2 days ago Up 2 days 0.0.0.0:8082->8080/tcp pedantic_murdock
20c0472e885f mysql "docker-entrypoint.s…" 2 days ago Up 2 days 0.0.0.0:3306->3306/tcp, 33060/tcp inventorymysql

Deploy Catalog app


Run the below command.

# Package the application using native profile
./mvnw package -Pnative -Dquarkus.elasticsearch.hosts=http://localhost:9200 -Dibm.cn.application.client.InventoryServiceClient/mp-rest/url=http://localhost:8082/micro/inventory -Dquarkus.native.container-build=true
# Build the docker image
docker build -f src/main/docker/Dockerfile.native -t catalog-ms-quarkus-native .
# Run the application
docker run -it -d --rm -e quarkus.elasticsearch.hosts=http://host.docker.internal:9200 -e ibm.cn.application.client.InventoryServiceClient/mp-rest/url=http://host.docker.internal:8082/micro/inventory -p 8083:8080 catalog-ms-quarkus-native
  • You can also verify it as follows.
$ docker ps
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
a5774b328b8d catalog-ms-quarkus-native "./application -Dqua…" 2 days ago Up 2 days 0.0.0.0:8083->8080/tcp inspiring_wozniak
6c27955669e2 docker.elastic.co/elasticsearch/elasticsearch:6.3.2 "/usr/local/bin/dock…" 2 days ago Up 2 days 0.0.0.0:9200->9200/tcp, 0.0.0.0:9300->9300/tcp catalogelasticsearch
b50a1ad23fed inventory-ms-quarkus-native "./application -Dqua…" 2 days ago Up 2 days 0.0.0.0:8082->8080/tcp pedantic_murdock
20c0472e885f mysql "docker-entrypoint.s…" 2 days ago Up 2 days 0.0.0.0:3306->3306/tcp, 33060/tcp inventorymysql

Authentication using Keycloak

Keycloak is used for storing users and authenticating users. To configure it, refer Keycloak - JWT token generation.

Make sure you grab the client_secret. You need to pass it as a param in the below services.

Customer

  • Clone customer repository
git clone https://github.com/ibm-garage-ref-storefront/customer-ms-quarkus.git
cd customer-ms-quarkus

Deploy CouchDB


# Start a CouchDB Container with a database user, and a password
docker run -d -e COUCHDB_USER='admin' -e COUCHDB_PASSWORD='password' -p 5984:5984 couchdb

If it is successfully deployed, you will see something like below.

$ docker ps
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
8b4430086226 couchdb "tini -- /docker-ent…" 2 days ago Up 2 days 4369/tcp, 9100/tcp, 0.0.0.0:5984->5984/tcp angry_davinci
a5774b328b8d catalog-ms-quarkus-native "./application -Dqua…" 2 days ago Up 2 days 0.0.0.0:8083->8080/tcp inspiring_wozniak
6c27955669e2 docker.elastic.co/elasticsearch/elasticsearch:6.3.2 "/usr/local/bin/dock…" 2 days ago Up 2 days 0.0.0.0:9200->9200/tcp, 0.0.0.0:9300->9300/tcp catalogelasticsearch
b50a1ad23fed inventory-ms-quarkus-native "./application -Dqua…" 2 days ago Up 2 days 0.0.0.0:8082->8080/tcp pedantic_murdock
20c0472e885f mysql "docker-entrypoint.s…" 2 days ago Up 2 days 0.0.0.0:3306->3306/tcp, 33060/tcp inventorymysql
1bdb13bf24cd quay.io/keycloak/keycloak:12.0.2 "/opt/jboss/tools/do…" 2 days ago Up 2 days 8443/tcp, 0.0.0.0:8085->8080/tcp bold_elion
  • Populate the database with user information.
cd populate
python3 populate.py localhost 5984
cd ..

Deploy Customer app


Run the below command.

# Package the application using native profile
./mvnw package -Pnative -Dquarkus.native.container-build=true
# Build the docker image
docker build -f src/main/docker/Dockerfile.native -t customer-ms-quarkus-native .
# Run the application
docker run -it -d --rm -e ibm.cn.application.couchdb.client.CouchDBClientService/mp-rest/url=http://host.docker.internal:5984 -e couchuser=admin -e couchpassword=password -e quarkus.oidc.auth-server-url=http://host.docker.internal:8085/auth/realms/sfrealm -e quarkus.oidc.client-id=bluecomputeweb -e quarkus.oidc.credentials.secret=a297757d-d2cc-4921-8e66-971432a68826 -p 8087:8080 customer-ms-quarkus-native

Note: Set the quarkus.oidc.credentials.secret value to the value you grabbed earlier.

  • You can also verify it as follows.
$ docker ps
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
4e0d5679fb92 customer-ms-quarkus-native "./application -Dqua…" 2 hours ago Up 2 hours 0.0.0.0:8087->8080/tcp ecstatic_lumiere
8b4430086226 couchdb "tini -- /docker-ent…" 2 days ago Up 2 days 4369/tcp, 9100/tcp, 0.0.0.0:5984->5984/tcp angry_davinci
a5774b328b8d catalog-ms-quarkus-native "./application -Dqua…" 2 days ago Up 2 days 0.0.0.0:8083->8080/tcp inspiring_wozniak
6c27955669e2 docker.elastic.co/elasticsearch/elasticsearch:6.3.2 "/usr/local/bin/dock…" 2 days ago Up 2 days 0.0.0.0:9200->9200/tcp, 0.0.0.0:9300->9300/tcp catalogelasticsearch
b50a1ad23fed inventory-ms-quarkus-native "./application -Dqua…" 2 days ago Up 2 days 0.0.0.0:8082->8080/tcp pedantic_murdock
20c0472e885f mysql "docker-entrypoint.s…" 2 days ago Up 2 days 0.0.0.0:3306->3306/tcp, 33060/tcp inventorymysql
1bdb13bf24cd quay.io/keycloak/keycloak:12.0.2 "/opt/jboss/tools/do…" 2 days ago Up 2 days 8443/tcp, 0.0.0.0:8085->8080/tcp bold_elion

Orders

  • Clone orders repository
git clone https://github.com/ibm-garage-ref-storefront/orders-ms-quarkus.git
cd orders-ms-quarkus

Deploy Mariadb


# Start a MariaDB Container with a database user, a password, and create a new database
docker run --name ordersmysql \
-e MYSQL_ROOT_PASSWORD=admin123 \
-e MYSQL_USER=dbuser \
-e MYSQL_PASSWORD=password \
-e MYSQL_DATABASE=ordersdb \
-p 3307:3306 \
-d mariadb

If it is successfully deployed, you will see something like below.

$ docker ps
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
4e0d5679fb92 customer-ms-quarkus-native "./application -Dqua…" 2 hours ago Up 2 hours 0.0.0.0:8087->8080/tcp ecstatic_lumiere
8b4430086226 couchdb "tini -- /docker-ent…" 2 days ago Up 2 days 4369/tcp, 9100/tcp, 0.0.0.0:5984->5984/tcp angry_davinci
9d65ba050ad1 mariadb "docker-entrypoint.s…" 2 days ago Up 2 days 0.0.0.0:3307->3306/tcp ordersmysql
a5774b328b8d catalog-ms-quarkus-native "./application -Dqua…" 2 days ago Up 2 days 0.0.0.0:8083->8080/tcp inspiring_wozniak
6c27955669e2 docker.elastic.co/elasticsearch/elasticsearch:6.3.2 "/usr/local/bin/dock…" 2 days ago Up 2 days 0.0.0.0:9200->9200/tcp, 0.0.0.0:9300->9300/tcp catalogelasticsearch
b50a1ad23fed inventory-ms-quarkus-native "./application -Dqua…" 2 days ago Up 2 days 0.0.0.0:8082->8080/tcp pedantic_murdock
20c0472e885f mysql "docker-entrypoint.s…" 2 days ago Up 2 days 0.0.0.0:3306->3306/tcp, 33060/tcp inventorymysql
  • Create the orders table.

Firstly, ssh into the MariaDB container.

docker exec -it ordersmysql bash
  • Now, run the below command for table creation.
mysql -udbuser -ppassword
  • This will take you to something like below.
root@5762edb59a86:/# mysql -udbuser -ppassword
Welcome to the MariaDB monitor. Commands end with ; or \g.
Your MariaDB connection id is 22
Server version: 10.5.5-MariaDB-1:10.5.5+maria~focal mariadb.org binary distribution
Copyright (c) 2000, 2018, Oracle, MariaDB Corporation Ab and others.
Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.
  • Go to scripts > mysql_data.sql. Copy the contents from mysql_data.sql and paste the contents in the console.

  • You can exit from the console using exit.

MariaDB [(none)]> exit
Bye
  • To come out of the container, enter exit.
root@5762edb59a86:/# exit

Deploy Orders app


Run the below command.

# Package the application using native profile
./mvnw package -Pnative -Dquarkus.native.container-build=true
# Build the docker image
docker build -f src/main/docker/Dockerfile.native -t orders-ms-quarkus-native .
# Run the application
docker run -it -d --rm -e quarkus.datasource.jdbc.url=jdbc:mysql://host.docker.internal:3307/ordersdb?useSSL=true -e quarkus.datasource.username=dbuser -e quarkus.datasource.password=password -e quarkus.oidc.auth-server-url=http://host.docker.internal:8085/auth/realms/sfrealm -e quarkus.oidc.client-id=bluecomputeweb -e quarkus.oidc.credentials.secret=a297757d-d2cc-4921-8e66-971432a68826 -p 8086:8080 orders-ms-quarkus-native

Note: Set the quarkus.oidc.credentials.secret value to the value you grabbed earlier.

  • You can also verify it as follows.
$ docker ps
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
4e0d5679fb92 customer-ms-quarkus-native "./application -Dqua…" 2 hours ago Up 2 hours 0.0.0.0:8087->8080/tcp ecstatic_lumiere
8b4430086226 couchdb "tini -- /docker-ent…" 2 days ago Up 2 days 4369/tcp, 9100/tcp, 0.0.0.0:5984->5984/tcp angry_davinci
bc39c2469804 orders-ms-quarkus-native "./application -Dqua…" 2 days ago Up 2 days 0.0.0.0:8086->8080/tcp dazzling_meitner
9d65ba050ad1 mariadb "docker-entrypoint.s…" 2 days ago Up 2 days 0.0.0.0:3307->3306/tcp ordersmysql
a5774b328b8d catalog-ms-quarkus-native "./application -Dqua…" 2 days ago Up 2 days 0.0.0.0:8083->8080/tcp inspiring_wozniak
6c27955669e2 docker.elastic.co/elasticsearch/elasticsearch:6.3.2 "/usr/local/bin/dock…" 2 days ago Up 2 days 0.0.0.0:9200->9200/tcp, 0.0.0.0:9300->9300/tcp catalogelasticsearch
b50a1ad23fed inventory-ms-quarkus-native "./application -Dqua…" 2 days ago Up 2 days 0.0.0.0:8082->8080/tcp pedantic_murdock

Storefront UI

  • Clone Storefront-UI repository
git clone https://github.com/ibm-garage-ref-storefront/storefront-ui.git
cd storefront-ui
git checkout hp-quarkus-version

Deploy Storefront UI


  • Go to config > default.json and change the client_secret to the one you grabbed earlier from keycloak.

  • Run the below command.

# Build storefront ui docker image
appsody build
# Start the Storefront UI Container
docker run --name web \
-e NODE_ENV=development \
-p 3000:3000 \
-d dev.local/web
  • You can also verify it as follows.
$ docker ps
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
e616793340c7 dev.local/web "container-entrypoin…" 2 hours ago Up 2 hours 0.0.0.0:3000->3000/tcp, 8080/tcp web
4e0d5679fb92 customer-ms-quarkus-native "./application -Dqua…" 2 hours ago Up 2 hours 0.0.0.0:8087->8080/tcp ecstatic_lumiere
8b4430086226 couchdb "tini -- /docker-ent…" 2 days ago Up 2 days 4369/tcp, 9100/tcp, 0.0.0.0:5984->5984/tcp angry_davinci
bc39c2469804 orders-ms-quarkus-native "./application -Dqua…" 2 days ago Up 2 days 0.0.0.0:8086->8080/tcp dazzling_meitner
9d65ba050ad1 mariadb "docker-entrypoint.s…" 2 days ago Up 2 days 0.0.0.0:3307->3306/tcp ordersmysql
a5774b328b8d catalog-ms-quarkus-native "./application -Dqua…" 2 days ago Up 2 days 0.0.0.0:8083->8080/tcp inspiring_wozniak
6c27955669e2 docker.elastic.co/elasticsearch/elasticsearch:6.3.2 "/usr/local/bin/dock…" 2 days ago Up 2 days 0.0.0.0:9200->9200/tcp, 0.0.0.0:9300->9300/tcp catalogelasticsearch

There you go, you deploy all the necessary services for storefront.

Now, let us check the app out. You can access it at http://localhost:3000.

Storefront