- Build your React app using the
npm run build
command. This will create abuild
folder with the compiled assets and files. - Open IIS Manager and create a new virtual directory under the website you want to use.
- In the virtual directory properties, set the physical path to the
build
folder created in step 1. - In the virtual directory properties, set the application pool to the same one used by the parent website.
- In the virtual directory properties, set the virtual path to the desired subdirectory name (e.g.
/myapp
). - Open the
web.config
file located in thebuild
folder and add the following code inside the<system.webServer>
element:
<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" />
</conditions>
<action type="Rewrite" url="/myapp/index.html" />
</rule>
</rules>
</rewrite>
This code will rewrite any incoming request to the subdirectory to the index.html
file inside the build
folder.
- Save the
web.config
file and restart IIS.
Your React app should now be accessible in the subdirectory you specified, and all the routes should work as expected.