[Solved]-How to bundle a React app to work in ANY subdirectory on a server?-Reactjs

answers to this and similar questions seem to neglect that, if using client-side routing (like react router) there are some back-end changes that should be made when serving from a subdirectory.

there are several approaches to this. one is to use <hashrouter>; that approach is described well here, or in the react router docs.

another approach is to use <browserrouter> with express. here are the steps for that:

in your app:

    <browserrouter basename={process.env.public_url}>
        <route path="/your_route">
          ...
        </route>
        <route exact path="/">
          ...
        </route>
    </browserrouter>

then, in package.json, add:

homepage: "https://example.com/mysubdirectory"

(note that "." will not work, if you're using client-side routing.)

then, in express, try the connect-history-api-fallback package (which is recommended in the vue router docs).

const express = require('express');
const historyfallback = require('connect-history-api-fallback');

const app = express();
app.use(historyfallback);

without this, users will not be able to directly enter https://example.com/mysubdirectory/my_route in the browser's url bar; they'll get a cannot get error.

you can see an example of the above with apache here.

in package.json

"homepage": ".",

if you are using react-router-dom, if you know your directory name you could set basename to "/directory-name" in the router

or

if you want to set the base name to be dynamic, use

(note: this won't be useful if you are using sub routing)

or

incase of sub routing, set a standard string to your routes

example:

 let basename_path = null;
   var url = window.location.pathname.tolowercase();
   if(url.indexof("react") === -1){    // if string(react) not available
            basename_path = "/";
   }
    else{
       var array = url.split("react");
       basename_path = array[0]+"react/";
     }


 <router basename={basename_path}>   
   <route exact path="/react/home" component={home}/>
   <route exact path="/react/contactus" component={contactus}/>
   <route exact path="/react/aboutus" component={aboutus}/>               
 </router>