smb
intermediate
SMB: SPA + Backend API
Solution Components
smb
react
vue
angular
nginx
spa
Architecture Visual
%% 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(("<img src="/icons/inframap/edge.png" width="32" height="32" /><br/><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[("<img src="/icons/inframap/storage.png" width="32" height="32" /><br/><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("<img src="/icons/inframap/compute.png" width="32" height="32" /><br/><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(("<img src="/icons/inframap/user.png" width="32" height="32" /><br/><b>Browser Client</b><br/><i>actor</i>"))
class user c-actor
db[("<img src="/icons/inframap/database.png" width="32" height="32" /><br/><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
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 |
Cloud Cost Estimator
Dynamic Pricing Calculator
$0 / month
MVP (1x) Startup (5x) Growth (20x) Scale (100x)
MVP Level
Compute Resources
$ 15
Database Storage
$ 25
Load Balancer
$ 10
CDN / Bandwidth
$ 5
* Estimates vary by provider & region