CODEWITHSUNDEEP
azurereactjs
William Caetano
William Caetano

Reputation: 157

Azure webapplication return 404 when try to access using the address bar or refresh page

I need a little help with my azure app, I have a website using ReactJS hosted on Azure, but something weird is happening.

The only page I can access using the address bar its the mydomain.com or www.mydomain.com. If I try access something like mydomain.com/login it returns 404 and a white page with the follow message 

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

Another thing is that I can normally use the website if I start from home. Example, if i am at homepage and click at a button that sends me to /login works, but if I try to refresh or go directly from the address bar, does not work.

Now, I also have a staging at azure that has exactly the same code, and works just fine, I can access anything from anywhere.

There is anyone that know anything about that?

Upvotes: 2

Views: 3522

Answers (3)

Prijesh Meppayil
Prijesh Meppayil

Reputation: 540

Anyone facing the same issue can use the below web.config file which should be placed 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: 4

William Caetano
William Caetano

Reputation: 157

I solve the problem, at staging azure app was a web.config file that was not created at the production app, that is why the problem existed, so after copy and paste the web.config file to production everything works just fine.

Upvotes: 0

Aram
Aram

Reputation: 5705

Seems like your React routing not working properly.

You can bypass the problem by using Hash (#) in your URL:

example:

use http://example.com/#/about instead of http://example.com/about

and in your router you should have something like this:

render((
  <Router history={hashHistory}>
    <Route path="/" component={App}>
      <Route path="#/repos" component={Repos}/>
      <Route path="#/about" component={About}/>
    </Route>
  </Router>
), document.getElementById('app'))

Downsides:

'ugly' URLs Server-side rendering is not possible with this approach. As far as SEO is concerned, your website consists of a single page with hardly any content on it.

Upvotes: 0

Related Questions