diff --git a/README.md b/README.md index 6c0970a..a05b789 100644 --- a/README.md +++ b/README.md @@ -7,11 +7,11 @@ ![TinyBlazorAdmin][TinyBlazorAdmin] -The project is now at version 1 and ready to be use! ~~just getting started but should have a v1 ready in Summer 2020~~. It will use Azure Active Directory (AAD) as authentication for the user and to connect to the API (Azure Function). +The project is now at version 1 and ready to be used! ~~just getting started but should have a v1 ready in Summer 2020~~. It will use Azure Active Directory (AAD) as authentication for the user and to connect to the API (Azure Function). # Deployment - Until an automatic deployment is created, you will need to deploy some part manually. [All the steps to deploy the TinyBlazorAdmin app into Azure are listed here](deployment.md). You can also run it somewhere else if you prefer, even locally. +Until an automatic deployment is created, you will need to deploy some part manually. [All the steps to deploy the TinyBlazorAdmin app into Azure are listed here](deployment.md). You can also run it somewhere else if you prefer, even locally. @@ -44,4 +44,4 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d -This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome! \ No newline at end of file +This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome! diff --git a/deployment.md b/deployment.md index 74562fd..3b24349 100644 --- a/deployment.md +++ b/deployment.md @@ -1,17 +1,17 @@ # Deployment - Until an "full automatic" deployment is created, here are all the steps to deploy the TinyBlazorAdmin app into Azure. You can run it somewhere else and even locally. +Until a "full automatic" deployment is created, here are all the steps to deploy the TinyBlazorAdmin app into Azure. You can run it somewhere else and even locally. -## First thing first +## First things first -You need to **fork this repo** into your own account. You will need to update the configuration (this document will explain when and what), therefore it needs to be yours. +You need to **fork this repo** into your own account. You will need to update the configuration (this document will explain when and what), therefore it needs to be yours. To fork a GitHub repository click on the fork button on the top right of the screen. If you need more detail have a look to this GitHub doc: [Fork a repo ](https://docs.github.com/en/free-pro-team@latest/github/getting-started-with-github/fork-a-repo). ## Deploy AzUrlShortener (the Backend) -This project is a frontend only so you will need to deploy the [Azure Url Shortener](https://github.com/FBoucher/AzUrlShortener) in "headless mode". Do to it, click the blue button below and make sure to select **none** as Frontend +This project is a frontend only so you will need to deploy the [Azure Url Shortener](https://github.com/FBoucher/AzUrlShortener) in "headless mode". To do it, click the blue button below and make sure to select **none** as Frontend [![Deploy Backend to Azure](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?WT.mc_id=urlshortener-github-frbouche#create/Microsoft.Template/uri/https%3A%2F%2Fraw.githubusercontent.com%2FFBoucher%2FAzUrlShortener%2Fmain%2Fdeployment%2FazureDeploy.json) @@ -20,7 +20,7 @@ This project is a frontend only so you will need to deploy the [Azure Url Shorte ## Deploy TinyBlazorAdmin (the Frontend) -There are many ways you could run Tiny Blazor Admin website. In this deployment, we will use the new [Azure Static Web App (SWA)](https://azure.microsoft.com/en-ca/services/app-service/static/?WT.mc_id=tinyblazoradmin-github-frbouche). However, because the TinyBlazorAdmin use Azure Active Directory (AAD), we need a standalone Azure Function (deployed at the previous step). +There are many ways you could run Tiny Blazor Admin website. In this deployment, we will use the new [Azure Static Web App (SWA)](https://azure.microsoft.com/en-ca/services/app-service/static/?WT.mc_id=tinyblazoradmin-github-frbouche). However, because the TinyBlazorAdmin uses Azure Active Directory (AAD), we need a standalone Azure Function (deployed in the previous step). 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. @@ -34,19 +34,19 @@ Select your organization, repository and branch (ex: main). ![Creating swa part 3][swa_create3] -Select **Blazor** as your *Build Presets*. The *App location* needs to be the location of the project file; in our case `src/TinyBlazorAdmin/`. The *App artifact location* can be left to wwwroot. +Select **Blazor** as your *Build Presets*. The *App location* needs to be the location of the project file; in our case `src/TinyBlazorAdmin/`. The *App artifact location* can be left as wwwroot. >Note: We don't need the Api location, because AzURLShortener is deployed in a full standalone Azure Function. -Once it's all filled, click the Review, and create button. It will takes a few minutes to get deployed. During this time let's create and configure our security components. +Once it's all filled, click the Review, and create button. It will take a few minutes to get deployed. During this time let's create and configure our security components. ## Create Azure Active Directory (AAD) Components ### Create App for the Fontend -We need a Service Principal that we will use to authenticate our user to Azure Active Directory (AAD). To achieve this we will create a application registration in Azure. +We need a Service Principal that we will use to authenticate our user to Azure Active Directory (AAD). To achieve this we will create an application registration in Azure. -From the Azure Portal (portal.azure.com), open the **Azure Active Directory** page. From the left option menu select **App registrations**, then create a new registration. Use a name that will helps you to remember that it's for the TinyBlazorAdmin website (ex: +From the Azure Portal (portal.azure.com), open the **Azure Active Directory** page. From the left option menu select **App registrations**, then create a new registration. Use a name that will help you to remember that it's for the TinyBlazorAdmin website (ex: TinyAdminApp) **Note the ClientID and TenantID.** @@ -55,13 +55,13 @@ If you need to retrieve the ClientID and TenantID, they will be display at the t ![Create a new registration][newRegistration] -Go back in the Authentication and in the section Implicit grant check the checkbox `Access Token` and ID Tokens` +Go back in the Authentication and in the section Implicit grant check the checkbox `Access Token` and `ID Tokens` ![tokensaccess][tokensaccess] ### Create App for the Azure Function -We need a second App registration, this time to let the Azure Function validate that user information contain into the token is valid. +We need a second App registration, this time to let the Azure Function validate that user information contained in the token is valid. ![First steps to create the AD App registration][azFunction_Auth_step1] @@ -73,9 +73,9 @@ From the Azure Portal, go to your Azure Function. From the left panel select the 2. Make sure *Create New AD App* is selected. 3. Give the AD App a name. 4. Click Ok. -5. DON"T FORGET TO CLICK THE SAVE BUTTON +5. DON'T FORGET TO CLICK THE SAVE BUTTON -Now, we need to configure the brand new Ad App registration. Still from the Azure portal open the *Active Directory* blade. Select the *App registration* option from the left menu. Then select the application you just created. +Now, we need to configure the brand-new Ad App registration. Still from the Azure portal open the *Active Directory* blade. Select the *App registration* option from the left menu. Then select the application you just created. ![ConfigAzFuncADapp][ConfigAzFuncADapp] @@ -89,7 +89,7 @@ Now, we need to configure the brand new Ad App registration. Still from the Azur ## Configure Backend and Frontend to Work Together -Now in your GitHub it's time to update the settings. THe code need to know the AD app to use and the Azure Function to call. Update those values inside `TinyBlazorAdmin\wwwroot\appsettings.json` +Now in your GitHub it's time to update the settings. The code needs to know the AD app to use and the Azure Function to call. Update those values inside `TinyBlazorAdmin\wwwroot\appsettings.json` > The **Endpoint** _must_ ends with a `/` @@ -108,7 +108,7 @@ Now in your GitHub it's time to update the settings. THe code need to know the A ## Enabeling Cross-Origin Resource Sharing (CORS) -We need to let AzUrlShortener been called by TinyBlazorAdmin. They are running in different website, therefore we need to configure Cross-Origin Resource Sharing (CORS). +We need to let AzUrlShortener be called by TinyBlazorAdmin. They are running in different websites, therefore we need to configure Cross-Origin Resource Sharing (CORS). First we need the url of the caller (aka TinyBlazorAdmin). From the Azure Portal, open the TinyBlazorAdmin SWA blade. Note the URL display in the top right of the page this is the URL of your admin page. @@ -139,4 +139,4 @@ Voila, the deployment is now completed. You can test it by creating a new short [swa_create2]: medias/swa_create2.png [swa_create3]: medias/swa_create3.png [swa_URL]: medias/swa_URL.png -[azFunction_CORS]: medias/azFunction_CORS.png \ No newline at end of file +[azFunction_CORS]: medias/azFunction_CORS.png