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 in package.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

React + Tomcat + REST API Magic🧙‍♂️