Implementing path-based routing in Azure Front Door with Azure Static Web Apps

Question

Implementing path-based routing in Azure Front Door with Azure Static Web Apps

Ravi Praneeth 50

Issue Description:

We are using Azure Front Door to route between two React-based Azure Static Web Apps with the following setup:

Azure Front Door Domain: https://sample-d6h7buaXXXXXXXX.z01.azurefd.net

Rout1 (Home) (Default / First Static Web App):
- Patterns to match: /*
- Origin Group : Home ( Origin host name = https://nice-ground-0XXXXXXX.azurestaticapps.net
- Origin Path: /
- Status: Working as expected. This is the main/default site.
Route 2 (bakery) (Secondary Static web App):
- Patterns to match: /bakery/*
- Origin group : Bakery(Origin Host name = https://proud-glacier-07e5XXXXXX.azurestapps.net
- Origin Path: /bakery
- Status: Partially working.

Problem Observed:

Accessing https://sample-d6h7buaXXXXXXXX.z01.azurefd.net/bakery correctly routes to Static Web App 2 (Bakery) and loads the index page.

However, all JavaScript, CSS, and static assets requested by the Bakery app are being misrouted.

These assets are incorrectly routed back to Static Web App 1 (the default route /*), leading to:

404 errors

  **Blank screen or broken UI**
  
  The underlying issue appears to be that the assets are requested using relative paths that are not adjusted to match the `/bakery/*` base path.

Expected Behavior:

When visiting the /bakery path via Front Door, all assets (JS, CSS, images, etc.) should be loaded from https://proud-glacier-07e5XXXXXX.azurestaticapps.net, not from the root origin (nice-ground-0XXXXXXX.azurestaticapps.net).

Static Web App 2 should work seamlessly under the /bakery/* route.

Request:

We need help ensuring:

Azure Front Door properly serves all assets for /bakery/* from Static Web App 2 only.

There is no fallback to the root (/*) route when assets are requested by the React app.

Guidance on Front Door config and/or React app routing and asset base path changes (if required).

Sindhuja Dasari 1,520 Reputation points Microsoft External Staff Moderator

2025-05-07T15:24:34.69+00:00
Hello Ravi Praneeth

It looks like you're running into an issue with routing for static assets when using Azure Front Door with your React-based Static Web Apps. Specifically, assets for your Bakery app are being misrouted back to the default app, leading to 404 errors and a blank screen.

This happens because the asset paths in the Bakery app are pointing to the root (/), and Front Door routes those to Default app, instead of Bakery app- causing 404 errors.
**
Here are Step-by-Step ways to fix:**
Update the React app (Bakery) configuration

In package.json, set

"homepage": "/bakery"

Update base tag in public/index.html with:

<base href="/bakery/">

Ensure Azure Static Web Apps handles /bakery/* properly:

In staticwebapp.config.json

{ "routes": [ { "route": "/bakery/*", "serve": "/bakery/index.html" } ] }

Front Door Configuration Side:

If assets load incorrectly as /bakery/bakery/..., adjust Front Door’s Origin Path to / instead of /bakery.

Clear Browser Cache & Test Again

Deploy updated React app and Azure configuration.

Open an incognito window to validate changes.

Check logs in Azure Front Door and browser DevTools for misrouted assets.

Please do consider to “up-vote” wherever the information provided helps you, this can be beneficial to other community members.
Ravi Praneeth 50 Reputation points

2025-05-08T08:11:24.8733333+00:00

console page error: (Strict MIME type issue)

Network tab:

I have implemented all the changes , updated the staticwebapp config file, packege.json and the index.html files.

Let me know in case of any additional details are required.

I am using below repository as my static web app 2:
"https://github.com/DaRiv94/frankiesbakery"
Sindhuja Dasari 1,520 Reputation points Microsoft External Staff Moderator

2025-05-08T09:40:25.7666667+00:00
Hello Ravi Praneeth

Thank you for your response.
Please add the following code block in staticwebapp.config.json

"mimeTypes": { ".json": "text/json" }

If it doesn't work, try replacing text/json with text/javascript.

Let us know if you know you're facing any further issues.
Sindhuja Dasari 1,520 Reputation points Microsoft External Staff Moderator

2025-05-09T09:14:16.7533333+00:00

Hello Ravi Praneeth

Following up to see if the above information was helpful. And, if you have any further query do let us know.
Ravi Praneeth 50 Reputation points

2025-05-12T08:06:00.29+00:00

I have implemented the solution but still i am facing the same issue.

Let me know if you need any details,

Repo link - https://github.com/praneethaffine/frankiesbakery
Venkat V 2,545 Reputation points Microsoft External Staff Moderator

2025-05-12T09:45:50.7033333+00:00
Hi @Ravi Praneeth

Can you please update your⁣staticwebapp.config.json? Right now it's pointing to /bakery/index.html instead of the app root.

{ "navigationFallback": { "rewrite": "/index.html" }, "routes": [ { "route": "/bakery/*", "serve": "/index.html" } ], "mimeTypes": { ".json": "application/json" } }

Serve /index.html (not /bakery/index.html) so that Static Web Apps can locate your app’s entry point.

Remove the exclude property in navigationFallback—you only need a single fallback for client-side routing.

Fix the MIME type for .json files: it should be "application/json"

Rebuild the app using npm run build and redeploy.

Can you please confirm—are you able to access the application directly via the Static Web App URL, without going through Azure Front Door?

I hope this is helpful! Do not hesitate to let me know if you have any other questions.
Venkat V 2,545 Reputation points Microsoft External Staff Moderator

2025-05-13T04:55:24.69+00:00

Hi @Ravi Praneeth

Could you please verify Alex and my answer to your question? If you have any queries or if the solution provided isn't helpful, feel free to ask any questions.

Accepted answer

1 additional answer

Your answer

Sindhuja Dasari 1,520 Reputation points Microsoft External Staff Moderator

2025-05-07T15:24:34.69+00:00

Hello Ravi Praneeth

It looks like you're running into an issue with routing for static assets when using Azure Front Door with your React-based Static Web Apps. Specifically, assets for your Bakery app are being misrouted back to the default app, leading to 404 errors and a blank screen.

This happens because the asset paths in the Bakery app are pointing to the root (/), and Front Door routes those to Default app, instead of Bakery app- causing 404 errors.
**
Here are Step-by-Step ways to fix:**
Update the React app (Bakery) configuration

In package.json, set

"homepage": "/bakery"

Update base tag in public/index.html with:

<base href="/bakery/">

Ensure Azure Static Web Apps handles /bakery/* properly:

In staticwebapp.config.json

{ "routes": [ { "route": "/bakery/*", "serve": "/bakery/index.html" } ] }

Front Door Configuration Side:

If assets load incorrectly as /bakery/bakery/..., adjust Front Door’s Origin Path to / instead of /bakery.

Clear Browser Cache & Test Again

Deploy updated React app and Azure configuration.

Open an incognito window to validate changes.

Check logs in Azure Front Door and browser DevTools for misrouted assets.

Please do consider to “up-vote” wherever the information provided helps you, this can be beneficial to other community members.
Ravi Praneeth 50 Reputation points

2025-05-08T08:11:24.8733333+00:00

console page error: (Strict MIME type issue)

Network tab:

I have implemented all the changes , updated the staticwebapp config file, packege.json and the index.html files.

Let me know in case of any additional details are required.

I am using below repository as my static web app 2:
"https://github.com/DaRiv94/frankiesbakery"
Sindhuja Dasari 1,520 Reputation points Microsoft External Staff Moderator

2025-05-08T09:40:25.7666667+00:00

Hello Ravi Praneeth

Thank you for your response.
Please add the following code block in staticwebapp.config.json

"mimeTypes": { ".json": "text/json" }

If it doesn't work, try replacing text/json with text/javascript.

Let us know if you know you're facing any further issues.
Sindhuja Dasari 1,520 Reputation points Microsoft External Staff Moderator

2025-05-09T09:14:16.7533333+00:00

Hello Ravi Praneeth

Following up to see if the above information was helpful. And, if you have any further query do let us know.
Ravi Praneeth 50 Reputation points

2025-05-12T08:06:00.29+00:00

I have implemented the solution but still i am facing the same issue.

Let me know if you need any details,

Repo link - https://github.com/praneethaffine/frankiesbakery
Venkat V 2,545 Reputation points Microsoft External Staff Moderator

2025-05-12T09:45:50.7033333+00:00

Hi @Ravi Praneeth

Can you please update your⁣staticwebapp.config.json? Right now it's pointing to /bakery/index.html instead of the app root.

{ "navigationFallback": { "rewrite": "/index.html" }, "routes": [ { "route": "/bakery/*", "serve": "/index.html" } ], "mimeTypes": { ".json": "application/json" } }

Serve /index.html (not /bakery/index.html) so that Static Web Apps can locate your app’s entry point.

Remove the exclude property in navigationFallback—you only need a single fallback for client-side routing.

Fix the MIME type for .json files: it should be "application/json"

Rebuild the app using npm run build and redeploy.

Can you please confirm—are you able to access the application directly via the Static Web App URL, without going through Azure Front Door?

I hope this is helpful! Do not hesitate to let me know if you have any other questions.
Venkat V 2,545 Reputation points Microsoft External Staff Moderator

2025-05-13T04:55:24.69+00:00

Hi @Ravi Praneeth

Could you please verify Alex and my answer to your question? If you have any queries or if the solution provided isn't helpful, feel free to ask any questions.

Answer 1

Hi @Ravi Praneeth

As seen above, the error occurred because the package.json file does not have the correct configuration to route the application properly.

Your React app was built for the root path (/), but you were serving it from a subpath (/bakery/) via Azure Front Door. Because of this mismatch, the browser tried to load static assets like.

/bakery/css/bootstrap.css
/bakery/static/js/main.js

To resolve this issue, update the package.Jsonfile with the following entry:

"homepage": "/bakery"

Here is the update package.Json file

{
  "name": "landingpage-react-template",
  "private": true,
  "homepage": "/bakery",
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "emailjs-com": "^2.6.4",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-helmet": "^6.1.0",
    "react-scripts": "^5.0.1",
    "smooth-scroll": "^16.1.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "CI=false react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

After updating the code and rebuilding the app, it loads properly, as shown below
User's image

I hope this helps to resolve your query.

If the above is unclear and/or you are unsure about something, add a comment below.

Please don’t forget to close the thread by clicking "Accept the answer" wherever the information provided helps you, as this can be beneficial to other community members

Ravi Praneeth 50 Reputation points

2025-05-13T13:37:20.0833333+00:00

This solution worked perfectly , thank you for the quick and helpful response. Your step-by-step guidance was clear and effective. I really appreciate the great support and the immediate attention to the issue, which led to a quick resolution.

Answer 2

Hi Ravi,

Thank you for sharing the details of your routing challenge. This is a common scenario when implementing path-based routing with React applications behind Azure Front Door. The core issue stems from how React handles relative asset paths combined with Azure Front Door's routing behavior.

The root cause appears to be that your Bakery React application generates asset paths without accounting for the /bakery base path. When these relative paths are requested through Azure Front Door, they're being routed to your default origin (/) instead of remaining within the /bakery/ path space.

To resolve this, we'll need to make adjustments both in your React application configuration and your Azure Front Door setup.

First, let's configure your React application to be aware of its base path. If you're using Create React App, you can set the homepage property in your package.json to /bakery or configure the PUBLIC_URL environment variable during build. For applications using React Router, you'll want to specify the basename prop on your BrowserRouter component like this: <BrowserRouter basename="/bakery">. This ensures all client-side routing and asset paths are properly prefixed. You can find more details about this in the React Router documentation.

For your Azure Front Door configuration, while you've already set the origin path to /bakery, we should consider adding a URL rewrite rule. This rule would strip the /bakery prefix before forwarding requests to your Static Web App origin. You can create a rule that matches /bakery/* and rewrites it to /*, which helps maintain clean paths at the origin while preserving the path-based routing at the edge. The Azure Front Door rules engine documentation provides excellent guidance on setting this up.

It's also worth checking your Static Web App's configuration file (staticwebapp.config.json) to ensure it properly handles the /bakery prefix for routes and redirects. You might need to add specific route configurations to maintain proper functionality. The Azure Static Web Apps configuration documentation covers this in detail.

After implementing these changes, I recommend testing thoroughly in a non-production environment first. Pay particular attention to how assets are being loaded (check the Network tab in your browser's developer tools) and verify that all client-side navigation works as expected. Remember that you may need to clear caches (both browser and Azure Front Door) to see the changes take effect immediately.

If you continue to experience issues or need clarification on any of these steps, don't hesitate to reach out. I'd be happy to help troubleshoot any specific challenges you encounter during implementation.

Best regards,
Alex
P.S. If my answer help to you, please Accept my answer
PPS That is my Answer and not a Comment

Ravi Praneeth 50 Reputation points

2025-05-13T07:26:38.0666667+00:00

Hi Alex,

Please find the details and observations below.

🔗 URLs

Backend URL: https://delightful-flower-023e3520f.6.azurestaticapps.net

Azure Front Door Route: https://sample-d6h7bua8c7a9ahb4.z01.azurefd.net/bakery/

GitHub Repo: https://github.com/praneethaffine/frankiesbakery

Step 1: Initial Setup (Without Configuration File)

React app deployed successfully to Azure Static Web Apps.

Backend app works as expected using the direct Azure Static Web App URL.

Access through Azure Front Door using the /bakery/ path does not render correctly.

🔍 Observation

Azure Front Door route fails to load the application correctly.

Frontend assets using root-relative paths are not resolved.

Azure Front door image:

Step 2: Added Basic staticwebapp.config.json File

Configuration Content

{ "navigationFallback": { "rewrite": "/index.html" }, "mimeTypes": { ".json": "application/json" } }

✅ Effect

Fallback routing works as expected.

App loads a blank index page via Azure Front Door.

⚠️ Issue

Static assets failed to resolve due to root-relative paths.

Step 3: Application Configuration Updates

🔧 Changes Made

Updated public/index.html:

```html

<base href="/bakery/">

```

Updated package.json:

```json

"homepage": "/bakery"

```

Updated staticwebapp.config.json:

```json

{

"navigationFallback": {

"rewrite": "/index.html"

},

"routes": [

{

"route": "/bakery/*",

"serve": "/index.html"

}

],

"mimeTypes": {

".json": "application/json"

}

}

```

Azure Front Door Configuration:

- Origin Path (Previous): /bakery

- Origin Path (Updated): /*

❌ Issue Identified

Backend and frontend both display MIME type issues.

🔍 Observation

Both backend and Azure Front Door routes do not serve correct MIME types for static resources.

Azure frontdoor Image:

Backend Static web app image:
Ravi Praneeth 50 Reputation points

2025-05-13T08:41:26.96+00:00

This issue started occurring after the following changes:

Updated package.json to add "homepage": "/bakery"

Updated index.html with <base href="/bakery/">

Share via

Implementing path-based routing in Azure Front Door with Azure Static Web Apps

1 additional answer

🔗 URLs

Step 1: Initial Setup (Without Configuration File)

🔍 Observation

Step 2: Added Basic `staticwebapp.config.json` File

Configuration Content

✅ Effect

⚠️ Issue

Step 3: Application Configuration Updates

🔧 Changes Made

❌ Issue Identified

🔍 Observation

Your answer

Share via

Implementing path-based routing in Azure Front Door with Azure Static Web Apps

1 additional answer

🔗 URLs

Step 1: Initial Setup (Without Configuration File)

🔍 Observation

Step 2: Added Basic staticwebapp.config.json File

Configuration Content

✅ Effect

⚠️ Issue

Step 3: Application Configuration Updates

🔧 Changes Made

❌ Issue Identified

🔍 Observation

Your answer

Step 2: Added Basic `staticwebapp.config.json` File