Problem with production build of spring boot and react app - build

Question

I am working on a project which has its backend written in spring boot and UI written in react, the react UI code is clubbed into the maven project carrying spring code like
JavaMavenProject (Project Structure)
->src
->main
->java (Spring boot code)
->reactcode (UI react code)
->resources
->webapp
-> test
I use plugins(snippet below) in pom.xml to build react code as well when i build my java code
<plugin>
<groupId>com.github.eirslett</groupId>
<artifactId>frontend-maven-plugin</artifactId>
<version>1.7.6</version>
<executions>
<execution>
<id>Install node and npm</id>
<goals>
<goal>install-node-and-npm</goal>
</goals>
<phase>generate-resources</phase>
<configuration>
<nodeVersion>v14.15.0</nodeVersion>
<npmVersion>6.14.8</npmVersion>
</configuration>
</execution>
<execution>
<id>npm install</id>
<goals>
<goal>npm</goal>
</goals>
<phase>generate-resources</phase>
<configuration>
<arguments>install</arguments>
</configuration>
</execution>
<execution>
<id>npm build</id>
<goals>
<goal>npm</goal>
</goals>
<phase>generate-resources</phase>
<configuration>
<arguments>run build</arguments>
</configuration>
</execution>
</executions>
<configuration>
<nodeVersion>v14.15.0</nodeVersion>
<workingDirectory>src/main/reactcode</workingDirectory>
</configuration>
</plugin>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-resources-plugin</artifactId>
<executions>
<execution>
<id>Copy my react app into my Spring Boot target static folder</id>
<phase>process-resources</phase>
<goals>
<goal>copy-resources</goal>
</goals>
<configuration>
<outputDirectory>target/classes/static</outputDirectory>
<resources>
<resource>
<directory>src/main/reactcode/build</directory>
<filtering>true</filtering>
</resource>
</resources>
</configuration>
</execution>
</executions>
</plugin>
Now when I test my entire application through Intellij things run fine, but when i create a war file to run it on "Apache Tomcat",even "index.html" is not loaded, I tried to debug this so I got below(image) mentioned problem
enter image description here
for which I when I removed the starting backslashes for these from the exploded war file in the webapp folder of Apache Tomcat(just to debug the problem)
<script src="/static/js/2.f62791a5.chunk.js"></script>
<script src="/static/js/main.839bea33.chunk.js"></script>
so after changing above code to
<script src="static/js/2.f62791a5.chunk.js"></script>
<script src="static/js/main.839bea33.chunk.js"></script>
index.html along with chunk.js and chunk.css starting to show up like see below image
enter image description here
Now, aaahh.. when o tried to click on the links they are not working , I tried to check the network logs and also the server but no luck there as well.
Code of "package.json"
{
"name": "mapping-tool",
"version": "0.1.0",
"private": true,
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.32",
"#fortawesome/free-brands-svg-icons": "^5.15.1",
"#fortawesome/free-solid-svg-icons": "^5.15.1",
"#fortawesome/react-fontawesome": "^0.1.12",
"#testing-library/jest-dom": "^5.11.6",
"#testing-library/react": "^11.1.2",
"#testing-library/user-event": "^12.2.2",
"axios": "^0.21.0",
"bootstrap": "^4.5.3",
"react": "^17.0.1",
"react-autocomplete-input": "^1.0.15",
"react-bootstrap": "^1.4.0",
"react-bootstrap-table-next": "^4.0.3",
"react-bootstrap-table2-editor": "^1.4.0",
"react-bootstrap-table2-filter": "^1.3.3",
"react-bootstrap-table2-paginator": "^2.1.2",
"react-dom": "^17.0.1",
"react-flexy-table": "^1.3.6",
"react-gif-loader": "^0.6.0",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.0",
"react-select": "^3.1.1",
"web-vitals": "^0.2.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
code for "App.js"
import React from 'react';
import './App.css';
import Mappings from './Mappings';
import Mapping from './Mapping';
import Test from './Test';
import Property from './Property';
import { Route, BrowserRouter as Router, Switch } from 'react-router-dom';
import NavigationBar from './Components/NavigationBar';
import {Row, Col, Container } from 'react-bootstrap';
function App() {
return (
<Router>
<NavigationBar />
<Container>
<Row>
<Col lg={12} className={"margin-top"}>
<Switch>
<Route path="/add" exact component={Mapping} />
<Route path="/edit/:id" exact component={Mapping} />
<Route path="/list" exact component={Mappings} />
<Route path="/tester" exact component={Test} />
<Route path="/property" exact component={Property} />
</Switch>
</Col>
</Row>
</Container>
</Router>
);
}
export default App;
code for "NavigationBar.js"
<Navbar bg="dark" variant="dark">
<Link to={""} className="navbar-brand">
</Link>
<Nav className="mr-auto">
<Link to={"add"} className="nav-link">Add System</Link>
<Link to={"list"} className="nav-link">Mapping List</Link>
<Link to={"tester"} className="nav-link">Add Mapping</Link>
<Link to={"property"} className="nav-link">Property</Link>
</Nav>
</Navbar>
Problem statement in conclusion : I have spring boot and react app in one Maven Java project which i make a production build which I deploy on Apache Tomcat, Things run fine on Intellij but on Tomcat they are not running.
"sigh........"
I would appreciate any help
Thanks

Answer 1

Fixed by doing following steps :
using HashRouter instead of BrowserRouter
setting "homepage": "." in package.json
for point1 do this :
<HashRouter>
<Container>
<Row>
<Col lg={12} className={"margin-top"}>
<Switch>
<Route path="/add" exact render={(props) => (
<Component1 {...props} restUrls={this.state.urls} />
)} />
<Route path="/edit/:id" exact render={(props) => (
<Component2 {...props} restUrls={this.state.urls} />
)} />
</Switch>
</Col>
</Row>
</Container>
</HashRouter>