Whether you are a startup founder, an IT director, or a small business owner, the question of "how much does a website cost?" is rarely met with a straight answer. That's because building a modern web application is no longer just about buying a domain and shared hosting. It's about choosing the right frontend framework and the right cloud architecture.
A modern web application can cost anywhere from $50 a month to run a lean operation, all the way to tens of thousands of dollars for enterprise-scale platforms.
In this post, we will break down the true costs of setting up a website, looking at developer tools like React, Angular, and Blazor, and evaluating cloud Platform-as-a-Service (PaaS) giants: AWS, Azure, and Google App Engine.
The bulk of your upfront costs will go toward development labor. The framework you choose dictates the speed of development and the hourly rate of the developers you hire.
React, maintained by Meta, is the most popular JavaScript library for building user interfaces.
Angular is Google’s opinionated, fully-fledged TypeScript framework.
Blazor allows developers to build interactive client-side web UI with C# (via WebAssembly) instead of JavaScript.
Once your app is built, it needs a home. Platform-as-a-Service (PaaS) is the gold standard today, allowing you to deploy code without worrying about managing the underlying servers.
Here is how the "Big Three" cloud providers stack up:
AWS is the undisputed market leader. AWS Amplify is perfect for hosting React and Angular single-page applications (SPAs) cheaply (often pennies per month for low traffic). For the backend, AWS Elastic Beanstalk handles the deployment of your APIs.
If you built your app in Blazor or Angular, Azure is an incredibly seamless environment. Azure App Service is a fully managed HTTP-based service for hosting web applications and REST APIs.
Google App Engine is a fully managed, serverless platform. Its biggest advantage is "scale to zero." If nobody is visiting your app, you don't pay for compute power.
To understand where your money goes, it helps to visualize the infrastructure. Below is a standard, cost-effective architectural diagram used by modern applications.
graph TD
User((User Browser)) --> |HTTPS| CDN[CDN / Cloud Edge]
subgraph frontend_delivery[Frontend Delivery]
CDN --> SPA[Static Hosting: React / Angular / Blazor WebAssembly]
end
SPA --> |API Requests| API[API Gateway]
subgraph cloud_backend[Cloud PaaS Backend]
API --> Compute[App Service / Elastic Beanstalk / App Engine]
Compute --> Cache[(Redis Cache - Optional)]
Compute --> DB[(Managed Database: SQL / NoSQL)]
end
classDef cloud fill:#f9f9f9,stroke:#333,stroke-width:2px;
class frontend_delivery,cloud_backend cloud;
This is a great, standard representation of a modern, decoupled web application architecture.
The diagram illustrates how a modern Single Page Application (SPA)—built with tools like React, Angular, or Blazor—interacts with a cloud-hosted backend. Instead of a traditional "monolith" where the server renders the HTML and handles the database all in one place, this architecture splits the application into two distinct parts: Frontend Delivery and the Cloud PaaS Backend.
Here is a step-by-step breakdown of exactly how this flow works:
This specific setup is the gold standard for modern web development because it provides separation of concerns. Your frontend is incredibly cheap and fast to host on a CDN, while your backend can scale up or down independently based on how many API requests are coming in.
How this architecture saves you money:
So, how much does it actually cost? Let us summarize:
graph TD
%% ── CLIENTS ──
subgraph clients[" 📱 Clients — .NET MAUI "]
iOS["iOS\nMAUI app"]
Android["Android\nMAUI app"]
Windows["Windows\nMAUI app"]
macOS["macOS\nMAUI app"]
Web["Web\nBlazor WASM"]
Maps["Azure Maps SDK\nNavigation"]
end
%% ── EDGE ──
subgraph edge[" 🌐 Edge "]
FD["Azure Front Door + CDN\nWAF · TLS · Global load balancing"]
end
%% ── GATEWAY ──
subgraph gateway[" 🔀 API Gateway "]
APIM["Azure API Management\nAuth · Rate limiting · Routing"]
end
%% ── MICROSERVICES ──
subgraph aks[" ⚙️ Azure Kubernetes Service — Microservices "]
Matching["Ride matching\nDriver allocation"]
UserSvc["User service\nProfiles · Auth"]
Pricing["Pricing service\nSurge · Estimates"]
Payment["Payment service\nBilling · Receipts"]
Location["Location service\nGPS ingestion"]
TripSvc["Trip service\nHistory · Routes"]
Rating["Rating service\nReviews · Scores"]
Driver["Driver service\nOnboarding · Docs"]
Notify["Notify service\nPush · SMS"]
Admin["Admin service\nDashboard"]
end
%% ── MESSAGING & REAL-TIME ──
subgraph messaging[" 📨 Async Messaging & Real-time "]
SvcBus["Azure Service Bus\nEvent-driven decoupling"]
SignalR["Azure SignalR\nLive driver tracking"]
EventHub["Azure Event Hubs\nGPS telemetry stream"]
NotifHub["Notification Hubs\nAPNs · FCM"]
end
%% ── DATA ──
subgraph data[" 🗄️ Data Stores "]
Cosmos["Azure Cosmos DB\nTrips · Users · Geo"]
SQL["Azure SQL DB\nBilling · Drivers"]
Redis["Azure Cache\nRedis · Sessions"]
Blob["Blob Storage\nDocs · Avatars"]
end
%% ── PLATFORM ──
subgraph platform[" 🔧 Platform & Ops "]
Entra["Microsoft Entra ID\nIdentity · OAuth 2"]
KeyVault["Key Vault\nSecrets · Certs"]
Monitor["Azure Monitor\nLogs · App Insights"]
DevOps["Azure DevOps\nCI/CD Pipelines"]
Stripe["Stripe\nPayments API"]
end
%% ── CONNECTIONS ──
iOS & Android & Windows & macOS & Web --> FD
Maps -.->|navigation| Location
FD --> APIM
APIM --> Matching & UserSvc & Pricing & Payment
APIM --> Location & TripSvc & Rating & Driver
APIM --> Notify & Admin
Matching --> SvcBus
Location --> EventHub
Notify --> NotifHub
TripSvc & UserSvc --> SignalR
SvcBus --> Cosmos & SQL
EventHub --> Cosmos
NotifHub --> Redis
Payment -->|external| Stripe
UserSvc --> Entra
APIM --> KeyVault
aks -->|telemetry| Monitor
DevOps -.->|deploy| aks
Cosmos & SQL & Redis & Blob --- platform
%% ── STYLES ──
classDef clientStyle fill:#EEEDFE,stroke:#534AB7,color:#3C3489
classDef edgeStyle fill:#E6F1FB,stroke:#185FA5,color:#0C447C
classDef gatewayStyle fill:#E6F1FB,stroke:#185FA5,color:#0C447C
classDef serviceStyle fill:#E1F5EE,stroke:#0F6E56,color:#085041
classDef messagingStyle fill:#FAEEDA,stroke:#854F0B,color:#633806
classDef dataStyle fill:#FAECE7,stroke:#993C1D,color:#712B13
classDef platformStyle fill:#F1EFE8,stroke:#5F5E5A,color:#444441
class iOS,Android,Windows,macOS,Web,Maps clientStyle
class FD edgeStyle
class APIM gatewayStyle
class Matching,UserSvc,Pricing,Payment,Location,TripSvc,Rating,Driver,Notify,Admin serviceStyle
class SvcBus,SignalR,EventHub,NotifHub messagingStyle
class Cosmos,SQL,Redis,Blob dataStyle
class Entra,KeyVault,Monitor,DevOps,Stripe platformStyle
classDef clientGroup fill:#F5F4FF,stroke:#534AB7,color:#3C3489
classDef edgeGroup fill:#EFF6FD,stroke:#185FA5,color:#0C447C
classDef gatewayGroup fill:#EFF6FD,stroke:#185FA5,color:#0C447C
classDef aksGroup fill:#EAF7F2,stroke:#0F6E56,color:#085041
classDef messagingGroup fill:#FDF5E8,stroke:#854F0B,color:#633806
classDef dataGroup fill:#FDF3EF,stroke:#993C1D,color:#712B13
classDef platformGroup fill:#F7F6F2,stroke:#5F5E5A,color:#444441
class clients clientGroup
class edge edgeGroup
class gateway gatewayGroup
class aks aksGroup
class messaging messagingGroup
class data dataGroup
class platform platformGroup
Here's Hailer's full Azure architecture breakdown across six tiers:
Clients — Five MAUI targets (iOS, Android, Windows, macOS, Blazor WebAssembly) plus Azure Maps SDK for in-app navigation, all sharing a single codebase.
Edge — Azure Front Door acts as the global entry point, handling TLS termination, WAF protection, and geographic routing to the nearest Azure region.
API gateway — Azure API Management sits behind Front Door, enforcing auth (JWT validation via Entra ID), rate limiting per rider/driver, and routing to the correct microservice.
Microservices (AKS) — Eight services running in Kubernetes, grouped roughly as: core ride flow (matching, location, trip), user-facing (user, driver, rating), commerce (pricing, payment), and ops (notifications, admin).
Messaging & real-time — Async decoupling via Service Bus, live driver GPS streamed to clients over SignalR, high-volume telemetry ingested through Event Hubs, and push notifications dispatched via Notification Hubs (APNs/FCM).
Data stores — Cosmos DB for geo-distributed trip/user data, Azure SQL for structured billing and driver records, Redis Cache for sessions and active ride state, and Blob Storage for documents and profile images.
Platform — Microsoft Entra for identity, Key Vault for secrets, Azure Monitor + App Insights for observability, Azure DevOps for CI/CD, and Stripe as the external payments provider.
The cost of setting up a website today is directly tied to the complexity of the software and the scale of the infrastructure. By choosing the right frontend framework (React for talent availability, Angular for structure, Blazor for .NET synergy) and leveraging modern PaaS solutions (AWS, Azure, Google App Engine), you can optimize your budget and ensure your application is ready to scale gracefully.