{"id":20058854,"url":"https://github.com/ably-labs/serverless-workflow-visualizer","last_synced_at":"2025-05-05T15:30:28.333Z","repository":{"id":61167183,"uuid":"528841530","full_name":"ably-labs/serverless-workflow-visualizer","owner":"ably-labs","description":"Web application that uses Ably to visualize the progress of a serverless workflow.","archived":false,"fork":false,"pushed_at":"2023-09-07T02:15:07.000Z","size":3811,"stargazers_count":6,"open_issues_count":13,"forks_count":1,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-04-09T00:41:19.730Z","etag":null,"topics":["ably","azure","azure-functions","azure-static-web-apps","demo","dotnet","pubsub","realtime","serverless","vue"],"latest_commit_sha":null,"homepage":"http://pizza.ably.dev/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ably-labs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-08-25T12:30:07.000Z","updated_at":"2025-02-15T21:52:24.000Z","dependencies_parsed_at":"2023-02-18T18:00:53.540Z","dependency_job_id":null,"html_url":"https://github.com/ably-labs/serverless-workflow-visualizer","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":"ably-labs/ably-labs-template-repo","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ably-labs%2Fserverless-workflow-visualizer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ably-labs%2Fserverless-workflow-visualizer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ably-labs%2Fserverless-workflow-visualizer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ably-labs%2Fserverless-workflow-visualizer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ably-labs","download_url":"https://codeload.github.com/ably-labs/serverless-workflow-visualizer/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252523959,"owners_count":21762007,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ably","azure","azure-functions","azure-static-web-apps","demo","dotnet","pubsub","realtime","serverless","vue"],"created_at":"2024-11-13T13:04:36.770Z","updated_at":"2025-05-05T15:30:27.764Z","avatar_url":"https://github.com/ably-labs.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Serverless Pizza Workflow Visualizer\n\nA pizza-themed visualization of an Azure serverless back-end process that uses pubsub to display the progress in realtime.\n\n![Serverless Pizza Workflow Visualizer Web App](/media/pizza-workflow.gif)\n\n## Description\n\nThis repo contains a web application that visualizes the progress of a business process that has been implemented with Azure Functions \u0026 Durable Functions.\nRead the full [blog post](https://ably.com/blog/visualize-azure-serverless-workflow-progress-in-realtime-with-pubsub?utm_content=demo-serverless-workflow-visualizer\u0026utm_source=github\u0026utm_medium=repo\u0026src=GLB-2210-serverless-workflow-visualizer-repo) or watch the [YouTube video](https://youtu.be/y9-a_ewgWCQ) to learn more.\n\n## Tech stack\n\n![Component diagram](/media/diagram1.png)\n*High-level component view of the solution.*\n\nThe project uses the following components:\n\n- [Azure Functions](https://docs.microsoft.com/azure/azure-functions/functions-overview), the serverless compute service in Azure.\n- [Durable Functions](https://docs.microsoft.com/azure/azure-functions/durable/), an extension for Azure Functions that allows writing workflows as code and enables stateful functions.\n- [Vue3](https://vuejs.org/), the frontend framework.\n- [Azure Static Web Apps](https://docs.microsoft.com/azure/static-web-apps/overview), the hosting solution in the cloud.\n- [Ably](https://ably.com/?utm_campaign=GLB-2210-serverless-workflow-visualizer\u0026utm_content=demo-serverless-workflow-visualizer\u0026utm_source=github\u0026utm_medium=repo\u0026src=GLB-2210-serverless-workflow-visualizer-repo), a serverless pubsub service for realtime messaging at scale.\n\nThis diagram show the various functions and their interactions:\n\n![Application flow](/media/diagram2.png)\n*The Auth and PizzaWorkflow Apps showing the application flow.*\n\n## Running locally\n\nYou require the following dependencies:\n\n- [.NET 6 SDK](https://dotnet.microsoft.com/download/dotnet/6.0). The .NET SDK required for the C# Azure Functions.\n- [Node 16](https://nodejs.org/en/). The JavaScript runtime required for the Vue front-end and installing the Static Web Apps CLI.\n- [Azure Functions Core Tools](https://docs.microsoft.com/azure/azure-functions/functions-run-local?tabs=v4%2Cwindows%2Ccsharp%2Cportal%2Cbash). This is part of the Azure Functions extensions for VSCode that should be recommended for automatic installation when this repo is opened in VSCode.\n- [Azurite](https://marketplace.visualstudio.com/items?itemName=Azurite.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.\n- [Azure Static Web Apps CLI](https://github.com/Azure/static-web-apps-cli). Install this tool globally by running this command in the terminal: `npm install -g @azure/static-web-apps-cli`.\n- A free Ably Account, [sign up](https://ably.com/signup?utm_campaign=GLB-2210-serverless-workflow-visualizer\u0026utm_content=demo-serverless-workflow-visualizer\u0026utm_source=github\u0026utm_medium=repo\u0026src=GLB-2210-serverless-workflow-visualizer-repo) or [log in](https://ably.com/login??utm_campaign=GLB-2210-serverless-workflow-visualizer\u0026utm_content=demo-serverless-workflow-visualizer\u0026utm_source=github\u0026utm_medium=repo\u0026src=GLB-2210-serverless-workflow-visualizer-repo) to ably.com, and [create a new app and copy the API key](https://faqs.ably.com/setting-up-and-managing-api-keys?utm_campaign=GLB-2210-serverless-workflow-visualizer\u0026utm_content=demo-serverless-workflow-visualizer\u0026utm_source=github\u0026utm_medium=repo\u0026src=GLB-2210-serverless-workflow-visualizer-repo).\n- Optional: The [Ably VSCode extension](https://marketplace.visualstudio.com/items?itemName=ably-labs.vscode-ably) to have easy access to the API keys of your Ably app.\n\nThere are two components in this solution that run independently from each other:\n\n1. The back-end that runs the Durable Functions workflow (`PizzaWorkflow.csproj`).\n2. The Static Web App that contains the front-end (a Vue3 project) and a function app (`Auth.csproj`).\n\nIn order to run and test the solution locally first start the PizzaWorkflow project, then the Static Web Apps project.\n\n### Steps to run the PizzaWorkflow Function App\n\n1. Run `dotnet restore` in the `api/PizzaWorkflow` folder to install the dependencies.\n2. Rename the `api/PizzaWorkflow/local.settings.json.example` file to `api/PizzaWorkflow/local.settings.json`.\n3. Copy/paste the Ably API key in the `ABLY_API_KEY` field in the `local.settings.json` file.\n4. Start Azurite (VSCode: `CTRL+SHIFT+P -\u003e Azurite: Start`).\n5. Start the PizzaWorkflow function app by either pressing `F5` or running `func start` in the `api/PizzaWorkflow/` folder.\n\n### Steps to run the Static Web Apps locally\n\n1. Run `npm install` in the root folder to install the dependencies.\n2. Rename the `api/Auth/local.settings.json.example` file to `api/Auth/local.settings.json`.\n3. Copy/paste the Ably API key in the `ABLY_API_KEY` field in the `local.settings.json` file.\n4. Run `swa start` in the root folder.\n\nNow, browse to `http://localhost:4280` and click the *Place Order* button to start the workflow.\n\n## Contributing\n\nWant to help contributing to this project? Have a look at our [contributing guide](CONTRIBUTING.md)!\n\n## More info\n\nFor more questions or comments, please contact me on our [Ably Discord](http://go.ably.com/discord) or reach out on [Twitter](https://twitter.com/marcduiker).\n\n- [Join our Discord server](http://go.ably.com/discord)\n- [Follow us on Twitter](https://twitter.com/ablyrealtime)\n- [Use our SDKs](https://github.com/ably/)\n- [Visit our website](https://ably.com?utm_campaign=GLB-2210-serverless-workflow-visualizer\u0026utm_content=demo-serverless-workflow-visualizer\u0026utm_source=github\u0026utm_medium=repo\u0026src=GLB-2210-serverless-workflow-visualizer-repo)\n\n---\n[![Ably logo](https://static.ably.dev/badge-black.svg?serverless-workflow-visualizer)](https://ably.com?utm_campaign=GLB-2210-serverless-workflow-visualizer\u0026utm_content=demo-serverless-workflow-visualizer\u0026utm_source=github\u0026utm_medium=repo\u0026src=GLB-2210-serverless-workflow-visualizer-repo)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fably-labs%2Fserverless-workflow-visualizer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fably-labs%2Fserverless-workflow-visualizer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fably-labs%2Fserverless-workflow-visualizer/lists"}