smb
intermediate
SMB: SPA + Backend API
Solution Components
smb
react
vue
angular
nginx
spa
Cloud Cost Estimator
Dynamic Pricing Calculator
$0 / month
Compute Resources
$ 15
Database Storage
$ 25
Load Balancer
$ 10
CDN / Bandwidth
$ 5
* Estimates vary by provider & region
%% 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 ["Web Server"]
direction TB
nginx["
Route: /api -> Backend, /* ->
Frontend"] class nginx c-network frontend["
"]
class frontend c-storage
backend["
"]
class backend c-compute
end
%% Orphans
user["
"]
class user c-actor
db["
"]
class db c-database
%% Edges
nginx -.-> frontend
nginx -.-> backend
backend -.-> db
Nginx Gatewaygateway
Frontend"] class nginx c-network frontend["
Static Assets (SPA)storageHTML/JS/CSS
Backend ServerserviceAPI Logic
Browser Clientactor
Managed DatabasedatabaseHigh Availability
SMB: SPA + Backend API
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 |