Include React App into existing JSP App

Warning

this is only an example Project

We use am simple Apache Tomcat 10 App, inside a Docker Compose Setup the folder "app" is mounted into the right postion of the Tomcat. the web.xml is only for this example.

Tip

under "app/WEB-INF/lib" we need to install JSTL by download the spec an the impl

Buidling the React App with Vite

Overview: Vite Guide
better use with TypeScript

this example react app is under "react-app" to build the react app we use npm. Other tools like yarn are fine, too.

npm install
npm run build

under "react-app\dist" we will find an "index.html" and the linked CSS and JS file on the subfolder "assets" copy all this into the "existing" JSP App.

Copy the linking of the CSS and JS file into the needed jsp file. Than copy the HTML Snipped:

<div id="weather-icon"></div>

on the right place.

now we can start the tomcat 10.1.26

docker-compose up -d

Now we can check the example JSP jakarta tomcat app with included react component with full hook support.