IE AzUrlShortener

Forked from microsoft/AzUrlShortener

A simple and easy to use and to deploy budget-friendly Url Shortener for everyone. It runs in your Azure (Microsoft cloud) subscription.

Features:

• Redirect different destination base on schedules.
• Keep statistics of your clicks.
• Budget-friendly and 100% open-source.
• Extensible for more enterprise-friendly configurations
• Simple step by step deployment.

This uses Azure's Static Web App (SWA) service to deploy both the FE (Blazor) and BE (Azure Functions) using GitHub Actions.

Pre-requisites

• Install Azure Functions Core Tools
• Install Azure Static Web Apps CLI
• Access to the url_shortener Resource Group within IE's non-prod Azure directory (Engineering Director or Associate Director can grant access)
• Add your user identity to the SWA by following these steps
• Contribution permissions to this repo if you want to make updates

How To Deploy

This is done through the GitHub Actions workflow file.

It will automatically begin when the main branch either has a commit pushed or a PR has been created/modified.

A workflow_dispatch trigger has been set up so that you can manually run a deployment - view this to see how.

Completed steps

The initial deployment to Azure within the Resource Group has been completed by following the original repository steps to:

1. Deploy the FE TinyBlazorAdmin app. Please read the steps here.
2. Deploy the Azure Function and supported resources. Please read the steps here.

Local Development

This project uses the Admin UI (Tiny Blazor Admin) app by default instead of directly accessing the Azure Function.

Function App

1. Create a local.settings.json file from local.settings.example.json in the root of the Azure Functions project
2. Replace Values.DataStorage with the connection string from the Storage Account → Security + networking → Access keys
3. If you want to start just the function app you can run func start from the project root otherwise continue the steps below

Static Web App

SWA CLI is used to run the FE app and API together - read more here about why a SWA CLI emulator is required which will answer many questions including the mock authentication/authorization server. In short - it will proxy requests sent to the local SWA port to the Client (TinyBlazorAdmin) or API (Functions) respective ports and allow us to debug both projects from the same port.

Configuration values are defined in swa-cli.config.json so that defining options at runtime aren't required. See the docs for more information on the schema.

For local development:

1. Run swa start app command from the repo root
2. Wait for both Azure Function and Blazor to start up and the emulator to launch
3. Access the emulator at http://localhost:4280/
4. When logging in with the mock auth flow - ensure you add the value admin to User's roles

See: https://learn.microsoft.com/en-us/azure/static-web-apps/local-development

Debugging

Depending on your preference, you can debug in Visual Studio Code, Browser, or Visual Studio.

Visual Studio

1. Run swa start debug from the repo root
2. In VS press F5 or the Start Debugging icon
   • ⚠️ Ensure your browser to launch the app is Chromium-based. It will not work with Firefox. Do this by selecting the dropdown next to the run/debug button
3. Once the browser has launched, you can begin debugging in VS by doing actions that will hit any breakpoints set

Browser

1. Run swa start app from the repo root
2. In your Chromium-based browser at http://localhost:4280/ start remote debugging by pressing Shift+Alt+d
3. You will see a new tab open with the title Unable to find debuggable browser tab to state remote debugging is disabled
4. Enable it by following the instructions based on your browser to enable it
5. A new browser window will open up with the app
6. Close the original browser windows and use this new one
7. Start remote debugging by pressing Shift+Alt+d
8. A new tab will open with dev tools and an image of the app
9. Move this tab to a separate window instance to remove the The tab is inactive message
10. You can navigate through the file:// node to set breakpoints on the client-side code and begin the debugging process

Note: This debugs the client-side app through the browser but not the API. If you want to debug the API specifically you should run both client/server applications separately. You can do this by following the Visual Studio debugging method.

See: Debug Blazor WebAssembly with Google Chrome or Microsoft Edge

Visual Studio Code

// TODO

See Microsoft's documentation here for more information.

How To Use It

AzUrlShortener is an API without admin UI by default. However, for IE we are using the Tiny Blazor Admin app by default and not the API.

Static Web App

You can access the domain by retrieving the URL from the URL-Shortener-Admin SWA resource within Azure Portal.

Tiny Blazor Admin

README.md

Optional steps

• Azure Storage Explorer - you can use this tool to access the storage service - please read how to set it up here

Notes

The upstream repo uses a dedicated Azure Function resource to access it via. an API. This may be outdated information as Azure SWA Free plan only supports Azure Functions in their Managed APIs (as opposed to Bring Your Own APIs).

That is the reason why we explicitly set the api_location in the workflow file.

Source: https://learn.microsoft.com/en-us/azure/static-web-apps/apis-overview

Future considerations

1. Integrate Application Insights
2. Custom domain
3. Migrate (deprecrated) Microsoft.Azure.Cosmos.Table to Azure.Data.Tables