CODEWITHSUNDEEP
typescriptazureazure-functions
Telmo Trooper
Telmo Trooper

Reputation: 5694

How to replace home page in Azure Function App with something else?

Using application setting "AzureWebJobsDisableHomepage": true the default home page for an Azure Function App is disabled, but how can I replace this page with something else?

For example, having a function that returns an HTML page:

import { AzureFunction, Context, HttpRequest } from "@azure/functions"
import { promises as fs } from "fs"
import { resolve } from "path"

const httpTrigger: AzureFunction = async function (context: Context, req: HttpRequest): Promise<void> {
    const htmlPage = await fs.readFile(resolve(__dirname, "../../index.html"), "utf-8")

    context.res = {
        headers: {
            "content-type": "text/html"
        },
        body: htmlPage
    }
};

export default httpTrigger;

Setting "routePrefix": "" in host.json I should be able to serve this function from any route:

"extensions": {
  "http": {
    "routePrefix": ""
  }
}

But I just can't serve it from /, it always returns an empty page. Is there any way to overwrite this behavior?

Upvotes: 4

Views: 1927

Answers (2)

Ivar
Ivar

Reputation: 4901

There is a way to catch all of the paths (after disabling the homepage) by capturing the path as a variable:

"route": "{*restOfPath}"

in function.json.

I've done a similar thing in Go

The issue is that it overshadows other routes and the routing needs to be implemented in the code of the same catch-all function.

Upvotes: 1

anon
anon

Reputation:

Here is the workaround I did to replace the default home page of the Azure Functions (typeScript Stack - Http Trigger) with an HTML Page.

  • Firstly, Created the Azure Functions in typeScript with Http Trigger using VS Code.

  • Created the HTML File with some code under the Http Trigger Directory: HTML Code in Azure Function

  • and here is the folder structure:

    FolderStructure

  • In local.settings.json, defined the setting AzureWebJobsDisableHomepage which means Set to "true" to disable the default landing page shown for the root of the Azure Functions site.

Ref: Configuration settings Information for Azure Functions Site.

{
"IsEncrypted": false,
"Values": {
"AzureWebJobsStorage": "",
"FUNCTIONS_WORKER_RUNTIME": "node",
"AzureWebJobsDisableHomepage": "true"
}
}

Index.ts code:

import { AzureFunction, Context, HttpRequest } from  "@azure/functions"
import { promises  as  fs } from  "fs"
import { resolve } from  "path"

const  httpTrigger: AzureFunction = async  function (context: Context, req: HttpRequest): Promise<void> {
context.log('HTTP trigger function processed a request.');

var  __dirname = "HttpTrigger1";
const  htmlPage = await  fs.readFile(resolve("./" + __dirname + "/index.html"), 'utf-8');

context.res = {
headers: {
"content-type":  "text/html"
},
body:  htmlPage
}
};

export  default  httpTrigger;

Running the function locally:

enter image description here

Deployed to Azure and running in the cloud successfully:

enter image description here

Upvotes: 0

Related Questions