3

I am trying to deploy my react app in azure websites. I have successfully done it. Since it is a single page application, it does not work on reloads. During the reloads, 404 error status code is displayed.

I want to redirect the page to / (index.html or root) on occurrence of 404. I am able to do it by editing the web.config file. But I cant find out the specific redirection policy that i need. For eg:

I need to redirect:

http://letsmeetupp.azurewebsites.net/event/eventId=dsdsd-dsdsd-1475750226814

this to

http://letsmeetupp.azurewebsites.net/#!/event/eventId=dsdsd-dsdsd-1475750226814

I want to redirect with the prefix #!/, so that I can find that path in my react app and push states in html 5.

My current web.config file is this. This gets me redirected to /, but I need the whole path with the prefix, which help me to parse the hash and push states (HTML 5 HISTORY API). 

<?xml version="1.0" encoding="UTF-8"?>

<configuration>

    <system.web>
        <compilation debug="false" targetFramework="4.0" />
      <customErrors mode="On">
        <error statusCode="404" redirect="index.aspx?sec=404" />
      </customErrors>
    </system.web>
    <system.webServer>
        <defaultDocument>
            <files>
                <clear />
                <add value="default.aspx" />
                <add value="Default.htm" />
                <add value="Default.asp" />
                <add value="index.htm" />
                <add value="index.html" />
                <add value="iisstart.htm" />
            </files>
        </defaultDocument>
        <httpErrors errorMode="Custom" existingResponse="PassThrough">
            <remove statusCode="404" subStatusCode="-1" />
            <error statusCode="404" prefixLanguageFilePath="#!/" path="/" responseMode="Redirect" />
        </httpErrors>
    </system.webServer>

</configuration>

Edit after jambor Comments:

Hey @Jambor-MSFT. I have a reactJS (single page application) deployed on azure websites. The thing is my SPA is an MVC. I have defined my routes there. Technically, I am using react-router to define the routes in my SPA app. So to your question Does it works fine on your local ?. Yes indeed. I understand that IIS cant understand the routes. I mean it renders index.html when http://letsmeetupp.azurewebsites.net hits the browser. And all the routes are internally managed by react file that is included in index.html. What I want is on different routes other than /, it should redirect to index.html with a prefix. like this http://letsmeetupp.azurewebsites.net/#!/event/eventId=dsdsd. After this, I can internally handle the routes by removing the prefix and rendering the correct path.

Lakshman Diwaakar
  • 7,207
  • 6
  • 47
  • 81
  • Does it works fine on your local? Or it only does not work in Azure Web app. If your web app use MVC, I think it is better to define your route rule in MapRoute function. – Jambor - MSFT Oct 07 '16 at 05:32
  • The explanation was bigger so added the response to your comment in question. Check it out @JAMBOR – Lakshman Diwaakar Oct 07 '16 at 06:20
  • @Jambor-MSFT Have to perform the same thing in azure. want to do the 8th step in [redirection question](http://stackoverflow.com/questions/39783099/deploying-react-redux-app-in-aws-s3). – Lakshman Diwaakar Oct 08 '16 at 05:56

0 Answers0