React JS App Routing Issue Only After Deploying to Azure Web App

Question

I have a React JS app, with React Router.During development, npm start, I get no issues. I visit the following location as usual.

http://localhost:3000

and due to the routing code, it becomes

http://localhost:3000/index

and the app loads just fine. At this point,

I hit reload, the app continues to run fine.
I manual link or load 'http://localhost:3000/index', the app runs fine.

Then, later, I do an npm build, go inside this build folder, and do an npm start, again, the same thing. the app runs just fine. I reload, it runs fine. Nothing to complain so far.

Problem Portion.

I then decided to deploy the app to an azure web app. The app runs fine. I go to this site.

https://randomstuffreactjsappsept24.azurewebsites.net

and due, to routing code, it becomes

https://randomstuffreactjsappsept24.azurewebsites.net/index

And, the website loads.

At this point, if I hit reload (problem!!), it will try to reload,

https://randomstuffreactjsappsept24.azurewebsites.net/index

I get the following error.

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

Now, at this point, if I remove the '/index' and load the original url,

https://randomstuffreactjsappsept24.azurewebsites.net

The site loads just fine, no problem. Note, you can see it for yourself. this is a live site. (but of course, due to routing code, it becomes)

https://randomstuffreactjsappsept24.azurewebsites.net/index

Now, as long as I dont reload the website, the website continues to run. Why is this happening?

Here is the code for the main index.js page from the project.

ReactDOM.render(
  <BrowserRouter>
    <Switch>
      <Route path="/index" render={(props) => <Index {...props} />} />
      <Redirect to="/index" />
    </Switch>
  </BrowserRouter>,
  document.getElementById("root")
);

The full app is available here - https://github.com/Jay-study-nildana/RandomStuffReactJSApp

Update 2

I decided to try another react app, created by another source entirely. Once again, same issue, and I have a live site to show.

I visit, https://auth0tokenreactjsappprivatesept25.azurewebsites.net/external-api, from within the web app, it works fine. If i were to reload at this point, it will say "The resource you are looking for has been removed, had its name changed, or is temporarily unavailable."
I visit, http://localhost:3000/external-api, from within the app, it works fine. AND, If I were to reload, it loads just fine.

So, its definitely "only" happening after deployment.

Quality Catalyst · Accepted Answer · 2024-01-23 22:59:51Z

7

According to: https://github.com/react-boilerplate/react-boilerplate/issues/1612 You would have to place the: Simply place the following file called web.config under your wwwroot folder:

<?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>

Add the web.config file to the Azure directory.

edited Jan 23, 2024 at 22:59

Quality Catalyst

6,8318 gold badges41 silver badges65 bronze badges

answered Sep 24, 2020 at 19:26

Sad Frog

1345 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jay Over a year ago

Hi. but, I am not using react-boilerplate. not sure this applies to me.

Jay Over a year ago

i think you might be right about this. I have seen similar solutions in other places. i will update after further investigation.

Jay Over a year ago

i linked the solution you provided with the discussion here, stackoverflow.com/questions/50753669/…, and it worked. excellent.

Kishan Vaishnav Jan 20 at 15:33

Thanks for the solution, please note that you have to place the web.config file to public folder.

Jay · Accepted Answer · 2023-01-27 09:09:10Z

1

I came accross this issue yesterday after using a custom build in my azure web app deployment (skipped it using skip_app_build = false and build it in a previous job).

My error was that my staticwebapp.config.json file was not located in the public folder -> it was not deployed correctly. after inserting any route a 404 was thrown by azure.

Just move the staticwebapp.config.json into the public folder and you are good to go.

edited Jan 27, 2023 at 9:09

Jay

3,0905 gold badges39 silver badges66 bronze badges

answered Jan 26, 2023 at 14:26

Peter0802

112 bronze badges

Comments

32423hjh32423 · Accepted Answer · 2021-03-09 09:26:56Z

0

I had the same problem. Our Azure App Servive was running PHP and Apache, so we used a .htaccess file like this one suggested in the deployment docs of Create React App. https://create-react-app.dev/docs/deployment#serving-apps-with-client-side-routing

    Options -MultiViews
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.html [QSA,L]

Add the .htaccess to the public folder and this stops your refresh issue these types of Aapp Services.

answered Mar 9, 2021 at 9:26

32423hjh32423

3,0827 gold badges46 silver badges62 bronze badges

Collectives™ on Stack Overflow

React JS App Routing Issue Only After Deploying to Azure Web App

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related