Serverless Pizza Workflow Visualizer

A pizza-themed visualization of an Azure serverless back-end process that uses pubsub to display the progress in realtime.

Description

This repo contains a web application that visualizes the progress of a business process that has been implemented with Azure Functions & Durable Functions. Read the full blog post or watch the YouTube video to learn more.

Tech stack

High-level component view of the solution.

The project uses the following components:

• Azure Functions, the serverless compute service in Azure.
• Durable Functions, an extension for Azure Functions that allows writing workflows as code and enables stateful functions.
• Vue3, the frontend framework.
• Azure Static Web Apps, the hosting solution in the cloud.
• Ably, a serverless pubsub service for realtime messaging at scale.

This diagram show the various functions and their interactions:

The Auth and PizzaWorkflow Apps showing the application flow.

Running locally

You require the following dependencies:

• .NET 6 SDK. The .NET SDK required for the C# Azure Functions.
• Node 16. The JavaScript runtime required for the Vue front-end and installing the Static Web Apps CLI.
• Azure Functions Core Tools. This is part of the Azure Functions extensions for VSCode that should be recommended for automatic installation when this repo is opened in VSCode.
• Azurite. This is an local storage emulator that is required for Durable Functions. When this repo is opened in VSCode a message will appear to install this extension.
• Azure Static Web Apps CLI. Install this tool globally by running this command in the terminal: npm install -g @azure/static-web-apps-cli.
• A free Ably Account, sign up or log in to ably.com, and create a new app and copy the API key.
• Optional: The Ably VSCode extension to have easy access to the API keys of your Ably app.

There are two components in this solution that run independently from each other:

1. The back-end that runs the Durable Functions workflow (PizzaWorkflow.csproj).
2. The Static Web App that contains the front-end (a Vue3 project) and a function app (Auth.csproj).

In order to run and test the solution locally first start the PizzaWorkflow project, then the Static Web Apps project.

Steps to run the PizzaWorkflow Function App

1. Run dotnet restore in the api/PizzaWorkflow folder to install the dependencies.
2. Rename the api/PizzaWorkflow/local.settings.json.example file to api/PizzaWorkflow/local.settings.json.
3. Copy/paste the Ably API key in the ABLY_API_KEY field in the local.settings.json file.
4. Start Azurite (VSCode: CTRL+SHIFT+P -> Azurite: Start).
5. Start the PizzaWorkflow function app by either pressing F5 or running func start in the api/PizzaWorkflow/ folder.

Steps to run the Static Web Apps locally

1. Run npm install in the root folder to install the dependencies.
2. Rename the api/Auth/local.settings.json.example file to api/Auth/local.settings.json.
3. Copy/paste the Ably API key in the ABLY_API_KEY field in the local.settings.json file.
4. Run swa start in the root folder.

Now, browse to http://localhost:4280 and click the Place Order button to start the workflow.

Contributing

Want to help contributing to this project? Have a look at our contributing guide!

More info

For more questions or comments, please contact me on our Ably Discord or reach out on Twitter.

• Join our Discord server
• Follow us on Twitter
• Use our SDKs
• Visit our website

---