Deploy React JS in Tomcat

3
1719
React 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

Pom.xml:-

Web.xml:-

 

We Configure BrowserRouter in our app as follows, provide full path of your context as follows. Above code redirects all errors to index.html.
<BrowserRouterbasename={process.env.REACT_APP_ROUTER_BASE||''}>





App.jsx:-

 

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

 

 

OutPut:-

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.

Most of the hosting services  which supports javascript and html supports reactjs hosting  as well , as it runs on client side .So to deploy react app it is not difficult but your app needs a backend server as well .Hence complexity increases and i faced this while deploying a react app to a  servlet container like tomcat . Let me know in your commnets if you have faced any similar sort of trouble deploying react app.

Posts You Want to Check :-




3 COMMENTS

LEAVE A REPLY

Please enter your comment!
Please enter your name here