Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions .vscode/settings.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
{
"azureFunctions.deploySubpath": ".",
"azureFunctions.postDeployTask": "npm install (functions)",
"azureFunctions.projectLanguage": "JavaScript",
"azureFunctions.projectRuntime": "~4",
"debug.internalConsoleOptions": "neverOpen",
"azureFunctions.projectLanguageModel": 4,
"azureFunctions.preDeployTask": "npm prune (functions)"
}
143 changes: 96 additions & 47 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,82 +1,105 @@
---
name: "Azure Functions JavaScript HTTP Trigger using AZD"
description: This repository contains an Azure Functions HTTP trigger quickstart written in JavaScript and deployed to Azure Functions Flex Consumption using the Azure Developer CLI (AZD). This sample uses managed identity and a virtual network to insure it is secure by default.
name: Azure Functions JavaScript HTTP Trigger using Azure Developer CLI
description: This repository contains an Azure Functions HTTP trigger quickstart written in JavaScript and deployed to Azure Functions Flex Consumption using the Azure Developer CLI (azd). The sample uses managed identity and a virtual network to make sure deployment is secure by default.
page_type: sample
languages:
- azdeveloper
- bicep
- nodejs
- JavaScript
- javascript
products:
- azure
- azure-functions
- entra-id
urlFragment: functions-quickstart-javascript-azd
---

# Azure Functions JavaScript HTTP Trigger using AZD
# Azure Functions JavaScript HTTP Trigger using Azure Developer CLI

This repository contains a Azure Functions HTTP trigger quickstart written in JavaScript and deployed to Azure using Azure Developer CLI (AZD). This sample uses managed identity and a virtual network to insure it is secure by default.
This repository contains an Azure Functions HTTP trigger reference sample written in JavaScript and deployed to Azure using Azure Developer CLI (`azd`). The sample uses managed identity and a virtual network to make sure deployment is secure by default.

## Getting Started
This source code supports the article [Quickstart: Create and deploy functions to Azure Functions using the Azure Developer CLI](https://learn.microsoft.com/azure/azure-functions/create-first-function-azure-developer-cli?pivots=programming-language-javascript).

### Prerequisites
## Prerequisites

1) [Node.js 20](https://www.nodejs.org/)
2) [Azure Functions Core Tools](https://learn.microsoft.com/azure/azure-functions/functions-run-local?tabs=v4%2Cmacos%2Ccsharp%2Cportal%2Cbash#install-the-azure-functions-core-tools)
3) [Azure Developer CLI (AZD)](https://learn.microsoft.com/azure/developer/azure-developer-cli/install-azd)
4) [Visual Studio Code](https://code.visualstudio.com/) - Only required if using VS Code to run locally
+ [Node.js 20](https://www.nodejs.org/)
+ [Azure Functions Core Tools](https://learn.microsoft.com/azure/azure-functions/functions-run-local?pivots=programming-language-javascript#install-the-azure-functions-core-tools)
+ [Azure Developer CLI (`azd`)](https://learn.microsoft.com/azure/developer/azure-developer-cli/install-azd)
+ To use Visual Studio Code to run and debug locally:
+ [Visual Studio Code](https://code.visualstudio.com/)
+ [Azure Functions extension](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azurefunctions)

### Get repo on your local machine
Run the following GIT command to clone this repository to your local machine.
```bash
git clone https://github.com/Azure-Samples/functions-quickstart-javascript-azd.git
```
## Initialize the local project

You can initialize a project from this `azd` template in one of these ways:

+ Use this `azd init` command from an empty local (root) folder:

```shell
azd init --template functions-quickstart-javascript-azd
```

Supply an environment name, such as `flexquickstart` when prompted. In `azd`, the environment is used to maintain a unique deployment context for your app.

+ Clone the GitHub template repository locally using the `git clone` command:

```shell
git clone https://github.com/Azure-Samples/functions-quickstart-javascript-azd.git
cd functions-quickstart-javascript-azd
```

## Run on your local environment
You can also clone the repository from your own fork in GitHub.

## Prepare your local environment

Add a file named `local.settings.json` in the root of your project with the following contents:

### Prepare your local environment
1) Create a file named `local.settings.json` and add the following:
```json
{
"IsEncrypted": false,
"Values": {
"IsEncrypted": false,
"Values": {
"AzureWebJobsStorage": "UseDevelopmentStorage=true",
"FUNCTIONS_WORKER_RUNTIME": "node"
}
}
}
```

### Using Functions CLI
1) Open this folder in a new terminal and run the following commands:
## Run your app from the terminal

```bash
npm install
func start
```
1. Run these commands to start the Functions host locally:

2) Test the HTTP GET trigger using the browser to open http://localhost:7071/api/httpGetFunction
```shell
npm install
func start
```

3) Test the HTTP POST trigger in a new terminal window with the following command, or use your favorite REST client, e.g. [RestClient in VS Code](https://marketplace.visualstudio.com/items?itemName=humao.rest-client), PostMan, curl. `test.http` has been provided to run this quickly.
1. From your HTTP test tool in a new terminal (or from your browser), call the HTTP GET endpoint: <http://localhost:7071/api/httpget>

```bash
curl -i -X POST http://localhost:7071/api/httppostbodyfunction -H "Content-Type: text/json" --data-binary "@src/functions/testdata.json"
```
1. Test the HTTP POST trigger with a payload using your favorite secure HTTP test tool. This example uses the `curl` tool with payload data from the [`testdata.json`](./src/functions/testdata.json) project file:

```shell
curl -i http://localhost:7071/api/httppost -H "Content-Type: text/json" -d "@src/functions/testdata.json"
```

1. When you're done, press Ctrl+C in the terminal window to stop the `func.exe` host process.

### Using Visual Studio Code
1) Open this folder in a new terminal
2) Open VS Code by entering `code .` in the terminal
3) Make sure the [Azure Functions extension](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azurefunctions) is installed
4) Add required files to the `.vscode` folder by opening the command palette using `Crtl+Shift+P` (or `Cmd+Shift+P` on Mac) and selecting *"Azure Functions: Initialize project for use with VS Code"*
5) Press Run/Debug (F5) to run in the debugger (select "Debug anyway" if prompted about local emulater not running)
6) Use same approach above to test using an HTTP REST client
## Run your app using Visual Studio Code

