React application using NET7 api - rewriting URL on a site

Question

I'm trying to host a React application with NET7 api on an IIS site. There is a file structure like this in the root folder

• index.html
• Other files js/css
• api/my-app.exe (contains all .NET api binaries in subfolder api)

The

Api works because I request the /api/status healthcheck method and it returns 200. But when I request /index.html I get 404 (Not Found).

Do you know how I should set up the rewrite rules or otherwise configure it to get the index.html file

This is my web.config

<?xml version="1.0" encoding="utf-8"?>
<configuration>
    <system.webServer>
      <handlers>
        <add name="aspNetCore" path="*" verb="*" modules="AspNetCoreModuleV2" resourceType="Unspecified" />
      </handlers>
      <aspNetCore processPath=".\api\my-app.exe" arguments=".\api\my-app.dll" stdoutLogEnabled="true" stdoutLogFile=".\iis-logs\" hostingModel="OutOfProcess" />
        <directoryBrowse enabled="false" />
        <httpErrors errorMode="DetailedLocalOnly" existingResponse="Auto" />
        
        <rewrite>
            <rules>
                <clear />
                <rule name="Stop process React routes" stopProcessing="true">
        TODO: how to write rule to get index.html file ??
                </rule>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>

Answer 1

You can try to modify the rewrite rules in the web.config file. Here's how to set up rewrite rules to serve your React application's index.html file and other static resources:

<rewrite>
         <rules>
             <rule name="Serve React App" stopProcessing="true">
                 <match url=".*" />
                 <conditions logicalGrouping="MatchAll">
                     <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                     <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                 </conditions>
                 <action type="Rewrite" url="/index.html" />
             </rule>
         </rules>
     </rewrite>

You need to adjust the path and configuration according to your specific project structure and needs.