Build a Full-Stack App on Azure Static Web Apps, Functions, and Cosmos DB Free Tier

Cloud Provider: azure • Difficulty: intermediate Estimated Time: 90-150 minutes

What you’ll build

A lightweight full-stack application on Azure with:

Azure Static Web Apps hosting the frontend
Azure Functions powering the backend API
Azure Cosmos DB Free Tier storing application data
GitHub-based deployment automation through the Static Web Apps workflow

This recipe gives you a real web app pattern, not just a static site.

Why this recipe matters

Azure does not have as many clean always-free options as OCI or GCP, so when you find a combination that can actually support a useful app without immediately turning into a billing trap, it is worth paying attention.

This recipe is that combination.

It gives FTL an Azure story that is actually credible:

a hosted frontend
a serverless backend
real persistent storage
automatic deployment from GitHub

Why this fits the free tier

Azure Static Web Apps has a free plan that includes hosting, SSL, and custom domains.

Azure Functions provides a free grant for serverless execution on the consumption model.

Azure Cosmos DB Free Tier gives one eligible account per subscription a permanent free allocation of throughput and storage.

That makes this recipe one of the strongest Azure options for an FTL launch set.

What you need before you start

Accounts and access

An Azure account
An Azure subscription
A GitHub repository
Permission to create Static Web Apps, Functions, and Cosmos DB resources

Local software

Node.js 20 or newer
Git
Optional: Azure CLI
A code editor

Assumptions

This recipe assumes:

you want a lightweight frontend plus API pattern
you are comfortable using Azure Portal for the first deployment
you are fine letting Azure Static Web Apps create a GitHub Actions workflow for CI/CD

High-level architecture

Browser
  |
  v
Azure Static Web Apps
  |
  v
Azure Functions API
  |
  v
Azure Cosmos DB Free Tier

Step 1 - Create a GitHub repository for the app

Create or choose a GitHub repository that will hold:

the frontend code
the Azure Functions code
the deployment workflow generated by Azure Static Web Apps

A simple structure could look like this:

my-azure-app/
  app/
  api/

Where:

app contains the frontend
api contains the Azure Functions code

Step 2 - Create the Azure Cosmos DB account

In Azure Portal, create a new Cosmos DB account.

Important:

choose the API for NoSQL
enable Free Tier during creation

That matters because the free-tier discount must be enabled when the account is created.

Recommended values:

account name: something like ftl-cosmos-demo
region: choose a region close to you
capacity mode: default is fine for a small tutorial

Step 3 - Create the database and container

Once the Cosmos DB account is ready, create:

Database name: ftl
Container name: recipes
Partition key: /slug

That gives you a simple structure for storing small JSON documents.

Step 4 - Create the Azure Function App

Create a Function App in Azure.

Recommended values:

Runtime stack: Node.js
Hosting option: Consumption
Operating system: Linux or Windows, whichever you prefer
Region: keep it close to the Cosmos DB region if possible

The main point is to stay on the serverless consumption path, not a more expensive always-on plan.

Step 5 - Create an HTTP-triggered function

Add an HTTP-triggered function that will expose a small API.

For the first version, you can build a single endpoint that returns or writes recipe data.

For example:

GET /api/recipes to list items
POST /api/recipes to create an item

Step 6 - Add the Cosmos DB connection settings

In the Function App configuration, add the connection information for Cosmos DB.

You will need values such as:

Cosmos endpoint
Cosmos key
Database name
Container name

Keep those in app settings, not in source code.

Step 7 - Add the Azure Functions code

For a simple Node-based HTTP function, the structure will look something like this:

api/
  recipes/
    function.json
    index.js

Your handler should:

read request method
connect to Cosmos DB
query or insert documents
return JSON responses

A simple example flow:

GET returns all recipe records
POST inserts a new record with a slug and title

Step 8 - Create the Static Web App

In Azure Portal, create a new Static Web App.

Use these values:

deployment source: GitHub
repository: your chosen repo
app location: app
api location: api
output location: leave blank or configure based on your frontend build

When you create the resource, Azure will add a GitHub Actions workflow to your repository.

Step 9 - Add a simple frontend

In the app directory, create a very small frontend that can:

render a page
call the API endpoint
display returned records

Even a basic HTML/JavaScript frontend is enough to prove the full-stack path works.

For example, the frontend should:

fetch /api/recipes
render the JSON result in the browser

Step 10 - Commit and push the code

From your project root:

git add .
git commit -m "Add Azure Static Web App and Functions demo"
git push

This push should trigger the GitHub Actions deployment created by Azure.

Step 11 - Monitor the GitHub Actions workflow

In GitHub, open the Actions tab and watch the workflow run.

This validates that:

the app is building
the API is being deployed
Azure Static Web Apps is connected correctly to the repository

If the deployment fails, the workflow logs are your first debugging stop.

Step 12 - Test the deployed frontend

Once the workflow succeeds, open the generated Static Web Apps URL.

Verify:

the frontend loads
the page is reachable over HTTPS
assets load normally

Step 13 - Test the deployed API

Call the generated API endpoint.

If the route is recipes, test something like:

https://YOUR_STATIC_WEB_APP_URL/api/recipes

Verify that the API responds with JSON and that it can reach Cosmos DB.

Step 14 - Verify records in Cosmos DB

Open the Data Explorer in Azure Cosmos DB and confirm:

records are being written
the document shape matches what your API expects
the partition key value is reasonable

Step 15 - Add a custom domain if desired

Azure Static Web Apps free tier supports custom domains and SSL.

If you want to brand the app:

add the custom domain in Azure
create the requested DNS records at your registrar
wait for validation to complete

That gives you a branded Azure-hosted application without having to manage TLS yourself.

Step 16 - Add basic validation to the API

Before you call this production-worthy, validate incoming payloads.

At minimum, check:

required fields are present
slug values are not empty
malformed JSON returns a clean error

This keeps your tutorial realistic and reduces garbage data in Cosmos DB.

Step 17 - Security and configuration notes

For a simple tutorial, this pattern is fine.

But for anything more serious, you should eventually think about:

restricting CORS
validating request bodies
rotating keys
using managed identity or stronger connection-security patterns
separating environments for dev and prod

Don’t solve all of that on day one. Just be aware of it.

Step 18 - Validation checklist

Cosmos DB account created with Free Tier enabled
database and container created successfully
Function App created on a consumption plan
Static Web App created and connected to GitHub
GitHub Actions deployment succeeds
frontend loads over HTTPS
API endpoint responds successfully
Cosmos DB stores and returns expected data

Step 19 - Compare this recipe to the AWS and GCP patterns

This Azure pattern sits between the AWS and GCP recipes nicely.

Compared to AWS Lambda + DynamoDB:

Azure gives you a stronger integrated frontend-hosting story with Static Web Apps
AWS gives you a simpler pure-backend pattern

Compared to GCP Cloud Run:

Azure splits frontend and API into separate service layers
GCP gives you a cleaner “one container, one service” deployment path

That contrast is useful for FTL because it teaches architecture tradeoffs, not just button-clicking.

Step 20 - What to do next

Once this works, good follow-on paths include:

add a richer frontend
add authentication
add more structured Cosmos DB queries
compare cost and complexity against the AWS and GCP recipes

Source links

Azure Static Web Apps pricing and free plan: https://azure.microsoft.com/en-us/pricing/details/app-service/static/
Azure Functions pricing: https://azure.microsoft.com/en-us/pricing/details/functions/
Azure Cosmos DB Free Tier: https://learn.microsoft.com/en-us/azure/cosmos-db/free-tier