First Serverless API

steps.md

Create Your First Serverless API

Setup

1. Open VS Code
2. Go to _git folder

Video 1 - Create Your First Function Using VS Code

Create your first Serverless Function using VS Code

Create the Function Project and Function

1. Make a folder named first-serverless-api

2. Open the folder in VS Code

3. Install the extension Azure Functions (Reload if needed)

   If you do not have the Azure Functions Core Tools installed, you will be automatically prompted to install. Follow the specified instructions.

4. Open Command Palette

5. Enter and select Azure Functions: Create New Project

6. Select the folder first-serverless-api

7. Select JavaScript

8. Select HTTP Trigger

9. Enter the name of the function as products-get

10. Select Anonymous for the Authorization Level

Trigger the endpoint

1. Open Command Palette
2. Enter and select Terminal: Create New Integrated Terminal
3. In the terminal, type func start
4. Open your browser (Edge)
5. Navigate to http://localhost:7071/api/products-get/?name=John

Video 2 - Walkthrough the directory structure update the function

Walkthrough the directory structure

Explore the key files

1. Open the folder first-serverless-api in VS Code
2. The products-get folder is where the your first function was created
3. The function.json file is where you can configure how your function is triggered and behaves.
4. The index.js file contains the logic for your function.
5. sample.dat is a placeholder file for sample data.
6. Open the file .vscode/launch.json to see your debugging configuration
7. All files listed in .funcignore will not be published to Azure
8. All files listed in .gitignore will be ignored by git
9. The host.json metadata file contains global configuration options that affect all functions for a function app.
10. The local.settings.json file stores app settings, connection strings, and settings used by local development tools.
11. The package.json file is where your npm scripts and npm package dependencies are listed.
12. The proxies.json file is where you can specify endpoints on your function app that are implemented by another resource. Which can be used to split a large API into multiple function apps whule still presenting a single API surface.

Video 3 - Update the function

Update the function to get a list of products

Modify the function to get products

1. Open the folder first-serverless-api in VS Code
2. Create a file product-data.js
3. Paste the snippet data-products for the data
4. Open the products-get/index.js file
5. Delete all of the code
6. Paste the snippet func-products for getting products
7. Examine the code and the require statement

Modify the function to be HTTP Get for api/products

1. Open the file products-get/function.json
2. Remove the post from the methods array
3. Add the property for route: 'products'
4. The endpoint will now be triggered only on a GET request to api/products

Trigger the endpoint

1. Open Command Palette
2. Enter and select Terminal: Create New Integrated Terminal
3. In the terminal, type func start
4. Open your browser (Edge)
5. Navigate to http://localhost:7071/api/products

Video 4 - Debugging a Serverless Application

Debugging a Serverless Application

Explore the Debug Configuration

1. Open the folder first-serverless-api in VS Code
2. Open the file .vscode/launch.json to see your debugging configuration
3. This configuration was created for you when you created the Function project

Set a breakpoint

1. Open the products-get/index.js file
2. Set a breakpoint in the gutter on the line of code that gets the products

Run the debugger

1. Click the Run and Debug icon in the Activity Bar
2. The Run view displays all information related to running and debugging and has a top bar with debugging commands and configuration settings.
3. Select Attach to Node Functions
4. Click the green arrow to debug (this will start the functions app)

Trigger the endpoint

1. Open your browser (Edge)
2. Navigate to http://localhost:7071/api/products
3. Examine how the debugger stops on your breakpoint

Data Inspection

1. Everythign about debugging is here in the Run and Debug view
2. Explore the variables windows
3. Explore the Local and Closure lists
4. Hover over the products array, notice how it is undefined
5. Step over the line of code.
6. Hover over the products array and notice how it changed
7. Expand the variables
8. Point out the Watch, Call Stack, and Breakpoints panels
9. Tell the debugger continue to run
10. Stop the debugger

Video 5 - Install Node Modules in your Serverless Function

Install Node Modules in your Serverless Function

Update the function to format the expiration dates

Install date-fns

1. Open the folder first-serverless-api in VS Code
2. Open Command Palette
3. Enter and select Terminal: Create New Integrated Terminal
4. In the terminal, type npm install date-fns
5. Examine package.json to see the new dependency

Import date-fns

1. Open the products-get/index.js file
2. Import date-fns by pasting the snippet func-products-date-fns
3. Examine the code and the require statement

Modify the function to format the dates

1. Open the products-get/index.js file
2. Change the variable from products to rawProducts when retrieving the data
3. Create a new line of code beneath the const rawProducts
4. Paste the snippet func-products-format to format the dates with YYYY-MM-DD in a new array named products
5. Examine the array map function and the spread operator logic briefly

Trigger the endpoint

1. Open Command Palette
2. Enter and select Terminal: Create New Integrated Terminal
3. In the terminal, type func start
4. Open your browser (Edge)
5. Navigate to http://localhost:7071/api/products