Deployment

First thing first

👉 Copy this repository into your own account

To Copy a GitHub repository click on the use this template button on the top right of the screen.

Provide a name. It can be anything, it just needs to be unique in your account (you can keep TinyBlazorAdmin if you want). Add a description it you want and click the button Create repository from template.

After a few seconds, you should now be in your version of the TinyBlazorAdmin project. If you need more detail have a look to this GitHub doc: Fork a repo.

Make sure you are currently in YOUR GitHub repository.

Deploy AzUrlShortener (the Backend)

This project is a frontend for Azure Url Shortener. If it's not already done you will need to deploy this project in your Azure subscription.

Deploy TinyBlazorAdmin

There are many ways you could run Tiny Blazor Admin website. In this deployment, we will use the new Azure Static Web App (SWA).

Open Azure portal (portal.azure.com), open the resource group where you created the backend (ex: streamDemo is our case). Click the "+" and search Static Web App, and click the Create button.

Note: You will need to Authorize Azure Static Web Apps, to have access to your GitHub repository (the one created when you forked the project). This is required because SWA uses GitHub Action to deploy.

Select your organization, repository and branch (ex: main).

Select Blazor as your Build Presets. The App location needs to be the location of the project file; in our case src/admin. The Api is in the src/api. The App artifact location can be left to wwwroot.

Once it's all filled, click the Review, and create button.

This will create a continuous integration continuous deployment (CI-CD) on in your GitHub repository. You can see it in the tab Actions

It will take a few minutes to get deployed. When finished successfully, you will see a little green circle with a check mark in it.

Configuration

Let's add the connection to the Azure Storage table. In your AzUrlShortener resource group us look for the Azure storage starting by "urldata" and grab the connectionstring.

Now that we have the connectionstring, add it the application setting of the Azure static web App under the name UlsDataStorage.

The TinyBlazorAdmin doesn't need to have a custom domain name. It's just a website that will be used internally. So, we can use the default URL provided by Azure Static Web App. However, to let it know what is the domain add another application setting named customDomain. This will be used in the copy button to quickly copy the short URL to the clipboard.

⚠️ Don't forget to save by clicking the Save button, at the top of the page.

Create Invite to add users to the Admin role

Users need to be part of the of the role admin (all lowercase). To add them you need to use the Role management interface from in the Azure portal.

From the portal, open your static web app and select the Role management from the left options list. From there click the Invite button make sure you type admin all lowercase without extra spaces in the Role field.

This will create an invite that you can share with the recipient. Once the invite is accepted, the name should be visible in the list.

Try it!

Voila, the deployment is now completed. You can test it by creating a new short URL using the admin SWA.