[FIXED] How to deploy React on IIS?

Issue

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?

Solution

What i ended up doing

1) After npm run build, change absolute paths to relative paths within index.html (example href="./etc..." and src="./etc...")

2) use basename in <BrowserRouter basename="/MyReactApp"/> (as per the answer by @mehamasum)

3) And finally, when doing page refresh on a non-existent SERVER route, you need to redirect what would otherwise be a 404, to the index.html, and let the client-side react-router library do its job. How? In IIS Manager, go to the IIS section\Error Pages\double-click\Edit 404 Status code, and in the 'Edit Custom Error Page' dialog, choose 'Execute a URL on this site', and enter the absolute path /MyReactApp/index.html

Answered By - joedotnot

Answer Checked By - Candace Johnson (PHPFixing Volunteer)