Skip to content

Commit

Permalink
Add CORS steps
Browse files Browse the repository at this point in the history
  • Loading branch information
FBoucher committed Nov 5, 2020
1 parent 3c53774 commit 958e8ca
Show file tree
Hide file tree
Showing 4 changed files with 21 additions and 3 deletions.
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
[![All Contributors](https://img.shields.io/badge/all_contributors-3-orange.svg?style=flat-square)](#contributors-)
<!-- ALL-CONTRIBUTORS-BADGE:END -->

Admin tools for [Azure Url Shortener](https://github.com/FBoucher/AzUrlShortener) using Blazor Single Page Application (webassembly).
Admin tools for [Azure Url Shortener](https://github.com/FBoucher/AzUrlShortener) using [Blazor Single Page Application (webassembly)](https://azure.microsoft.com/en-ca/services/app-service/static/?WT.mc_id=tinyblazoradmin-github-frbouche).

![TinyBlazorAdmin][TinyBlazorAdmin]

Expand Down
22 changes: 20 additions & 2 deletions deployment.md
Original file line number Diff line number Diff line change
Expand Up @@ -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/). 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 use Azure Active Directory (AAD), we need a standalone Azure Function (deployed at 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.

Expand Down Expand Up @@ -106,8 +106,24 @@ 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).

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.

![swa_URL][swa_URL]

Now we need to add this URL to the list in the CORS of the Azure Function that run AzUrlShortener. From the Azure portal open the blade of AzUrlShortener. From the left menu search CORS, and click it. Add the URL of the SWA and don't forget to save.


![azFunction_CORS][azFunction_CORS]

## Try it!

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

> To add a custom domain to your AzUrlShortener, [follow these steps](https://github.com/FBoucher/AzUrlShortener/blob/main/post-deployment-configuration.md#add-a-custom-domain)

[CreateBackend]: medias/CreateBackend.png
Expand All @@ -121,4 +137,6 @@ Now in your GitHub it's time to update the settings. THe code need to know the A
[tokensaccess]: medias/tokensaccess.png
[swa_create1]: medias/swa_create1.png
[swa_create2]: medias/swa_create2.png
[swa_create3]: medias/swa_create3.png
[swa_create3]: medias/swa_create3.png
[swa_URL]: medias/swa_URL.png
[azFunction_CORS]: medias/azFunction_CORS.png
Binary file added medias/azFunction_CORS.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added medias/swa_URL.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 958e8ca

Please sign in to comment.