How to deploy react.js project on iis server at subdomain?

Question

I would like to deploy react.js project on iis server at a subdomain.

The works I do below:

1. BrowserRouter with basename

import { BrowserRouter } from 'react-router-dom';

<BrowserRouter basename="/Subdomain">
   <App></App>
</BrowserRouter>

In App;

<Switch>
  <Route exact path="/" component={Main} />
...
</Switch>

2. Add 'HomePage' at package.json

   "homepage": "https://domain/subdomain/"

3. Install URL Rewrite for IIS and create web.config

https://www.iis.net/downloads/microsoft/url-rewrite

web.config

<?xml version="1.0" encoding="UTF-8"?>
    <configuration>
      <system.webServer>
      <rewrite>
        <rules>
          <rule name="Rewrite Text Requests" stopProcessing="true">
            <match url=".*" />
            <conditions>
              <add input="{HTTP_METHOD}" pattern="^GET$" />
              <add input="{HTTP_ACCEPT}" pattern="^text/html" />
              <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            </conditions>
            <action type="Rewrite" url="/index.html" />
          </rule>
        </rules>
      </rewrite>
    </system.webServer>
    </configuration>

Although I did iisreset, still getting error (404 - File or directory not found.) when open page at Link in BrowserRouter.

Thank you for your help.

Answer 1

Include your subdomain in the action of web.config. It works.

<action type="Rewrite" url="/subdomain/index.html" />

And you might need to place the web.config inside your subdomain folder. Not in the root folder.

Answer 2

I have refresh and subdomain problems. This configuration solves my problems.

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
  <rewrite>
    <rules>
      <rule name="Rewrite Text Requests" stopProcessing="true">
        <match url=".*" />
        <conditions>
          <add input="{HTTP_METHOD}" pattern="^GET$" />
          <add input="{HTTP_ACCEPT}" pattern="^text/html" />
          <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
        </conditions>
        <action type="Rewrite" url="/ui/index.html" />
      </rule>
    </rules>
  </rewrite>
  <httpErrors errorMode="Custom" existingResponse="Replace">   
    <remove statusCode="404" subStatusCode="-1" />
    <error statusCode="404" path="/ui" responseMode="ExecuteURL" />           
  </httpErrors>
  </system.webServer>
</configuration>