Ever wanted to trigger some backend logic by clicking a button on a static HTML page hosted in Azure? That's exactly what I did today — and in this post, I’ll show you step-by-step how to set up an Azure Static Website that triggers an Azure Function App using an HTTP trigger.

Let’s dive in! 🚀

🧠 What You'll Learn:

How to host a static HTML site using Azure Storage
How to create an Azure Function App with HTTP trigger
How to connect the static site to the function using JavaScript fetch()
Common mistakes & how to debug them

🛠️ Prerequisites:

Azure account
Azure Storage Account (for hosting static site)
Azure Function App (Node.js preferred)
VS Code or any IDE

🧩 Step 1: Create a Storage Account & Enable Static Website

Go to the Azure Portal → Create a Storage Account
After it’s created, go to Static website under the storage blade
Click Enable and set:
- Index document name: index.html
- (Optional) Error document path: error.html
You’ll now get a primary endpoint URL for your static website

📝 Step 2: Upload Static HTML Page

Here’s a sample index.html:

<!DOCTYPE html>
<html>
<head>
  <title>Azure Function Trigger</title>
</head>
<body>
  <h1>Hello from Static Website!</h1>
  <button onclick="triggerFunction()">Click Me</button>

  <script>
    function triggerFunction() {
      fetch("https://<your-function-app>.azurewebsites.net/api/HttpTrigger1?code=<your-code>", {
        method: "POST"
      })
      .then(response => {
        if (response.ok) {
          alert("Function triggered successfully!");
        } else {
          alert("Error triggering function.");
        }
      })
      .catch(err => {
        alert("Error: " + err.message);
      });
    }
  </script>
</body>
</html>

👉 Replace the fetch URL with the Function URL you’ll get from the Azure portal.

💡 Tip: Upload this file to your Storage container under $web container.

⚡ Step 3: Create Function App & HTTP Trigger

In Azure, go to Function App → Click + Create
Choose:
- Runtime: Node.js
- Plan: Consumption / Flex
- OS: Linux or Windows
Once deployed, go to:
- Functions → + Create
- Choose HTTP trigger
Replace the code with this basic handler:

module.exports = async function (context, req) {
    context.log("HTTP trigger function processed a request.");
    context.res = {
        status: 200,
        body: "Function triggered!"
    };
};

🔑 Step 4: Get Function URL

Go to your HTTP trigger → Get Function URL → Copy the full URL with the key (?code=...). Use this in your static site JavaScript.

🧪 Step 5: Test it!

Visit your static website URL.
Click the button — if everything is correct, you’ll see an alert:
✅ Function triggered successfully!

🛑 Common Error: "Failed to Fetch"

This usually happens because:

You're missing https:// in your fetch URL
You forgot the function access key (?code=...)
CORS isn’t configured

✅ Fix:
Go to Function App → Settings → CORS and add your static site URL (https://...web.core.windows.net)

✅ Wrap-Up

And that’s it! You’ve successfully connected:

A Static Website (frontend)
To an Azure Function (backend)
Using nothing but HTML, JS and a bit of Azure magic ✨

If you found this helpful or have any questions, feel free to drop a comment or connect with me. I'm always up for a tech chat!

💬 Let’s Connect!

➡️ LinkedIn | Portfolio

Connecting Azure Static Website to Azure Function App using HTTP Trigger