How to deploy React on IIS?

Question

When working on localhost, the app is assumed to be on root of the local dev server

localhost:50001/index.html

But when deploying to a remote IIS server, there are other web apps running there, and each individual app must be created as an "Application" (IIS terminology)

So for example, the 'Default Web Site' is on port 80; other apps (also on port 80) have their own AppName.

MYSERVERNAME/App1/
MYSERVERNAME/App2/
MYSERVERNAME/MyReactApp/

So now to get to my React App i have an additional path http://MYSERVERNAME/MyReactApp/index.html

The index.html produced by 'npm run build' contains absolute paths; To make my deployment work, I manually edited the index.html to contain relative paths

So for example, instead of:

<script type="text/javascript" src="/static/js/main.d17bed58.js"></script>

I added a .(dot) in front of all paths to get:

<script type="text/javascript" src="./static/js/main.d17bed58.js"></script>

This works mostly, and all scripts load initially. BUT I am not happy with the result, because any links and client-side routes (i.e from react-router) that I click within the app, will revert to assume the app is hosted on the root of the webserver. i.e.

http://MYSERVERNAME/

http://MYSERVERNAME/Home

http://MYSERVERNAME/MyWorkOrder/

http://MYSERVERNAME/MyWorkOrder/123456

Furthermore, if I type any of the links directly on the browser (or refresh the page), it will fail obviously.

To recap. the question is I need to maintain the "true" path http://MYSERVERNAME/myReactApp at all times, when deploying to IIS. How to do that?

Answer 1

From the docs:

Building for Relative Paths

By default, Create React App produces a build assuming your app is hosted at the server root. To override this, specify the homepage in your package.json, for example:

"homepage": "http://mywebsite.com/relativepath", 

This will let Create React App correctly infer the root path to use in the generated HTML file.

For example:

<script type="text/javascript" src="/static/js/main.xyz.js"></script>

will become:

<script type="text/javascript" src="/relativepath/static/js/main.xyz.js"></script>

---

If you are using react-router@^4, you can root <Link>s using the basename prop on any <Router>. More information here.

For example:

<BrowserRouter basename="/calendar"/>
<Link to="/today"/> // renders <a href="/calendar/today">