React + Tomcat + REST API Magic🧙‍♂️


Step-by-step guide to deploying React on Tomcat & connecting to REST APIs
Have you ever tried running a React application on a Tomcat server and integrating it with REST APIs — all within an on-premise environment? If you have, you know it’s a bit of a challenge. If you haven’t, here’s a simple, practical guide to get you started, and hopefully make your journey smoother!
React application on tomcat server
Why React + Tomcat + REST APIs?
React gives you a dynamic, modern front-end experience.
Tomcat is a reliable, widely-used Java servlet container ideal for serving web apps on-premise.
REST APIs connect your front end with external or internal services like verification, data fetching, or business logic.
Combining these allows you to build powerful, interactive applications that run entirely in your controlled environment — no cloud dependency required.
Step 1: Create Your React App
Start with the official tool to bootstrap your React project:
npx create-react-app reactapp
cd reactapp
This sets up everything you need to get coding quickly.
Step 2: Prepare React for Tomcat Deployment
Tomcat expects web apps to be served from context paths, so configure your React app accordingly. Open package.json
and add:
"homepage": "/reactapp"
This tells React to prefix all asset URLs with /reactapp
, so they load correctly from Tomcat.
Step 3: Build the Production Version
Run the build script to generate optimized static files:
npm run build
The build
folder now contains your production-ready React app.
Step 4: Deploy to Tomcat
Copy the contents of the build
folder to your Tomcat webapps/reactapp
directory:
If your Tomcat is installed at
/opt/tomcat/
, the path might be/opt/tomcat/webapps/reactapp/
Restart Tomcat to ensure your app is picked up.
Step 5: Verify Deployment
Visit:
http://your-server-ip/reactapp/
You should see your React app load successfully, no blank pages or missing files!
Step 6: Add REST API Integration in React
To call APIs from your React app (running in the browser), use fetch
or axios
. For example:
fetch('https://api.example.com/verify', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ pan: 'ABCDE1234F', aadhaar: '123456789012' })
})
.then(res => res.json())
.then(data => {
// Display success or error messages based on API response
console.log('Verification result:', data);
})
.catch(err => {
console.error('API call failed:', err);
});
This client-side call avoids backend network restrictions since the user’s browser makes the request directly.
Step 7: Show Only What Matters to Users
APIs usually return complex JSON data. Parse the response and display clear, concise status or error messages. For example:
if (data.status === 'success' && data.result.is_linked) {
alert('PAN & Aadhaar are linked successfully!');
} else {
alert('Verification failed or data mismatch.');
}
Clear feedback keeps users informed and improves their experience.
Step 8 (Optional): Post Verification Results to Backend
If you want to store or audit verification results, send them from React back to your backend via REST endpoints.
Pro Tips for Smooth Deployment
Relative Paths: Always set the
homepage
inpackage.json
when deploying to a subpath.CORS: If API servers block cross-origin requests, configure CORS on the backend or use a proxy.
Tomcat Setup: Ensure Tomcat serves static files properly and the React app is in the correct directory.
Test Thoroughly: Test API calls from the browser console first to rule out network or permission issues.
Final Thoughts
Deploying React apps on Tomcat with REST API integration might sound daunting, but breaking it down into clear steps makes it manageable — and fun! Whether you’re working on enterprise on-premise projects or experimenting with new tech, this combo gives you a flexible, modern frontend experience that works within your infrastructure.
If you’re considering this setup, take the leap! You might stumble on a few challenges, but the learning and flexibility are worth it.
Feel free to ask questions or share your experience in the comments — let’s grow together! 🚀
🙌 Let's Connect
If this helped you — or you're trying something similar — I’d love to hear your thoughts!
Linkedin: www.linkedin.com/in/alivenidevops
Subscribe to my newsletter
Read articles from aliveni devops directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by
