Routing problem when building "react js" to wwwroot folder of my "asp.net core web api"

Question

Application information

My application uses asp.net core web API for the server-side and React js for the client-side.

Before publishing the application, the react js code is built straight to the www root folder of my asp.net Core web API. This allows the hosting of the client and the API on the same URL.

My client uses is a SPA and makes use of react routing. When starting at "localhost:44362/" my asp.net core application redirects the user to the index.html file in my www-root folder.

When this happens the client starts using the react-router package.

The problem

let's say that our current location is "localhost:44362/dashboard" When we refresh the page we don't go directly through the react routing but first the asp.net core routing. This will result in a 404 page because the actual routing can not be found by the server.

What actually should happen is that on refresh the page should go through the index.html and after execute the /dashboard request.

What I have tried

I have tried altering the web.config file in replacing the http error status code 404 behavior to change the executionURL to /index.html as displayed below:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <httpErrors errorMode="Custom" existingResponse="Replace">
      <remove statusCode="404" />
      <error statusCode="404" responseMode="ExecuteURL" path="/index.html" />
    </httpErrors>
  </system.webServer>
</configuration>

Note: When changing the existingResponse="Replace" part to something else, this solution breaks.

This works for refreshing but breaks the regular error responses

When referring to this solution, the regular HTTP response will all be replaced.

example:

• A user fills in the wrong password and submits a login request
• The server sends a 400 HTTP error response with the body "incorrect password"
• The error response body is replaced by the web.config
• The server now only sends back "bad request" instead of "incorrect password"

My question

Is there any way to make the routing work while still keeping the right error response messages?

Answer 1

You could try using url rewriting in your web.config.

What you want to happen is that all requests are rewritten to '/' so your react app will be loaded in, and the react routing can take over. However, since you are running your api on the same server, you need to exclude requests which are intended for your api. (in this case I will assume every api endpoint will start with '/api', since you are using asp.net core)

You could add something like this to your web.config file.

<rewrite>
  <rules>
    <rule name="Redirect to react">
      <match url="^(!?(api\/))(.*)$"/>
      <action type="Rewrite" url="/" />
    </rule>
  </rules>
</rewrite>