How do I connect Azure Httptrigger to website?

Question

I have limited experience with creating websites/front-end - just HTML/CSS - and work mostly on the backend - Node.js in Azure functions.

I have created an Azure function (httptrigger) that I would like a button on my website to hit.

For example, like a search bar, I want a user to type something and click search. After they click search I want to hit the http trigger with the search contents in the query string.

After hitting my trigger, I would then want it to return some data to show on the webpage.

I am struggling with adding the search content to the query string (and perhaps securely hiding the httptrigger endpoint?) and how I would send data back to the html website.

At the moment, I have built the httptrigger to work and return html data via context.res= {body: html} which works fine when I post the httptrigger url into my browser, but of course I want this to send data back and affect the current webpage with the search bar, by adding the results below it.

Any pointers or tips here would be greatly appreciated as I'm not too experienced sewing the front end together with this.

Thanks!

First, you won't be able to hide the function url from the user unless you have a back end that calls it. If you're ok with that, your best bet for implementing the solution you've come up with is to send the request to the function using javascript and ajax. However, how is your html hosted? You know node.js, so have you considered an azure app service hosting the node app? — Jason P
Apologies for not understanding - what do you mean how is it hosted? It is on hostgator, hosted separately from Azure. And what do you mean an azure app service for the node app? Which node app are you referring too? I already have my httptrigger in an azure function app service. — JDT
That answers my questions. You can host a full, stand-alone node.js web app in azure app service like this docs.microsoft.com/en-us/azure/app-service/…. If that doesn't work for you, I think you'll need to use ajax to hit the function app from the html page. — Jason P
Ok, you mean to create the website/page entirely on a new App Service? Would I be able to connect my current website to this to have the url not include azurewebsites? OR should I just host this page on azure. Do you recommend this as the best way going forward? — JDT
I would recommend hosting the entire website on app service, though that will probably be more expensive than what you're doing now. If you're just concerned about the azurewebsites.net domain, you can set up a custom domain for your function app. — Jason P

Josh Carlisle Josh Carlisle · Accepted Answer · 2018-09-06T16:35:28

So my suggestion is to break this down a little bit and possibly create some new more specific questions based on that breakdown. As it is this is pretty broad.

Realize that from your web site's (front end) perspective there isn't anything different about hitting and Azure Function Http Trigger then any other REST endpoint and the answer to how to wire it in on the front end is going to vary greatly based on any frameworks you may be using (sometimes those frameworks even want data returned in a specific way as well).

With that knowledge in mind I would focus first on ensuring your Azure Function is properly configured and generating a JSON result you expect before trying to work with the UI. I can give you some suggestions in that regard:

You mentioned "hiding" your endpoint. You need to identify first how you want to secure it as you won't be able to "hide" it as long as it's on the internet. If it's an anonymous site you're going to have limited options. If you are behind a login you have many more options but most best practices utilize some sort of token based approach (Oauth, Custom, etc). Azure Functions do have the concept of Function Keys you can pass in but this really only applies to non browser usage of the APIs where they can be kept secret. Any key you add into your front end would be visible to everyone and essentially useless (unless you just want to block folks randomly hitting your endpoints).
Update the CORS settings in Azure Functions to ensure the domain(s) that are using your API are configured otherwise you'll get blocked by cross-domain restrictions in browsers. More can be found at https://docs.microsoft.com/en-us/azure/azure-functions/functions-how-to-use-azure-function-app-settings#cors
Create a function with some mock data in the format you want (you can circle back later and pull it from a real data source once you have it working). Snippet example below using a couple hard coded states.

module.exports = function(context, req) {
  if (req.query.filter) {
    // Do something with the filter parameter when loading results
    context.res = {
      body: '[{"name": "New York","abbreviation": "NY"},{"name": "Ohio","abbreviation": "OH"}]',
      headers: {
        'Content-Type': 'application/json'
      }
    };
  } else {
    context.res = {
      status: 400,
      body: "Please pass a filter on the query string"
    };
  }
  context.done();
};

Once you have a working function that returns back your data then move on to tackle your UI integration.

How do I connect Azure Httptrigger to website?

1 Answers