How to set up redirects properly for the site on Azure Static Webapp using Jekyll

[rndwork]

Hi all! We made a static website using Jekyll on Azure Static Webapp and faced a dilemma on how to properly set up different types of redirects necessary for SEO and not only.

Some of the main redirects that we need are:

1. Support Non-Trailing Slash Urls - redirect the Urls with / at the end to the url without it
2. Remove .html - by default the same pages on jekyll are accessible both with .html and without it, I would like to redirect pages with .html to the same url without it
3. Implement lower case url rule - so that when typing the url all the upper case letters would convert to the lower case by redirect
4. http errors - 404 page - by default Azure's page is shown, I would like to show our own version of it.

First I've tried to create web.config file in the root folder and follow this instruction - https://rimdev.io/jekyll-and-iis-web-configuration-in-windows-azure/ but nothing changed and it seems that this approach is not working.

Then I tried to use the staticwebapp.config.json file. I managed to implement some of the redirects, but not all. For example I don't know how to implement case with low url rule.

Does anybody have any positive experience in this? What is the best approach to take and how ti implement all these redirects? And why web.config is not working? May be there are some settings that need to e turned on in Azure admin?

[anthonychu]

Saw this after responding to your question in Q&A. Pasting my comment here:

We’re working on some new settings that should help with this.

For 1 and 2 above, sound like you have a file at /foo.html and you are looking for this behavior: Requests to /foo serves the page. Requests to /foo/ redirects to /foo. Requests to /foo.html redirects to /foo.

Can you confirm that this is what you’re looking for? How important is it that /foo.html redirects to /foo?

For 3, we don’t have anything planned for this. Our routes and filesystem are currently case sensitive.

For 4, see the response overrides configuration: https://docs.microsoft.com/en-us/azure/static-web-apps/configuration#response-overrides

[rndwork]

Yes, I've created the topic here and in Azure's forum by the request of the support team. Where is the best place to continue this discussion? Here is the link to the Azure's forum with the same question: https://docs.microsoft.com/en-us/answers/questions/584478/how-to-set-up-redirects-properly-for-the-site-on-a.html

Duplicating the response:

For 1 and 2 - yes, that is the exact behavior I am looking for.

How important is it that /foo.html redirects to /foo?

I am using Jekyll to create a website. It generates the pages with .html extension in case files are not in the directory. Each page is accessible both by /foo, /foo/ and /foo.html URLs, each page has 200 response and Google can treat them as the different pages. Also having .html at the end is not very modern for now. These were the sites created long ago. Answering your question - these items are very important for me. I want the page to be accessible only by one URL and set up 301 redirects for other page variations. I had a practice with .htaccess and web.config, there were no problems to write all necessary SEO redirect.

For 3 - is there any opportunity to realize it? By the way, can is it possible to use web.config file and write redirects in it? Or Azure Static Webapp doesn't suppor it? I've tried with one redirect and didn't succeed.

For 4 - yes, I saw that it is probably possible. Thanks.

[rndwork]

Hi Anthony, you've written that - "Still a few more weeks before we’ll have the feature available to help with this. Let’s continue the discussion at our GitHub repo.".

Does it mean that in several weeks there will be a solution for the requested redirects (items 1 and 2)?

[anthonychu]

Does it mean that in several weeks there will be a solution for the requested redirects (items 1 and 2)?

Working on 1. @joslinmicrosoft let’s see if we can support 2 as well.

[rndwork]

Hello Team, thanks for your support, I really appreaciate it. Could you also help me with two redirects that should be solved by this - https://docs.microsoft.com/en-us/azure/static-web-apps/configuration#response-overrides rules

1. remove /index.html on the main page
2. redirect to the custom 404 page

I created the staticwebapp.config,json file and it to the root folder. The file looks like this:

{
  "responseOverrides": {
    "404": {
      "rewrite": "/404.html"
    }
  }
}

