Single-Page Application Demo

Aggregate test coverage for all components in this repo:

This application demos a modern single-page application built on:

• Vue.js (front-end)
• Node.js (back-end)
• MongoDB (database)

This application was created to help train people on NGINX and the F5 Distributed Cloud Services capabilities. It is featured in the Modern Apps Jumpstart Workshop.

Components

Frontend

Vue.JS application written in TypeScript that simulates a shopping cart application.

• Environment: Internet facing

API

Node.JS application running on Express.JS that provides the primary API and access to the database.

• Environment: Internet facing

Database

MongoDB database that stores information about the user and the products. This database is seeded with user and product data on launch.

• Environment: Internal

Recommendations

Node.JS microservice that will recommend products.

• Environment: Internet facing

Inventory

Node.JS microservice that will tell the local store inventory. Note, this microservice is accessed through the API and simulates the API server talking to an internal service.

• Environment: Internal, accessibly by the API server

Checkout

Node.JS microservice that will complete the ordering process.

• Environment: Internet facing

Features

Product Detail

The Product detail page contains the recommendations and inventory microservices.

Deploy

docker compose up -d

Development

back-end services (api, inventory, recommendations)

Running

cd <service folder here>
export MONGO_URL="localhost"
export INVENTORY_URL="http://localhost:8002"
export RECOMMENDATIONS_URL="http://recommendations:8001"
npm dev

Optionally, to run the dark variant of the Brewz SPA app: npm run dev:dark.

To show the security features of the app (sign in, etc), you will need to navigate to /config in the Brewz app, set the Enable Security checkbox, then refresh your browser.

Alternative Product Catalog

By default, this sample application shows beer products, but it can also be configured to show coffee instead. To do this, set a runtime environment variable on the mongodb, api and recommendations containers:

PRODUCT_TYPE=coffee

Unit Tests

cd <service folder here>
npm run test:unit

Code Coverage Metrics

cd <service folder here>
npm run test:coverage

Coverage reports will appear in each subproject's coverage directory.

spa (front-end)

cd spa
npm run dev

You will also need to update the ./spa/.env with the correct API server URL.

Docker Compose

You can use the docker-compose file leveraged in production for development as well.

docker-compose up -d

To stop the container you want to do development on and run it locally:

docker-compose rm -sv container-name

Then start your front-end or back-end as shown above.

NGINX

To host the Brewz app, you will need a proxy such as NGINX to route the SPA requests to the correct upstream service. The following NGINX conf will accomplish this:

server {
  listen 8080;
  location / { proxy_pass http://127.0.0.1:8081/; }
  location /api { proxy_pass http://127.0.0.1:8000; }
  location /images { proxy_pass http://127.0.0.1:8000/images; }
  location /recommendations { proxy_pass http://127.0.0.1:8001; }
  location /inventory { proxy_pass http://127.0.0.1:8002; }
  location /checkout { proxy_pass http://127.0.0.1:8003; }
}  

Attribution

This code is based on the work of Shaun Wassell and his Creating and Hosting a Full-Stack Site LinkedIn Learning course.

I have extended this demo to:

• run components in docker containers
• abstract API and image URLs
• seed MongoDB
• recommendations microservice
• checkout (ordering) microservice
• store inventory simulation
• stats page for all services
• use OIDC and OAuth 2 for authentication/authorization to spa app and backend services via JWT