Azure CDN with Verizon - Rewriting URL to always load index.html Azure CDN with Verizon - Rewriting URL to always load index.html angular angular

Azure CDN with Verizon - Rewriting URL to always load index.html


  • Add a new rule with condition If Always
  • You will need to add a new Feature for each endpoint.
  • For the Pattern, enter [^?.]*(\?.*)?$. This pattern catches URL paths with . in them, but doesn't care whether or not it's in the query string.
  • For the Path, enter origin_path/document.ext. This is the tricky part. The Path is relative to the origin root. For instance, if your CDN endpoint's origin path is /origin_path and you want to redirect to index.html, you would enter origin_path/index.html. This will always be the case if your CDN is backed by an Azure Storage Account and the origin points to a container.
  • Click Add to add your rule, wait N hours, and you're good to go.


For your requirement, I tested this issue on my side. Per my test, you could try to leverage the following URL Rewrite rule:

Source pattern: (http[s]?://[^\?/#]+)(/(?!images)(?!scripts)[^\?#]*)?($|[\?#].*)

Destination pattern: $1/index.html$3

Note: For loading other files (.ico,.txt,.js,.css,etc) correctly, you need to move them into new virtual directories instead of the root of your blob container. For example, you could move image files into cdn\images and move JavaScript files into cdn\scripts, then the regular expression would ignore the related virtual folders.

Additionally, you could use Azure Web App to host your static website and choose the Free pricing tier or the Shared tier which would cost you $9.49 per month per instance. Details you could follow Pricing calculator.


UPDATE:

Based on Justin's answer, I checked this issue and found that for Blob storage origin type, the Source and Destination under URL Rewrite are talking about the request against the blob storage endpoint. So we need to set regular expression against the request path and query string for the blob endpoint.

Justin Gould has provided the answer for rewrite everything to cdn/index.html. Based on your scenario, I have tested my rule and it could work on my side.

enter image description here

TEST:

enter image description here

enter image description here


Just to add to this. If you're using Azure Verizon Premium CDN and your Azure endpoint is using an origin path. The origin path is a part of the rewrite. For example, lets say you're pointing to a versioned folder inside your $web blob.

Azure Endpoint Settings

So if in the above picture "Origin path" is 2.1.2 and your current static application is in $web/2.1.2/, then your rewrite for the CDN would be Source: /<your-verizon-origin>/<your-azure-endpoint>/(.*)\/[^?.]*(\?.*)?$ --> Destination: /<your-verizon-origin>/<your-azure-endpoint>/$1/index.html

Verizon Premium CDN Rule