Smb
SMB: SPA + Backend API
A standard decoupled architecture for Small-to-Medium Businesses.Serves a compiled Single Page Application (React/Vue) alongside a robustAPI backend on standard virtual infrastructure.
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(("Nginx Gateway
gateway
Route: /api -> Backend, /* ->
Frontend")) class nginx c-network frontend[("Static Assets (SPA)
storage
HTML/JS/CSS")] class frontend c-storage backend("Backend Server
service
API Logic") class backend c-compute end %% Orphans user(("Browser Client
actor")) class user c-actor db[("Managed Database
database
High Availability")] class db c-database %% Edges nginx -.-> frontend nginx -.-> backend backend -.-> db
gateway
Route: /api -> Backend, /* ->
Frontend")) class nginx c-network frontend[("Static Assets (SPA)
storage
HTML/JS/CSS")] class frontend c-storage backend("Backend Server
service
API Logic") class backend c-compute end %% Orphans user(("Browser Client
actor")) class user c-actor db[("Managed Database
database
High Availability")] class db c-database %% Edges nginx -.-> frontend nginx -.-> backend backend -.-> db
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 |
System Components
The following distinct entities are defined in this architecture:
| Component | Type | Notes |
|---|---|---|
| Browser Client | actor | - |
| Nginx Gateway | gateway | Route: /api -> Backend, /* -> Frontend |
| Static Assets (SPA) | storage | HTML/JS/CSS |
| Backend Server | service | API Logic |
| Managed Database | database | High Availability |
Interested in this architecture?
Let's discuss how to adapt the SMB: SPA + Backend API stack for your specific needs.
Contact Us