I assume that when the url doesn't exist, the rule should redirect to the custom / 404,html page, but it doesn't work as exptected. It shows 200 code response for any page, including non existing. What I am doing wron and how to write correct redirects?

[rndwork]

Can anybody assist with this?

[anthonychu]

Can you provide more details? If the repo is public, can you link to that?

[rndwork]

The 404 redirect is fixed already, thanks. I just left only 404 redirect and removed this one:

{
  "navigationFallback": {
    "rewrite": "/index.html",
    "exclude": ["/images/*.{png,jpg,gif}", "/css/*"]
  }
}

I think it caused the logic I described above.

In case I want to permanently redirect from site.com/index.html (the duplicate of the main page) to site.com, should I add this redirect only:

  "routes": [
    {
      "route": "/index.html",
      "redirect": "/",
      "statusCode": 301
    }
  ]

Is it the right way to implement simple 301 redirect?

[AjayKumar-MSFT]

rndwork, Thanks for the update and follow-up. @anthonychu, Any further comments on this is appreciated.

[anthonychu]

Yes that looks correct. Is it working?

[Ramanean]

Is there any update when this would be available? Wish to remove .html from end of the pages..

[anthonychu]

Is there any update when this would be available? Wish to remove .html from end of the pages..

Can you expand on what you mean by this? You can access files with .html extensions without .html. For instance you can access /about.html at /about.

[drewdecarme]

@anthonychu Our team is having issues with accessing HTML files without their extension when paired with query parameters as well as just plain old HTML sans any URL query params.

Is there a setting that we're missing or something that could potentially be misconfigured in the static web apps?

[drogerschariot]

Is there any update when this would be available? Wish to remove .html from end of the pages..

Can you expand on what you mean by this? You can access files with .html extensions without .html. For instance you can access /about.html at /about.

@anthonychu I have a Azure CDN pointing at a Azure blob storage static website. We get 404s when not adding .html. For example we have a file in the $web root of the storage container named alerts.html. Hitting Azure endpoint with /alerts 404s but alerts.html resolves fine.

[anthonychu]

@drogerschariot Azure Storage is a different product. You should be able to access your file without the .html in Azure Static Web Apps.

@drewdecarme Can you provide more details? I'm unable to reproduce the behavior in Static Web Apps.

[kamsinghccl]

Is there any update when this would be available? We Would like to hide .html extension from end of the HTML5 pages in Azure Static APP.

[anthonychu]

@kamsinghccl This works today if you update your <a> tags to remove .html from your links. We are working on a feature that will redirect any requests from /page.html to /page, but that's not needed if you update your links.

[joslinmicrosoft]

Hi all, thank you for your feedback and patience on this request. We have added the ability to configure trailing slash behavior with the trailingSlash configuration in your staticwebapp.config.json file. The documentation can be found here: https://docs.microsoft.com/azure/static-web-apps/configuration#trailing-slash. Note that the configurations also apply a set of URL normalization and redirect rules, including removing the .html. Please let us know if this works for your use cases!

[therealmarkber]

Some great progress! Anyone have a sample / guidance to implement something similar with prerender.io for an Angular app?: https://docs.prerender.io/docs/18-integrate-with-iis

[therealmarkber]

@anthonychu and @joslinmicrosoft .. can you assist with this?

[joslinmicrosoft]

Hi @therealmarkber, we are currently tracking this request at #196. Please refer to that issue for any discussions or updates regarding pre-rendering.

[StephenWBertrand]

@joslinmicrosoft was any updates made that would assist with the case-sensitivity issue?

I have a case where I've needed to deploy my Blazor app under a subfolder. I've updated the fallback route to point to the subfolder's index page.

When I hit the site with the wrong casing, I get the correct index page, but when that page tries to load the _framework/blazor.webassembly.js file or any static files under the subfolder it fails and just serves up the fallback index page instead.

Really need some type of solution for this. Thanks.

[jmarbutt]

Anyone find a work around for this?