Hosting processes with separately created .NET and React projects

Question

I am quite new to hosting processes. I connected to my Windows hosting through Plesk from my provider's website and added the published codes of my backend API, which I created with .NET, into the httpdocs directory. Additionally, I created a folder named "frontend" inside httpdocs and placed my React build files there. My current issue is that I can access Swagger via the URL, but I cannot access any other pages. It's as if my React files don't exist, and I get a 404 error on screens like url/Login, for example.

When I do the opposite, i.e., place the React files in httpdocs and move the .NET files to a subfolder, the UI is displayed, but I cannot access the backend.

web.config :

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <!-- React Routes -->
        <rule name="React Routes" stopProcessing="true">
          <match url="^(?!backend/|api/|swagger/|frontend/|.*\..*$).*$" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/frontend/index.html" />
        </rule>
        <!-- API Routes -->
        <rule name="API Routes" stopProcessing="true">
          <match url="^api/(.*)" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/{R:0}" />
        </rule>
      </rules>
    </rewrite>
    <handlers>
      <add name="aspNetCore" path="*" verb="*" modules="AspNetCoreModuleV2" resourceType="Unspecified" />
    </handlers>
    <aspNetCore processPath="dotnet" arguments=".\myapp.dll" stdoutLogEnabled="true" stdoutLogFile=".\logs\stdout" hostingModel="InProcess">
      <environmentVariables>
        <environmentVariable name="ASPNETCORE_ENVIRONMENT" value="Production" />
      </environmentVariables>
    </aspNetCore>
    <httpErrors errorMode="Detailed" />
  </system.webServer>
</configuration>

program.cs :

...
app.UseStaticFiles();
app.UseHttpsRedirection();
app.UseCors("corsapp");

app.UseRouting();
app.UseAuthentication();
app.UseAuthorization();

app.MapFallbackToFile("index.html");

app.MapControllers();

app.Run();

package.json has : "homepage": "./"

Router.js : enter image description here

index.js : enter image description here

Please remember that I am someone who is trying to learn these processes. Could you give me some ideas on how to solve this problem?

I also tried the scenario I described above and putting everything inside httpdocs, but I couldn't succeed.

Answer 1

You have confused your understanding of SPA and IIS Rewrite. Both of them are used in the project, causing conflicts.

The easiest way is option 1, you can fix it quickly, for more details you can check content below.

---

Please allow me to describe it for you.

1. SPA.

We need to build front-end project (Like: React, Angular) and put the frontend-publish files under the wwwroot folder of asp.net-core webapi project. Here is the sample structure screenshot.

If using this way, then we don't need to use rewrite rules like yours. It uses app.UseStaticFiles(); middleware to implement this feature.

Here is the detailed steps sample for you.

Angular SPA Application.

---

2. IIS Rewrite.

Usually I we want host front-end and backend with same domain, we will use IIS Virtual Application and Rewrite Rules to implement this feature.

And here is detailed steps for react sample. It not use Rewrite Rules, if you have some requirement you can add it.