Deploy React JS in Tomcat

Deploy React JS in Tomcat:-

Deploy react JS  in tomcat or any servlet container is a challenge and bit tricky. There is an issue in one of my app that I am developing. I have used BrowserRouter in my app.

So the issue is there were no errors as such in the code but nothing is loading.I see a White Screen with no errors. I checked the console and saw its throwing  404 for some of my bundled static resources.

A strange behavior is noticed, if I run the app in web pack dev server same code works fine and routers works fine as well.But same behavior is not observed once I deploy to tomcat.

So after a lot of research and thinking, i  got the solution. As you know BrowserRouter uses HTML5 history API to keep your UI in sync with URL.So, For example, if you used React Router with a route for,/todos/42 the webpack development server will respond properlylocalhost:3000/todos/42, but a production build as above will not.Check out this link to understand the problem.

React router takes the root URL  by default, hence able to serve static resources from tomcat ROOT directory.But Once you deploy the build files to a different path is not able to serve static content.

In this article, we will see how we can configure our code and deploy in tomcat successfully.We will use Maven to create a war of our UI and deploy in tomcat. Deploy React JS in Tomcat needs some changes in router property .

Tools Used:-

  • Maven 3.3.9
  • Npm



We Configure BrowserRouter in our app as follows, provide full path of your context as follows. Above code redirects all errors to index.html.


We declared three routes in our sample app, Our maven script will replace the basename with actual tomcat url context.process.env.REACT_APP_ROUTER_BASE  will be replaced by maven .

Basically, when you type the URL by hand, by default the server will look for a file with that path, stored on its disk — if not found, it will show a 404 error. What you want to do is internally redirect the request for static resources to the index of your application.

Now we run


React JS Tomcat

Download Code

Note:-   For a simple application built using create-react-app if we can to configure and Deploy React JS in Tomcat. We need to configure a relative path which can be done from your package.json. by declaring home page as follows.let’s say we have an app folder inside web app in tomcat known assampleapp.We want to have our deployed app in that location. So the relative path configuration would be as below.


3 thoughts on “Deploy React JS in Tomcat

Leave a Reply

Your email address will not be published. Required fields are marked *