Question 309596 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Azure Front Door for SPA Application (React) showing 404 on specific path

I have created an azure front door, and in that created an endpoint, in endpoint , created three different front end routes, one for api , one for portal and one for checkin-widget.
then created three different origins for backends.
the api route is /api/*
the checkin route is /checkin/*
and for portal is /portal/*
api and checkin are working fine
but portal is throwing error of 404.
the portal and widget is in storage account static app and api is on app service.
when I hit someafd-uniquename.z01.azurefd.net/portal/
it send 200 response message for for portal in network but for assets like /static/js/main.235cbe7f.js and
/static/css/main.c87164bd.css throwing 404.
because for js and css assets, it is using base url like
someafd-uniquename.z01.azurefd.net/static/js/main.235cbe7f.js
but it should send req to
someafd-uniquename.z01.azurefd.net/portal/static/css/main.c87164bd.css
because checkin widget is doing the same sending reqest with prepending checkin/ in URL.

I have checked every known possibility.
I have also defined a ruleset as in below Image.
[Rules set for URL Rewrite. (https://i.stack.imgur.com/GW5T0.png)
This is the endpoint list, and each endpoint have own origin

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I've successfully configured routing rules for http://mycustomsite.com using Azure Front Door. Here's a breakdown:

    Routing Configuration:

    • Requests to /portal are directed to the Azure Front Door resource for the portal.
    • Requests to check in are routed to the Azure Front Door resource for check-in.
    • Requests to /api are directed to the Azure Front Door resource for the API.
    • Requests to the root URL, /, are routed to an external destination.

    Permanent Redirect Rules:

    I've implemented a ruleset for permanent redirects based on the request path:

    • If the request path contains /portal, the origin group is overridden to serve the portal static web app.
    • If the request path contains /checkin, the origin group is overridden for the checkin static web app.
    • If the request path contains /api, the origin group is overridden to serve the API app service.
    • If the request path is base path, It will be a permanent redirect to external destination host, www.mycustomsite.com

    This setup ensures that specific paths are appropriately directed to their respective resources, and I've added permanent redirect rules for external destinations based on specific conditions. If there are any specific details or further clarifications needed, feel free to ask.


  2. 0
    • Change the SPA routing in Azure Static Web app and deploy the app again.
    {
    "navigationFallback": {
      "rewrite": "index.html",
      "exclude": ["/images/*.{png,jpg,gif,ico}", "/*.{css,scss,js}"]
    }
}

    import React from 'react';
import { Link } from 'react-router-dom';
import './App.css';

export default function Navbar() {
  return (
    <div className="App">
      <center>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/about">About</Link></li>
          <li><Link to="/contact">Contact</Link></li>
        </ul>
      </center>
    </div>
  );
}

    Deployment status in Git Action:
    enter image description here

    Static Web app Output:

    enter image description here

    Cofigure the Azure Front Door :
    enter image description here

    enter image description here

    enter image description here

    • For more details refer to hosting a React JS single page application on Azure Blob Storage & Azure CDN for SSL, HTTP to HTTPS redirect and rewrite client routing traffic.
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search