1. Open the root folder in a new terminal.
1. Run the `code .` code command to open the project in Visual Studio Code.
1. Press **Run/Debug (F5)** to run in the debugger. Select **Debug anyway** if prompted about local emulator not running.
1. Send GET and POST requests to the `httpget` and `httppost` endpoints respectively using your HTTP test tool (or browser for `httpget`). If you have the [RestClient](https://marketplace.visualstudio.com/items?itemName=humao.rest-client) extension installed, you can execute requests directly from the [`test.http`](./src/functions/test.http) project file.

## Source Code

The key code that makes tthese functions work is in `./src/functions/httpGetFunction.cs` and `.src/functions/httpPostBodyFunction.cs`. The function is identified as an Azure Function by use of the `@azure/functions` library. This code shows a HTTP GET triggered function.
The source code for the GET and POST functions is in the [`httpGetFunction.js`](./src/functions/httpGetFunction.js) and [`httpPostBodyFunction.js`](./src/functions/httpPostBodyFunction.js) code files, respectively. Azure Functions requires the use of the `@azure/functions` library.

This code shows an HTTP GET triggered function:

```javascript
const { app } = require('@azure/functions');

app.http('httpGetFunction', {
app.http('httpget', {
methods: ['GET'],
authLevel: 'function',
handler: async (request, context) => {
Expand All @@ -88,12 +111,13 @@ app.http('httpGetFunction', {
}
});
```
This code shows a HTTP POST triggered function which expects `person` object with `name` and `age` values in the request.

This code shows an HTTP POST triggered function that expects `person` object with `name` and `age` values in the request body.

```javascript
const { app } = require('@azure/functions');

app.http('httpPostBodyFunction', {
app.http('httppost', {
methods: ['POST'],
authLevel: 'function',
handler: async (request, context) => {
Expand Down Expand Up @@ -126,8 +150,33 @@ app.http('httpPostBodyFunction', {

## Deploy to Azure

To provision the dependent resources and deploy the Function app run the following command:
```bash
Run this command to provision the function app, with any required Azure resources, and deploy your code:

```shell
azd up
```
You will be prompted for an environment name (this is a friendly name for storing AZD parameters), a Azure subscription, and an Aure location.

You're prompted to supply these required deployment parameters:

| Parameter | Description |
| ---- | ---- |
| _Environment name_ | An environment that's used to maintain a unique deployment context for your app. You won't be prompted if you created the local project using `azd init`.|
| _Azure subscription_ | Subscription in which your resources are created.|
| _Azure location_ | Azure region in which to create the resource group that contains the new Azure resources. Only regions that currently support the Flex Consumption plan are shown.|

After publish completes successfully, `azd` provides you with the URL endpoints of your new functions, but without the function key values required to access the endpoints. To learn how to obtain these same endpoints along with the required function keys, see [Invoke the function on Azure](https://learn.microsoft.com/azure/azure-functions/create-first-function-azure-developer-cli?pivots=programming-language-javascript#invoke-the-function-on-azure) in the companion article [Quickstart: Create and deploy functions to Azure Functions using the Azure Developer CLI](https://learn.microsoft.com/azure/azure-functions/create-first-function-azure-developer-cli?pivots=programming-language-javascript).

## Redeploy your code

You can run the `azd up` command as many times as you need to both provision your Azure resources and deploy code updates to your function app.

>[!NOTE]
>Deployed code files are always overwritten by the latest deployment package.

## Clean up resources

When you're done working with your function app and related resources, you can use this command to delete the function app and its related resources from Azure and avoid incurring any further costs:

```shell
azd down
```
2 changes: 1 addition & 1 deletion src/functions/httpGetFunction.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
const { app } = require('@azure/functions');

app.http('httpGetFunction', {
app.http('httpget', {
methods: ['GET'],
authLevel: 'function',
handler: async (request, context) => {
Expand Down
2 changes: 1 addition & 1 deletion src/functions/httpPostBodyFunction.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
const { app } = require('@azure/functions');

app.http('httpPostBodyFunction', {
app.http('httppost', {
methods: ['POST'],
authLevel: 'function',
handler: async (request, context) => {
Expand Down
4 changes: 2 additions & 2 deletions src/functions/test.http
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
GET http://localhost:7071/api/httpGetFunction HTTP/1.1
GET http://localhost:7071/api/httpget HTTP/1.1

###

POST http://localhost:7071/api/httpPostBodyFunction HTTP/1.1
POST http://localhost:7071/api/httppost HTTP/1.1
content-type: application/json

{
Expand Down