CODEWITHSUNDEEP
azurereactjsazure-web-app-servicecreate-react-app
StarLord
StarLord

Reputation: 1041

additional paths with azure web app returns error

I made a react app using create-react-app. I am trying to deploy it on azure web app. I created a build and deployed using FTP.

When there is the internal redirect from the react the app I am able to see the webpage. But when I try to directly go to the url, I get this error.

error image

For example:

if base url is www.example.com, and the app internally redirects to /new, the page goes to www.example.com/new. But if I directly try to load www.example.com/new, I get the above shown response. This doesn't happen in local testing

Demo: I have created a demo here

Upvotes: 17

Views: 8341

Answers (6)

Anjan Biswas
Anjan Biswas

Reputation: 731

HashRouter instead of BrowserRouter in routers.tsx file.

I use

import { HashRouter as Router, Routes, Route } from "react-router-dom";

instead of

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

That works for me. But this is a temporary solution for me. I need to investigate more with the below solution.

I tried lots of times with the below code that does not work for me. But I see lots of people's code work with this solution.

Create a web.config file in the root directory where the index.html is located and paste the below code.

<?xml version="1.0"?>
<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>

Upvotes: 0

Phiilp A Khoza
Phiilp A Khoza

Reputation: 26

This worked:

<?xml version="1.0"?>
 <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>

I created a web.config file in the public-folder where the index.html is located and added the above code.

Upvotes: 0

emiliero
emiliero

Reputation: 361

For it to work for me, I added a web.config-file in the public-folder (this is where favicon.ico, index.html & manifest.json is located), and added the following code:

<?xml version="1.0"?>
<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>

I hope this might help :)

Upvotes: 17

Prijesh Meppayil
Prijesh Meppayil

Reputation: 540

Place the below web.config file under the /site/wwwroot directory

<?xml version="1.0"?>
<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>

Upvotes: 8

sha
sha

Reputation: 71

Your server should always send the root html file for all client request, so that it can pass routing to react.

If the server is NodeJs, add something like below into your server.js.

app.get('*', (req, res) => {
   res.sendFile('public/index.html', { root: __dirname });
});

Upvotes: 0

Fei Han
Fei Han

Reputation: 27793

When there is the internal redirect from the react the app I am able to see the webpage. But when I try to directly go to the url, I get this error.

The resource you are looking for has been removed, had its name changed, or is temporarily unavailable.

If you use Network tool to capture network traffic when you click the button New to render (redirect to) the new page, you will find it just changes the URL locally instead of really requesting for http://data-trigger-mass-test.azurewebsites.net/new to the server. When you directly browse and request for http://data-trigger-mass-test.azurewebsites.net/new to the server, the server could not find the resource, so it returns (404) error. In order to make the URL http://data-trigger-mass-test.azurewebsites.net/new work on both server and client-side, you may need to set up routes for it on both server and client side.

Upvotes: 0

Related Questions