how to deploy reactJS application on Tomcat Server

npm run build can trigger the build process but it generates code assuming the base url doesnt have any relative path , but what if i want to deploy to a relative path in my server ??. So what i mean by relative path is that, I have a simpleapp folder inside my tomcat webapps directory and i want to access my react app from that i.e http://localhost/simpleapp . It gets even more complex if you use react router .

I was getting a blank page but later, I found Some changes done on react router and package.json that solved my issue .

So the solutions that i found are :-

1. Mention homepage property in package.json

   "homepage": "https://localhost:8080/simpleapp",

2. For react router we must add basename property .

In above case for app to be deployed on simpleapp relative path

<Router basename={'/simpleapp'}>
  <Route path='/' component={Home} />
  {/* … */}
</Router>

Run this command in the root folder of your react code.

npm run build

This generates an optimized production build in a folder called 'build', which basically contains an index.html page, with static JS and CSS files. You can then copy + paste these files into your Tomcat WebContent folder.

Here's a link that might throw some light on this.

You need to first decide on how you are going to build your project using Grunt or webpack. You can also add scripts like npm run build in your package json which can trigger the build process. The built project can be used in any web server by just placing the built files and including the script in your index.html.

Follow step 1 as @Passcode above. And for Step 2 use 'HashRouter'

1) Go to index.js

2) Import HashRouter

Eg-> import { BrowserRouter, Route, Switch, Redirect,HashRouter} from "react-router-dom";

3) If you have 'BrowserRouter' replace it with 'HashRouter'.

More details

1. https://medium.com/@daniel.hramkov/browserrouter-vs-hashrouter-e8bf1c3824ce
2. React-router urls don't work when refreshing or writing manually