Problem with react routes in Azure Web App

Question

I just deployed my react web app with azure, It deploys correctly but i cant access the routes, ex. "https://domain.azurewebsites.net/api/login", I get this error:

message: 'Request failed with status code 404', name: 'AxiosError', code: 'ERR_BAD_REQUEST',
data: "The resource you are looking for has been removed, had its name changed, or is temporarily unavailable."

Locally it works perfectly with http://localhost:3001/api/login, nonetheless i cant seem to make it work online. Im using node.js and Github deployment, this is my current web.config:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="React Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
            <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

This an example of one route: router.post("/login", authController.login); And my index.js looks like this:

...code
// //Middlewares
app.use(cors());
app.use(express.json());


// //Rutas
const authRoutes = require("./build/routes/authRoutes")
const authRoutesAPP = require("./build/routes/authRoutesAPP")
app.use('/api', authRoutes);
app.use('/app', authRoutesAPP);

//Servidor
app.listen(app.get('port'), () => {
    console.log('Server on port', app.get('port'))
})

Can anyone give me an advice? Its my first time deploying a web app.

I tried changing the web.config, and also removing the /api part before the route, but i also get an error.

Azure Static Web Apps in the [staticwebapp.config.json](https://learn.microsoft.com/en-us/azure/static-web-apps/configuration#fallback-routes) — Sampath, Jul 13 '23 at 12:14
I'll give a few sample examples of how to work with how to use the route. — Sampath, Jul 14 '23 at 12:52
Check the CRA [deployment docs](https://create-react-app.dev/docs/deployment/#azure) for Azure for what needs to be setup/configured to handle your API backend requests. — Drew Reese, Jul 15 '23 at 08:54

Sampath · Answer 1 · 2023-07-14T13:08:49.990

Enable CORS in Portal with Azure CLI liked below:

az resource update --name web --resource-group <group-name> \
  --namespace Microsoft.Web --resource-type config \
  --parent sites/<app-name> --set properties.cors.supportCredentials=true

Add the settings SCM_DO_BUILD_DURING_DEPLOYMENT=true

export  default  function  App() {
return (
<Router>
<div>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/users">Users</Link>
</li>
</ul>
</nav>
<Switch>
<Route path="/about">
<About />
</Route>
<Route path="/users">
<Users />
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
</div>
</Router>
);
}
function  Home() {
return <h2>Home</h2>;
}
function  About() {
return <h2>About</h2>;
}
function  Users() {
return <h2>Users</h2>;
}

web.config:

<system.webServer>
<rewrite>
<rules>
<rule  name="React Routes"  stopProcessing="true">
<match  url=".*"  />
<conditions  logicalGrouping="MatchAll">
<add  input="{REQUEST_FILENAME}"  matchType="IsFile"  negate="true"  />
<add  input="{REQUEST_FILENAME}"  matchType="IsDirectory"  negate="true"  />
<add  input="{REQUEST_URI}"  pattern="^/(api)"  negate="true"  />
</conditions>
<action  type="Rewrite"  url="/"  />
</rule>
</rules>
</rewrite>
<staticContent>

In Local and Azure portal.
Another method is staticwebapp.confige Statc Web Apps with rotting rules and deploy inAzure Static Web App Refer to this SO for more details .

Problem with react routes in Azure Web App

1 Answers1