Learn how to implement a fully working, end-to-end, full-stack solution using Azure Static Web Apps, Azure Functions and Azure SQL Serverless. In this session we’ll see and build together the simple (but not too simple!) To-Do list reference app, using Vue.js, CI/CD and more!

This demo has been used in the Azure Serverless Conference 2021. Make sure to check out the recording and get the slides here:

• Slides: https://www.slideshare.net/davidemauri/azure-serverless-fullstack-kickstart
• Recording: https://www.youtube.com/watch?v=TIh52zbi8Dk

To run this sample in your subscription, make sure to fork the repository into your organization or account.

This repo has several branches that shows the development at different stages

• 1.0: This branch

In this branch the solution will have a full working front-end, sending REST request to the fully working backend REST API. The to-do list is saved in-memory using a List object. No authentication or authorization is supported.

• /api: the NodeJs Azure Function code used to provide the backend API, called by the Vue.Js client.
• /client: the Vue.Js client. Original source code has been taken from official Vue.js sample and adapted to call a REST client instead of using local storage to save and retrieve todos

Make sure you have Node as it is required by Azure Functions Core Tools and also by Azure Static Web Apps. The backend API will be using .NET Core, but Node is needed to have the local development experience running nicely.

Also install the Azure Function Core Tools v4:

npm i -g azure-functions-core-tools@4 --unsafe-perm true

Also install the Azure Static Web Apps CLI:

npm i -g @azure/static-web-apps-cli

Before starting the solution locally, you have to configure the Azure Function that is used to provide the backed API. In the ./api folder create a local.settings.json file starting from the provided template. Also, if you want to run Azure Functions locally, for example to debug them, you also need a local Azure Storage emulator. You can use Azurite that also has a VS Code extension.

Make sure Azurite is running and then start the Azure Static Web App emulator:

swa start ./client --api-location ./api 

and you'll be good to go.

once this text will appear:

Azure Static Web Apps emulator started at http://localhost:4280. Press CTRL+C to exit.

everything will be up and running. Go the the indicated URL and you'll see the ToDo App. Go an play with it, it will work perfectly, having the Vue.js frontend calling the REST API provided by the Azure Function and storing the to-do list in a List object.

Now that you know everything works fine, you can deploy the solution to Azure. You can take advantage of the script ./azure-deploy.sh that will deploy the Azure Static Web app for you.

The first time the script will run will create an empty .env file in the sample root folder that you have to fill out. Aside from the usual Azure information like the resource group, the location and the app name, you also have to provide a GitHub Token.

The GitHub Token is needed as Azure Static Web App will create a GitHub action in your repository in order to automate deployment of the solution to Azure. That is right: every time you'll push a code change to your code main code branch, the application will also be re-built and deployed in Azure.

Make sure you set the variable gitSource to the address of your forked repository.

Run the ./azure-deploy.sh script and the Azure Static Web app will be deployed in specified resource group. You can run the script using WSL, or Linux or Azure Cloud Shell.

Once the deployment script has finished, you can go to the created Azure Static Web App in the Azure Portal and you can see it as been connected to the specified GitHub repository. Azure Static Web App has also created a new workflow in the GitHub repository that uses GitHub Actions to define the CI/CD pipeline that will build and publish the website every time a commit is pushed to the repo.

An example of the Azure Static Web App url you'll get is something like:

https://victorious-rock-01b2b501e.azurestaticapps.net/

The first time you'll visit the URL you might not see any to-do item, even if a couple are already inserted in the in-memory list as an example. This is due the fact that the Azure Function running behind the scenes can take several seconds to start up the first time.

Now that the solution is working nicely, it is time to add the database to the picture. Branch 2.0 will guide you in doing that.