Serve a react app in a subfolder using IIS

Question

This is the desired result:

1. http://{domain} redirect to http://{domain}/subfolder
2. when a put http://{domain}/subfolder/contacts on the browser, I expect that serves exactly the desired page (contacts)

Actually, with IIS's URL Rewrite only the first condition is satisfied, the second give me a 404 page.This is the annoying behavior, because if the user refreshes the page, IIS will not render my React app.

This is my URL Rewrite node in the Web.config of the root subfolder of {domain}:

<rewrite> 
    <rules> 
      <rule name="react routes" stopProcessing="true"> 
         <match url=".*" /> 
         <action type="Redirect" url="/subfolder" /> 
      </rule> 
    </rules> 
</rewrite> 

This is my code:

import logo from './logo.svg';
import './App.css';
import {BrowserRouter,Switch,Route,Link} from 'react-router-dom'

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <BrowserRouter basename="subfolder">
        <p>
        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/contacts">
            <Contacts />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
          <Link to="/">Home</Link>
          <Link to="/about">About</Link>
          <Link to="/contacts">Contacts</Link></p>
        </BrowserRouter>
      </header>
    </div>
  );
}
function Home(){
  return <div>Home</div> 
}
function About(){
  return <div>About</div> 
}
function Contacts(){
  return <div>Contact</div> 
}

export default App;

Answer 1

Try add in your package.json "homepage" : "/subfolder"