Deploy React and .NET 7.0 API to IIS

Question

Hello, This is my first time deploying a react app with .NET API backend to IIS. I followed a guide where it illustrated developing each side separately, and then placing the React Build files inside wwwroot folder in the API then publish with the following config code:

app.UseSpa(spa =>
{
    spa.Options.SourcePath = "wwwroot";
});

I tried this also:

app.UseSpaStaticFiles(new StaticFileOptions
{
    RequestPath = "/wwwroot"
});

But that did not work as well. I am getting: ERR_TOO_MANY_REDIRECTS and on the server the page loads but it is blank. However, the API is functional and works as I tested sending request to the API itself and it works Though I don't think they are useful, these two console errors are appearing. This is my first time deploying a react and .NET app to IIS.

Answer 1

@Mohammed Abed There are many reasons for this error, If there is no redirection loop on the server side, the problem is likely to be solved just by deleting cookies. You can also start by checking the IIS log, It should allow to spot which pages are causing this redirection cycle. Besides, you could also try opening up a network monitor like Fiddler. with Fiddler running, you can get its captured HTTP conversations you should be able to gain more insights on the problems.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment". Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 2

it looks like you used a net 5 example, rather than 6 or 7. the UseSpa and spa static file handler are obsolete. you should just use the static file handler, and map fallback:

app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();

....

app.MapFallbackToFile("index.html");;

app.Run();

when you do a production build of the react app it should produce a build folder. the contents of the build folder should be copied to the wwwroot folder on the IIS site. type hitting the index.html file directly rather than as default.
if you are deploying to an IIS subsite (https://myserver/mysite/) then be sure the you set the base ref in the index file during the react build. see react script docs for examples.