1# Full-Stack Web App Template — REFERENCE ONLY
2 
3Template for server-side rendered web applications on Azure App Service. Use for MVC, Razor Pages, Next.js SSR, Django, or React+API patterns.
4 
5## Templates by Pattern
6 
7| Pattern | AZD Template | Framework |
8|---------|-------------|-----------|
9| React + C# API | `azd init -t todo-csharp` | React SPA + ASP.NET Core API |
10| React + Node.js API | `azd init -t todo-nodejs-mongo` | React SPA + Express API |
11| React + Python API | `azd init -t todo-python-mongo` | React SPA + FastAPI |
12| React + Java API | `azd init -t todo-java-mongo` | React SPA + Spring Boot |
13 
14**Browse all:** [Awesome AZD](https://azure.github.io/awesome-azd/?tags=appservice)
15 
16> 💡 **Tip:** For static frontends with API backends, consider Azure Static Web Apps instead. Use App Service when you need full server-side rendering.
17 
18## Architecture Patterns
19 
20### Pattern A: Single App Service (API + static files)
21 
22```
23App Service (Linux)
24├── /api/*    → Backend routes
25└── /*        → Static files (React/Vue build output)
26```
27 
28Best for: Simple apps, MVPs, Razor Pages, Django with templates.
29 
30### Pattern B: Separate frontend + backend
31 
32```
33App Service (frontend) ← React/Next.js SSR
34      │
35      └──► App Service (backend) ← REST API
36```
37 
38Best for: Independent scaling, team separation, microservices.
39 
40## Project Structure (Single App)
41 
42```
43project-root/
44├── azure.yaml
45├── infra/
46│   ├── main.bicep
47│   └── app/
48│       └── web.bicep
49└── src/
50    ├── api/              # Backend
51    │   ├── Program.cs    # or app.py / index.js
52    │   └── ...
53    └── web/              # Frontend (built output served as static)
54        ├── package.json
55        └── src/
56```
57 
58## azure.yaml (multi-service)
59 
60```yaml
61name: my-web-app
62services:
63  web:
64    project: ./src/web
65    host: appservice
66    language: js
67    dist: build
68  api:
69    project: ./src/api
70    host: appservice
71    language: csharp
72```
73 
74## Server-Side Rendering Examples
75 
76### ASP.NET Core MVC / Razor Pages
77 
78```csharp
79var builder = WebApplication.CreateBuilder(args);
80builder.Services.AddControllersWithViews();
81var app = builder.Build();
82app.UseStaticFiles();
83app.MapControllerRoute(name: "default", pattern: "{controller=Home}/{action=Index}/{id?}");
84app.MapGet("/health", () => Results.Ok(new { status = "healthy" }));
85app.Run();
86```
87 
88### Next.js (SSR on App Service)
89 
90```javascript
91// next.config.js
92module.exports = {
93  output: 'standalone',  // Required for App Service deployment
94};
95```
96 
97Startup command in App Service:
98```bash
99node server.js
100```
101 
102### Django
103 
104```python
105# settings.py
106ALLOWED_HOSTS = ['.azurewebsites.net', 'localhost']
107STATIC_ROOT = BASE_DIR / 'staticfiles'
108CSRF_TRUSTED_ORIGINS = ['https://*.azurewebsites.net']
109```
110 
111### Express + React (served from build)
112 
113```javascript
114const express = require('express');
115const path = require('path');
116const app = express();
117 
118app.use(express.json());
119app.use('/api', apiRouter);
120app.use(express.static(path.join(__dirname, '../web/build')));
121app.get('/health', (req, res) => res.json({ status: 'healthy' }));
122app.get('*', (req, res) => {
123  res.sendFile(path.join(__dirname, '../web/build/index.html'));
124});
125 
126app.listen(process.env.PORT || 3000);
127```
128 
129## App Service Configuration
130 
131```bicep
132resource webApp 'Microsoft.Web/sites@2023-12-01' = {
133  properties: {
134    siteConfig: {
135      linuxFxVersion: 'NODE|20-lts'  // or DOTNETCORE|8.0, PYTHON|3.12
136      healthCheckPath: '/health'
137      appCommandLine: ''              // Custom startup command if needed
138      appSettings: [
139        { name: 'SCM_DO_BUILD_DURING_DEPLOYMENT', value: 'true' }
140        { name: 'WEBSITE_NODE_DEFAULT_VERSION', value: '~20' }
141      ]
142    }
143  }
144  tags: {
145    'azd-service-name': 'web'
146  }
147}
148```
149 
150## Startup Commands by Runtime
151 
152| Runtime | Startup Command | Notes |
153|---------|----------------|-------|
154| ASP.NET Core | (auto-detected) | No command needed |
155| Node.js | `node server.js` or `npm start` | Set via `appCommandLine` |
156| Python (Django) | `gunicorn myapp.wsgi` | Use gunicorn for production |
157| Python (FastAPI) | `uvicorn main:app --host 0.0.0.0` | Use uvicorn for ASGI |
158| Next.js SSR | `node server.js` | Use `output: 'standalone'` |
159 
160## Deployment
161 
162```bash
163ENV_NAME="$(basename "$PWD" | tr '[:upper:]' '[:lower:]' | tr ' _' '-')-dev"
164azd init -t <template> -e "$ENV_NAME" --no-prompt
165azd env set AZURE_LOCATION eastus2
166azd up --no-prompt
167```
168 
169**PowerShell:**
170```powershell
171$ENV_NAME = "$(Split-Path -Leaf (Get-Location) | ForEach-Object { $_.ToLower() -replace '[ _]','-' })-dev"
172azd init -t <template> -e $ENV_NAME --no-prompt
173azd env set AZURE_LOCATION eastus2
174azd up --no-prompt
175```
176 
177## References
178 
179- [Deploy to App Service](https://learn.microsoft.com/en-us/azure/app-service/quickstart-dotnetcore)
180- [Node.js on App Service](https://learn.microsoft.com/en-us/azure/app-service/quickstart-nodejs)
181- [Python on App Service](https://learn.microsoft.com/en-us/azure/app-service/quickstart-python)
182