0

I have developed simple application in react with 2 components i.e Category and Transport . i wanted to load these components using react-dom-routes whihch i am able to do so when application is deployed on node server . But when I productionized the application and depployed in the tomcat it is not working . I have also added web.xml with below configuration in my War . Can someone please help or let me know if I am missing anything .

On Node server I able to access component using below URL http://localhost:3000/category http://localhost:3000/transport

I wanted to access the component in similar way on tomcat.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);
reportWebVitals();

App.js

import './App.css';

import {BrowserRouter, Routes, Route } from "react-router-dom";
import Transport from "./Components/Transport";
import Category from "./Components/Category";


function App() {
    return (
        <div className="App">
            <BrowserRouter>
                  <Routes>
                      <Route index element={<Category/>}/>
                      <Route path="category" element={<Category/>}/>
                      <Route path="transport" element={<Transport/>}/>
                  </Routes>
            </BrowserRouter>

        </div>
    );
}

export default App;

Web.xml

<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?><web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" metadata-complete="false" version="3.1" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee    http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd">

    <display-name>React App </display-name>

    <error-page>
        <error-code>404</error-code>
        <location>/index.html</location>
    </error-page>

</web-app>
Suraj Ahirrao
  • 182
  • 10
  • 1
    What does "not working" mean? Do you get an error from the Tomcat code you didn't show? – stdunbar Apr 04 '22 at 14:15
  • Review [Serving apps with client-side routing](https://create-react-app.dev/docs/deployment/#serving-apps-with-client-side-routing) and this [SO answer](https://stackoverflow.com/questions/41246261/react-routing-is-able-to-handle-different-url-path-but-tomcat-returns-404-not-av/41249464#41249464). – Drew Reese Apr 04 '22 at 18:24

1 Answers1

0

You have to build the react application in production mode and copy all build contents into the ROOT directory of tomcat webapps folder. Then rename index.html to index.jsp

In your web.xml add the below servlet mapping. This will redirect all your requests to index.jsp

<servlet>
    <servlet-name>index</servlet-name>
    <jsp-file>/index.jsp</jsp-file>
</servlet>
<servlet-mapping>
    <servlet-name>index</servlet-name>
    <url-pattern>/*</url-pattern>
</servlet-mapping>

In case you need to redirect only specific url to the react app configure it in the <url-pattern>

Vignesh Varadharajan
  • 112
  • 5