Keshav Rao H

Azure-based Website View Counter

Portfolio website view counter using Azure (without border)

Overview

This project demonstrates how to build a real-time, serverless view counter for a website using Microsoft Azure. The counter tracks each page visit securely and displays the data live on a WordPress-based portfolio. It serves as a practical example of combining cloud computing, API development, and secure serverless architecture in one seamless solution.

As a cybersecurity student, I focused not just on functionality, but on ensuring the security and integrity of cloud services — making this project a perfect blend of development and cloud security.

 

💡 Applications / Use Cases

  • Real-time page view analytics for blogs, portfolios, or landing pages

  • Lightweight alternative to Google Analytics for privacy-conscious sites

  • Serverless backend counters for marketing campaign tracking

  • Teaching tool to demonstrate Azure Functions, storage, and API integration

  • Secure endpoint creation and monitoring for small web apps

 

⚙️ Requirements

  • Microsoft Azure account (Free Tier is sufficient)

  • Azure Functions (Python runtime)

  • Azure Table Storage

  • Azure Storage Explorer (for local management)

  • Visual Studio Code or any Python IDE

  • WordPress website (Elementor used for front-end integration)

 

🧩 Architecture

[Website (WordPress + JS)]
         ↓ (HTTP Trigger)
[Azure Function App (Python)]
         ↓ (Storage SDK)
[Azure Table Storage (“ViewData”)]

 

🔧 Steps to Build

1. Setup Azure Storage

  • Go to the Azure portal, create a Storage Account

  • Under it, create a Table named ViewData

  • Ensure you retain the Connection String

2. Create Azure Function

  • Use VS Code with the Azure Functions extension

  • Create a new HTTP Triggered Function (Python)

				
					import azure.functions as func
from azure.data.tables import TableServiceClient
import json

connection_string = "YOUR_CONNECTION_STRING"
table_name = "ViewData"

def main(req: func.HttpRequest) -> func.HttpResponse:
    try:
        client = TableServiceClient.from_connection_string(conn_str=connection_string)
        table_client = client.get_table_client(table_name=table_name)
        
        # Check if 'HomePage' record exists
        try:
            entity = table_client.get_entity(partition_key='Counter', row_key='HomePage')
            entity['Count'] += 1
        except:
            entity = {'PartitionKey': 'Counter', 'RowKey': 'HomePage', 'Count': 1}
        
        table_client.upsert_entity(entity)
        return func.HttpResponse(json.dumps({"views": entity['Count']}), mimetype="application/json")
    except Exception as e:
        return func.HttpResponse(f"Error: {str(e)}", status_code=500)
3. Deploy to Azure

  • Log in using Azure CLI

  • Create a Function App

  • Deploy the code using the Azure Function extension or CLI

4. Connect to Front-End

  • Use the Function App’s URL in your WordPress site

  • Embed this JavaScript inside an Elementor HTML widget:

				
					<script>
  fetch("https://<your-function-url>")
    .then(response => response.json())
    .then(data => {
      document.getElementById("view-counter").innerText = "Views: " + data.views;
    });
</script>

<div id="view-counter">Views: ...</div>

❗ Challenge Faced

One major issue occurred when I deleted and recreated Azure Tables. The bindings and table references broke, causing persistent 500 Internal Server Errors. The issue was resolved by ensuring consistent table naming, correct partition/row keys, and re-deploying the updated function.

🔐 Cybersecurity Angle

This project showcases secure use of cloud APIs, CORS handling, and proper management of connection strings and minimal privilege access. It’s a simple, yet effective application of secure serverless computing — a growing necessity in modern cloud-native development.

Description

  • June 2, 2025

Technology