Skip to content

How to deploy TinyBlazorAdmin

Jump to bottom
Frank Boucher edited this page Jun 16, 2023 · 9 revisions

First thing first

👉 Fork this repository into your own account

To Fork GitHub repository click on the Fork button on the top right of the screen.

Click on the button Fork

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

Give it a name description and click Create

After a few seconds, you should now be in your version of the AzUrlShortener 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.

This should be YOUR repo

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), create a new resource group and note its name you will need it to deploy the backend (ex: streamDemo is our case). Click the "+" and search Static Web App, and click the Create button.

  • Be sure to choose Standard plan type since the API is bring-your-own (see SWA Plans for more info).
  • Also be sure to choose your GitHub account - one you have write permissions on.

Creating swa

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.

Creating swa part 2

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

Creating swa part 3

Select Blazor as your Build Presets.

  • The App location needs to be the location of the project file; in our case ./src/Cloud5mins.ShortenerTools.TinyBlazorAdmin.
  • The Api location should be left blank (delete any text that is there by default) - that will be deployed as part of the AzUrlShortener deploy.
  • The Output location should be left as wwwroot.

Once it's all filled, click the Review + create button and the Create button on the following page.

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

Github Action

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

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.

add customDomain application setting

⚠️ 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.

Create invite

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.

Be sure to wait for deployment to finish (the GitHub action completing), then follow next steps to deploy the backend.

Next Steps

Clone this wiki locally