• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

Abhishek Tanwar

I build web & mobile experiences

  • HOME
  • BLOG
  • CONTACT ME
  • DISCLAIMER & COPYRIGHTS
You are here: Home / Building Web Apps / How To Integrate React in JSP Application

How To Integrate React in JSP Application

June 6, 2018 by Abhishek Tanwar

Hello folks!

Today, I want to share a problem that I was having at work. I have a very legacy application written in JSP using scriplets, tiles and what not they were using in thier stone age era. I wanted to use React for a set of UIs connected via routers. So I created the entire app in React which can be used in the place of certain set of JSPs.

THE PROBLEM

Now the problem was that I had to embed the ReactJS application into the JSP application using the same construct and framework. There were lot of JSPs with different URLs and different parameters passed from servlet context.

If you are wondering how to acheive this in React and Integrating into JSP, please read on.

THE SOLUTION

There are 2 things you need to do to achieve this. React Fix and Servlet Container Fix (tomcat application in my perspective). Lets look at them.

React Fix

The change on react side is to provide the “homepage” property in package.json to enable react build script to consider the same. In my side, the application will be hosted under a folder named “/web/br” hence my package.json looks like below:

package.json
package.json

Next things to do in React is to provide a basename for all your routes so it start from the JSP you will put the react code in. In my case I am putting react within a jsp named “page2.jsp” under the folder “/web/br” hence my main App.js looks like below:

 

App.js
App.js

Now, lets talk about how we can enable the passing of URL parameters from JSP level to React App. When we hit a hit with a url parameters like “?param1=value1” and this page contains a react app, the url params will be passed to props.location.search as it is. The auto parsing into name value is removed from react router hence not automatically possible. However there is a simpler way to get it done. I prefer using URLSearchParams only.

const params = URLSearchParams(props.location.search)

and then you can get the params using the params object. Please refer API guide for the same. [URLSearchParams]

Done with ReactJS fix.

Tomcat Fix

Now, to be able to use the ReactJS complete framework with router, redux and state we need to tell our container to route all requests for a specific pattern to the same JSP. Below is my web.xml for the war project.

 

web.xml
web.xml

It tells the container to route all requests “/br/*” to my servlet which is a jsp embedding the react app.

The last part is simple. Embed the <div> tag for holding react app and set proper width and height for your application.

Well that all for the solution. It works like a charm. Hoping this would help you as well!

Let me know if this worked for you or you employ any other solution.

Please leave a comment and happy hacking!

Share this:

  • Facebook
  • X

Like this:

Like Loading...

Filed Under: Building Web Apps Tagged With: react, react in jsp, react in servlet, reactjs

Reader Interactions

Comments

  1. Prasanna says

    April 24, 2019 at 8:06 pm

    Sir, I am really happy to see this post. But need more insights of yours on this objective. would you mind tell me how i can i render the react components in jsp div tag.(As part of your explanation i can comprehend passing of parameters from jsp to React app but the problem here is with how can i put the react component in jsp like code snippet ). Thanks in advance

    • Abhishek says

      April 24, 2019 at 8:11 pm

      The embed of react in JSP is similar to how we use in HTML. There is no difference. We need to have index.html like structure as we get from react app. Basically, need a “div” tag with an id and same can be used in script.

      So when you build your react app, it will create index.html and nested folder structure. You can copy contents of index.html into your JSP and then your react app will live inside a jsp page. You can also rename index.html to index.jsp and define the servlet as mentioned in post.

      • HazyDeveloper says

        September 5, 2019 at 9:02 am

        Hi
        Thank you for the awesome article. Can you give an example of the project folder structure and also how to access the react embedded jsp file from another jsp file? Thanks in advance!

  2. sanna says

    April 26, 2019 at 2:21 pm

    could you tell me how jsp communicate like sharing its objects to react components. Thanks in advance

  3. rajani says

    May 27, 2019 at 3:21 pm

    how to get the React js Post request data in servlet post/get method ?

  4. Neelakantan says

    June 12, 2019 at 10:02 pm

    Did you observed any performance lag or performance improvement

    • Abhishek says

      April 18, 2020 at 4:30 pm

      No.

Primary Sidebar

  • Behance
  • Email
  • Facebook
  • GitHub
  • LinkedIn

Popular Posts

How To Integrate React in JSP Application
SaaS, PaaS, IaaS
XQuery highlighting in Notepad++
Standard Design Patterns – Applied to JAVA
XQDT Installation on Eclipse JUNO

Categories

  • Building APIs
  • Building Mobile Apps
  • Building Web Apps
  • Coding Challenges
  • Extensions
  • Fullstack
  • Patterns
  • Tips & Tricks
  • Uncategorized
  • VSCode

Tags

2022 vscode extensions Abstract Factory alienware amazing vscode extensions apple challenges coding coding-challenges Design Patterns dota2 dota2 items dynamic web service call dynamic webservice invocation enterprise integration express flex helpful vscode extensions how to implement mfa in nodejs increasing productivity using vscode integration pattern macro message channel message endpoint message pattern message router message translator messaging mfa offline action processing offline actions in struts pipes and filters PRG in struts react Steam struts System Emulator threads in struts utilities vscode vscode customization vscode extensions vscode productivity extensions xquery xquery 1.0 xquery design principles

Recent Posts

  • 15+ VSCode Extensions To Improve Your Productivity
  • Productivity and Quality Extensions for ReactJS in VSCode..
  • My goto VSCode plugins for 2022…
  • How to enable MFA for your application in Node.JS?
  • Structuring Express Application – How I do it?

Categories

  • Building APIs (8)
  • Building Mobile Apps (1)
  • Building Web Apps (7)
  • Coding Challenges (3)
  • Extensions (1)
  • Fullstack (6)
  • Patterns (8)
  • Tips & Tricks (41)
  • Uncategorized (43)
  • VSCode (2)

Tags

2022 vscode extensions Abstract Factory alienware amazing vscode extensions apple challenges coding coding-challenges Design Patterns dota2 dota2 items dynamic web service call dynamic webservice invocation enterprise integration express flex helpful vscode extensions how to implement mfa in nodejs increasing productivity using vscode integration pattern macro message channel message endpoint message pattern message router message translator messaging mfa offline action processing offline actions in struts pipes and filters PRG in struts react Steam struts System Emulator threads in struts utilities vscode vscode customization vscode extensions vscode productivity extensions xquery xquery 1.0 xquery design principles

Archives

  • August 2023 (1)
  • March 2022 (1)
  • February 2022 (1)
  • November 2020 (1)
  • April 2020 (2)
  • May 2019 (1)
  • April 2019 (1)
  • March 2019 (1)
  • December 2018 (1)
  • July 2018 (4)
  • June 2018 (3)
  • March 2018 (1)
  • May 2016 (1)
  • December 2015 (1)
  • May 2015 (1)
  • April 2015 (2)
  • March 2015 (1)
  • December 2014 (2)
  • November 2014 (2)
  • October 2014 (1)
  • August 2014 (2)
  • July 2014 (1)
  • April 2014 (1)
  • March 2014 (1)
  • February 2014 (2)
  • January 2014 (1)
  • December 2013 (4)
  • November 2013 (4)
  • October 2013 (3)
  • September 2013 (4)
  • August 2013 (2)
  • July 2013 (5)
  • June 2013 (9)
  • May 2013 (6)
  • April 2013 (2)
  • March 2013 (2)
  • January 2013 (1)
  • November 2012 (2)
  • HOME
  • BLOG
  • CONTACT ME
  • DISCLAIMER & COPYRIGHTS

Copyright © 2025

%d