smb

SMB: SPA + Backend API

Architecture Diagram


              %% Autogenerated smb-vm-spa
graph TD
  classDef standard fill:#1e293b,stroke:#38bdf8,stroke-width:1px,color:#e5e7eb;
  classDef c-actor fill:#1e293b,stroke:#e5e7eb,stroke-width:1px,stroke-dasharray: 5 5,color:#e5e7eb;
  classDef c-compute fill:#422006,stroke:#fb923c,stroke-width:1px,color:#fed7aa;
  classDef c-database fill:#064e3b,stroke:#34d399,stroke-width:1px,color:#d1fae5;
  classDef c-network fill:#2e1065,stroke:#a855f7,stroke-width:1px,color:#f3e8ff;
  classDef c-storage fill:#450a0a,stroke:#f87171,stroke-width:1px,color:#fee2e2;
  classDef c-security fill:#450a0a,stroke:#f87171,stroke-width:1px,color:#fee2e2;
  classDef c-gateway fill:#2e1065,stroke:#a855f7,stroke-width:1px,color:#f3e8ff;
  classDef c-container fill:#422006,stroke:#facc15,stroke-width:1px,color:#fef9c3;

  subgraph server ["SERVER"]
    direction TB
    nginx(("<b>Nginx Gateway</b><br/><i>gateway</i><br/><span style='font-size:0.8em'>Route: /api -> Backend, /* -> <br/>Frontend</span>"))
    class nginx c-network
    frontend[("<b>Static Assets (SPA)</b><br/><i>storage</i><br/><span style='font-size:0.8em'>HTML/JS/CSS</span>")]
    class frontend c-storage
    backend("<b>Backend Server</b><br/><i>service</i><br/><span style='font-size:0.8em'>API Logic</span>")
    class backend c-compute
  end

  %% Orphans
  user(("<b>Browser Client</b><br/><i>actor</i>"))
  class user c-actor
  db[("<b>Managed Database</b><br/><i>database</i><br/><span style='font-size:0.8em'>High Availability</span>")]
  class db c-database

  %% Edges
  nginx -.-> frontend
  nginx -.-> backend
  backend -.-> db

SMB: SPA + Backend API

A standard decoupled architecture for Small-to-Medium Businesses. Serves a compiled Single Page Application (React/Vue) alongside a robust API backend on standard virtual infrastructure.

Architecture Diagram

Description

As businesses grow, separating the frontend and backend becomes crucial for independent scaling and team specialization. This pattern serves a compiled application (SPA) alongside a REST/GraphQL API.

Core Components:

Frontend: A React, Vue, or Angular application built into static files, served directly by Nginx.
Backend API: A generic backend (Node, Python, Go) exposing JSON APIs.
Nginx Gatekeeper: Routes traffic based on path (/api/* vs /*), manages CORS, and handles SSL.
Database: Managed database instance (RDS, Cloud SQL, etc.) for reliability.

Deployment: Usually deployed via CI/CD pipelines that build artifacts (JS bundles, binaries) and copy them to the VM or update the running process.

Tech Stack

Component	Technology
Segment	smb
Deployment	vm-decoupled
Frontend	react-vue-angular
Backend	node-python-go
Web Server	nginx
Database	postgres-mysql