Serverless architecture is transforming the way developers build and deploy applications by reducing infrastructure management overhead. This guide walks through deploying a serverless full-stack solution on Azure using Static Web Apps, Azure Functions, and Azure SQL Serverless. The example application is a To-Do list app built with Vue.js, showcasing end-to-end functionality, including CI/CD integration and database deployment.

Architecture Overview

The solution leverages the following components:

• Azure Static Web Apps: Hosts the frontend Vue.js application.
• Azure Functions: Provides backend REST APIs for business logic.
• Azure SQL Serverless: Handles data storage for the To-Do list items.

This architecture ensures scalability, cost efficiency, and minimal operational complexity, making it ideal for modern web applications.

Step 1: Setting Up the Frontend with Vue.js

Folder Structure

The frontend application is organized as follows:

• /client: Contains the Vue.js codebase, including reusable components and REST API integrations.

Install Dependencies

Ensure Node.js is installed to manage dependencies and run local development environments. Install required packages using npm:

bashnpm install

Run Locally

Start the Vue.js application locally to test its functionality before deployment:

bashnpm run serve

Step 2: Configuring the Backend with Azure Functions

Folder Structure

The backend logic resides in the /api folder, implemented as Node.js-based Azure Functions.

Install Azure Function Core Tools

Install the necessary tools for local development:

bashnpm i -g azure-functions-core-tools@4 --unsafe-perm true

Create Local Settings File

Add a local.settings.json file in the /api folder to configure environment variables like database connection strings.

Run Locally

Start the backend locally using Azure Function Core Tools:

bashfunc start

Step 3: Setting Up the Database with Azure SQL Serverless

Create an Azure SQL Database

Use the Azure CLI to create a new serverless SQL database:

bashaz sql server create -n <server-name> -l <location> --admin-user <admin-user> --admin-password <admin-password> -g <resource-group>
az sql db create -g <resource-group> -s <server-name> -n todo_v5 --service-objective GP_Gen5_2

Alternatively, use the provided ARM template in the /database folder for automated creation.

Configure Firewall Rules

Allow your local machine to connect to Azure SQL by setting up firewall rules:

bashaz sql server firewall-rule create --resource-group <resource-group> --server <server-name> --name AllowMyClientIP_1 --start-ip-address <your_public_ip> --end-ip-address <your_public_ip>

Deploy Database Objects

Choose between imperative or declarative deployment strategies:

Imperative Deployment:

1. Navigate to /database/imperative-deploy.
2. Configure connection strings in .env.
3. Run deployment scripts using DbUp:

bashdotnet run

Declarative Deployment:

1. Navigate to /database/declarative-deploy.
2. Build the SQL project into a .dacpac file using MSBuild:

bashdotnet build

3. Deploy using sqlpackage:

bash./azure-deploy-sql-db.sh

Step 4: Integrating CI/CD with GitHub Actions

Set Up GitHub Secrets

Add secrets like AZURE_SQL_CONNECTION_STRING in your GitHub repository for secure database deployment.

Modify GitHub Workflow Files

Imperative Deployment:

Add the following steps before Build And Deploy:

text- name: Setup .NET Core
  uses: actions/setup-dotnet@v1
  with:
    dotnet-version: '6.0.x'

- name: Deploy Database
  working-directory: ./database/imperative-deploy
  env:
    ConnectionString: ${{ secrets.AZURE_SQL_CONNECTION_STRING }}
  run: dotnet build && dotnet run

Declarative Deployment:

Add these steps before Build And Deploy:

text- name: Deploy Database
  uses: azure/sql-action@v1.3
  with:
    connection-string: ${{ secrets.AZURE_SQL_CONNECTION_STRING }}
    project-file: './database/declarative-deploy/todo_v5/todo_v5.sqlproj'
    build-arguments: '-c Release'

Commit and push changes to trigger automated deployments via GitHub Actions.

Step 5: Deploying to Azure

Deploy Static Web App

Use the provided azure-deploy.sh script to deploy your solution to Azure Static Web Apps. Fill out the .env file with details like resource group, location, app name, and GitHub token before running the script.

Example command:

bash./azure-deploy.sh

Step 6: Testing Locally and on Azure

Local Testing

Run both frontend and backend locally using swa start, which emulates an integrated environment for debugging.

Azure Testing

Once deployed, access your app via its generated URL (e.g., https://gentle-bush-039d94710.azurestaticapps.net). Test features like adding To-Do items and authentication functionality.

Future Enhancements

The roadmap includes additional features like caching with FusionCache, read-scale patterns for massive workloads, and password-less connections for enhanced security.

Conclusion

Deploying a serverless full-stack solution on Azure is streamlined with tools like Static Web Apps, Functions, and SQL Serverless. By integrating CI/CD pipelines and leveraging declarative or imperative database deployment strategies, developers can efficiently build scalable applications while minimizing manual effort.

This guide equips you with everything needed to deploy robust solutions that are ready for production—whether you’re building simple apps or complex enterprise systems.

Read more such articles from our Newsletter here.