Affable Bean Tutorial

• Affable Bean Tutorial
  • Deployment
  • Overview
  • Directories Structure
  • Prerequisites
    • Create the Swarm
    • Bring up APIs
    • Bring up GUIs
  • FAQs

Deployment

Frontend: https://chipper-rugelach-1ca688.netlify.app

Backend: https://afbb-api.onrender.com

Database: MongoDB Atlas

Overview

Rewrite Netbeans e-commerce tutorial into microservices

Docker compose in this tutorial will create a swarm of containers at localhost to demonstrate the microservices:

• afbb-db: container serves database and contents, created using MongoDB image
• afbb-ws: container serves web APIs, created using GraalVM image
• afbb-gui: container serves frontent GUIs, created using NodeJS image

Directories Structure

afbb-db: data and contents

• database seeds & schemas
• media contents

afbb-ws: web services and APIs

afbb-gui: user interfaces

• admin: data management site
• shop: data-driven front site

Prerequisites

Prerequisites: Docker, VSCode and Git (either install on OS or another type-2 hypervisor)

If using Linux OS, see prerequisites handy scripts for installation

Develop microservices with VSCode and type-2 hypervisor:

• Shared development environment with VSCode devcontainer
• Connect multiple VSCode devcontainers with Docker Compose

Create the Swarm

Bring up all containers:

• First time startup: docker compose up -d (create/recreate containers, which will download/reinstall vscode extensions for each container; hence, take a while)
• Next times: docker compose start

All containers orderly created and share the same network created by docker-compose

Bring up APIs

1. Ctrl+Shift+N > Ctrl+Shift+P > "Dev Containers: Open Folder in Container..." > select path to an afbb-ws folder
2. Wait for container window loading completed, all extensions should be installed (the extension IDs are defined in .devcontainer.json)
3. Select "Spring Boot Dashboard" and Run/Debug service
4. At local host, use browser or any HTTP client tool to test APIs, i.e.: http://localhost:8080/categories

Run with CLI commands: ./mvnw mn:run -Dmicronaut.environments=local

Debug with VSCode: run/debug via Micronaut Toolkit for VSCode extension

Bring up GUIs

1. Ctrl+Shift+N > Ctrl+Shift+P > "Dev Containers: Open Folder in Container..." > select path to a afbb-gui folder
2. Wait for container window loading completed, all extensions should be installed (the extension IDs are defined in .devcontainer.json)
3. Go to terminal of the container window, change dir to the front app: admin - cd admin or shop - cd shop
4. Start the app in dev mode: npm run dev
5. Open browser (recommend Chrome) on the host: shop - http://localhost:3000; admin - http://localhost:3001

Run in production mode: npm run build && npm run preview

FAQs

1. Webpack dev server is significantly slow if using Docker Desktop for Windows

   • Because delay in file processing between Windows host and Linux container guest

   • Workaround:

     • Attempt to cache mounted volumes doesn't improve much (see Stackoverflow topic)
     • Set up workspace in VirtualBox VM with Linux distro (i.e.: Ubuntu MATE); then install Prerequisites

2. Unable to start mongo:latest container in VirtualBox VM

   • MongoDB 5 requires a Sandy Bridge or newer CPU Stackoverflow topic
   • Workaround: Avoid MongoDB 5

3. Whenever start containers, internet connection lost

   • Caused by ConnMan as explained in Docker forum topic
   • Workaround: solution discussed in Stackoverflow topic

4. VSCode create auto forwarded ports every Spring Boot startup

   • Open the Settings (Ctrl+, or Cmd+, on macOS).
   • Search for remote.autoForwardPorts.
   • Uncheck the option Remote › Ports: Auto Forward Ports.