In the previous post , we created the first part of our todo list that will be deployed to Azure Static Web App service. In this post, we will add the backend as an Azure Function
List ToDos Azure Function
Get Todos implementation
Now, let’s put a dummy implementation for the GetToDos function.
Edit the index.js file with the following code. This will return 4 Todos. The implementation can be changed later to connect to any other data source
Go to your Az Functions Tools and run the function, it should show the funcion URL in the console window
Hit http://localhost:7071/api/GetTodoList in your browser and you should be able to see the results in JSON
You can follow the same steps to create another function to add and edit Todo.
Deploy the API to Azure Static Web App
Commit and push the changes to your GitHub Repo and watch GitHub actions building and packaging the application. All the code in the repo will be built and packaged including the Azure Function.
Once the GitHub action finishes and show a success mark, open Azure Portal and go to your Azure Static Web App then click Functions on the left menu. You should be able to see the GetTodoList function there.
Once you have the function deployed, you can add configuration keys under Configuration section. One of the configuration is APPINSIGHTS_INSTRUMENTATIONKEY that can be used to link your static web app to an application insights instance which will recive all the logs made by your function using the context.log function.
Testing your API
Its time to make sure everything works fine. Click the overview tab then click on the URL for the site, it should open the static site web created in previous post. To access the API, you have to append api/FUNCTION_NAME. in our case, it will be URL/api/GetTodoList
Inspect function behavior with application insights
Since our function is now working fine, a bonus point would be to check the logs generated from it. After you create an application insights instance and add a configuration key APPINSIGHTS_INSTRUMENTATIONKEY with the app insights instrumention key, invoke the function few times then go to your app insights instance and click Search from the left menu. You should be able to see the logs
As you can see above, not only you can see the messages logged from the function but also from the azure functions runtime.
In next post, we will link the SPA to our APIs and do more fancy stuff.
The source code can be found on my GitHub repository. All you need to do is to fork it, create a new static web app and link it to the repo. https://github.com/haitham-shaddad/ng-todo-list-az-static-webapp