Full-Stack Web App Template — REFERENCE ONLY

Template for server-side rendered web applications on Azure App Service. Use for MVC, Razor Pages, Next.js SSR, Django, or React+API patterns.

Templates by Pattern

Browse all: Awesome AZD

💡 Tip: For static frontends with API backends, consider Azure Static Web Apps instead. Use App Service when you need full server-side rendering.

Architecture Patterns

Pattern A: Single App Service (API + static files)

App Service (Linux)
├── /api/*    → Backend routes
└── /*        → Static files (React/Vue build output)

Best for: Simple apps, MVPs, Razor Pages, Django with templates.

Pattern B: Separate frontend + backend

App Service (frontend) ← React/Next.js SSR
      │
      └──► App Service (backend) ← REST API

Best for: Independent scaling, team separation, microservices.

Project Structure (Single App)

project-root/
├── azure.yaml
├── infra/
│   ├── main.bicep
│   └── app/
│       └── web.bicep
└── src/
    ├── api/              # Backend
    │   ├── Program.cs    # or app.py / index.js
    │   └── ...
    └── web/              # Frontend (built output served as static)
        ├── package.json
        └── src/

azure.yaml (multi-service)

name: my-web-app
services:
  web:
    project: ./src/web
    host: appservice
    language: js
    dist: build
  api:
    project: ./src/api
    host: appservice
    language: csharp

Server-Side Rendering Examples

ASP.NET Core MVC / Razor Pages

var builder = WebApplication.CreateBuilder(args);
builder.Services.AddControllersWithViews();
var app = builder.Build();
app.UseStaticFiles();
app.MapControllerRoute(name: "default", pattern: "{controller=Home}/{action=Index}/{id?}");
app.MapGet("/health", () => Results.Ok(new { status = "healthy" }));
app.Run();

Next.js (SSR on App Service)

// next.config.js
module.exports = {
  output: 'standalone',  // Required for App Service deployment
};

Startup command in App Service:

node server.js

Django

# settings.py
ALLOWED_HOSTS = ['.azurewebsites.net', 'localhost']
STATIC_ROOT = BASE_DIR / 'staticfiles'
CSRF_TRUSTED_ORIGINS = ['https://*.azurewebsites.net']

Express + React (served from build)

const express = require('express');
const path = require('path');
const app = express();

app.use(express.json());
app.use('/api', apiRouter);
app.use(express.static(path.join(__dirname, '../web/build')));
app.get('/health', (req, res) => res.json({ status: 'healthy' }));
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, '../web/build/index.html'));
});

app.listen(process.env.PORT || 3000);

App Service Configuration

resource webApp 'Microsoft.Web/sites@2023-12-01' = {
  properties: {
    siteConfig: {
      linuxFxVersion: 'NODE|20-lts'  // or DOTNETCORE|8.0, PYTHON|3.12
      healthCheckPath: '/health'
      appCommandLine: ''              // Custom startup command if needed
      appSettings: [
        { name: 'SCM_DO_BUILD_DURING_DEPLOYMENT', value: 'true' }
        { name: 'WEBSITE_NODE_DEFAULT_VERSION', value: '~20' }
      ]
    }
  }
  tags: {
    'azd-service-name': 'web'
  }
}

Startup Commands by Runtime

Deployment

ENV_NAME="$(basename "$PWD" | tr '[:upper:]' '[:lower:]' | tr ' _' '-')-dev"
azd init -t <template> -e "$ENV_NAME" --no-prompt
azd env set AZURE_LOCATION eastus2
azd up --no-prompt

PowerShell:

$ENV_NAME = "$(Split-Path -Leaf (Get-Location) | ForEach-Object { $_.ToLower() -replace '[ _]','-' })-dev"
azd init -t <template> -e $ENV_NAME --no-prompt
azd env set AZURE_LOCATION eastus2
azd up --no-prompt

References

• Deploy to App Service
• Node.js on App Service
• Python on App Service