CODEWITHSUNDEEP
asp.net-mvcreactjstypescriptazurekendo-ui
vitonimal
vitonimal

Reputation: 463

Add a static website from Azure Storage Account to an Asp.net MVC app?

I have to include a React application inside a dotnet MVC project. I have a simple React application that only contains a KendoUI grid.

Here is what I need to do:

I have the following code (ASP.net MVC):

enter image description here

The commented div is the div that contains the old grid (the one to be replaced with the static React application).

I would like to add the static React application in the test div (the one with the id "scheduleSitesGrid2")

I configured my static React app to look for that exact same div (here is the index.tsx):

enter image description here

That being said, is there a way I can easily include that react application in the MVC app using Azure CDN? I could not find any other question regarding adding a React app to MVC using CDN.

I tried to include the CDN in a script tag, but that did not work. I am also wondering that since the React app is hosted as a static site, it is already built, so I might not be able to add it in the MVC div (since it is already inserted into the index.html file of the React app as shown in the following picture). I would then need to upload all the app to Azure besides the index.html. Am I right?

enter image description here

Thank you very much!

Peace!

Upvotes: 0

Views: 380

Answers (1)

Architect Jamie
Architect Jamie

Reputation: 2569

If I understand correctly you have an MVC Web App hosted using some App Service Plan, and a React application which has no server side code execution just Javascript?

If that's correct then you will certainly be serving content from two separate domains: One for your Web App, presented via CDN; and one for the storage account, hosting the static content, which is only presented via the storage account URI.

The both can indeed be presented via a single CDN endpoint, but you would need to use the premium tier and make use of URL rewrite rules. You would have your default route configured to that of your Web App URI, then you would configure a rewrite rule to, for example, rewrite (translate) "/static/..." to "https://{{yourstaticstorage}}.storage.azure.com/yourstaticpath/...".

Verizon Premium rewrite is documented here: https://learn.microsoft.com/en-us/azure/cdn/cdn-verizon-premium-rules-engine-reference-features#url-rewrite

If you don't want to use Verizon Premium, you could also take a look at Azure Front Door.

https://azure.microsoft.com/en-gb/services/frontdoor/

Essentially, Front Door is CDN on steroids. It has built in WAF and allows you to configure routing rules. Do compare the pricing before going this route as I'm fairly sure you have to pay for each routing rule.

You could also pull the static content in code before delivering it but this wouldn't be cached on the CDN since every dynamic page visited would require execution. You're better off creating a routing rule and using relative paths to the static content which are retrieved and cached by the CDN / Front Door.

Upvotes: 2

Related Questions