Connecting Azure Static Website to Azure Function App using HTTP Trigger
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 websiteunder the storage bladeClick 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
$webcontainer.
⚡ 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 URLYou 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!
