When there is an existing site in IIS, there are many cases where you want to do microservices using sub-paths. https://www.example.com/verification

Since Home is set to be used as the root path by default in React apps, subservices need to do some processing.

1. Set BrowserRouter (react-router-dom) basename

// App.js
import React from 'react';
import { BrowserRouter } from 'react-router-dom';

export default function App() {

...

  return (
    <BrowserRouter basename="/verification">
      <div>
          ...
      </div>
    </BrowserRouter>
  );
}

Set the basename, the default props of the App.js file BrowserRouter, to the sub-path.

2. Add package.json “homepage” value

{
  "name": "app",
  "version": "0.1.0",
  
...

    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "homepage": "https://www.example.com/verification"
}

Enter the full address to be hosted here.

After building with the npm run build command, copy and paste all files in the build folder to the desired path of the IIS server. The folder path and name are irrelevant here. Because it will be specified as a virtual path anyway.

3. Add IIS virtual directory

Right-click on the existing site and click ‘Add Virtual Directory…’. Specify the sub-path name for the alias and the path where the built files are located for the real path.