DEV Community: Yogeth.C.R

Automating Java Servlet Deployments with Gradle and Bash

Yogeth.C.R — Wed, 05 Aug 2026 07:55:47 +0000

Step 1: Configuring Gradle for Web Archives (`.war`)

To create standard web archives, ensure the war plugin is applied in build.gradle. Additionally, we will configure a predictable output directory and file name so our automation script always knows where to locate the generated binary.

Add the following to build.gradle:

plugins {
    id 'java'
    id 'war'
}

group = 'com.demo'
version = '1.0.0'

repositories {
    mavenCentral()
}

dependencies {
    // Jakarta Servlet API (or javax.servlet for older Tomcat versions)
    providedCompile 'jakarta.servlet:jakarta.servlet-api:6.0.0'
}

// Ensure predictable archive naming and destination
war {
    archiveFileName = 'app.war'
    destinationDirectory = file("$buildDir/dist")
}

By explicitly setting archiveFileName = 'app.war' and directing it to $buildDir/dist, we prevent dynamic version numbers (e.g., app-1.0.0.war) from breaking our downstream bash script.

Test the build configuration:

./gradlew war

You should see your compiled package at build/dist/app.war.

Step 2: Creating the Deployment Script (`deploy.sh`)

Now, we will write a Bash script to orchestrate the deployment workflow:

Validate and build the .war package.
Stop the local Tomcat instance safely.
Clean old deployments from Tomcat's webapps/ directory.
Copy the new .war file.
Restart Tomcat and display process logs.

Create deploy.sh in your project root:

#!/usr/bin/env bash

# Exit immediately if a command exits with a non-zero status
set -e

# Configuration Paths - Adjust TOMCAT_HOME to your installation path
TOMCAT_HOME="${TOMCAT_HOME:-/opt/tomcat}"
WAR_SOURCE="build/dist/app.war"
DEPLOY_DIR="$TOMCAT_HOME/webapps"
APP_NAME="app"

# Terminal Formatting Colors
GREEN=' [0;32m'
BLUE=' [0;34m'
RED=' [0;31m'
NC=' [0m' # No Color

echo -e "${BLUE}[1/5] Building project archive with Gradle...${NC}"
./gradlew war

if [ ! -f "$WAR_SOURCE" ]; then
    echo -e "${RED}[ERROR] Archive build failed. $WAR_SOURCE not found.${NC}"
    exit 1
fi

echo -e "${BLUE}[2/5] Stopping Tomcat...${NC}"
if [ -f "$TOMCAT_HOME/bin/shutdown.sh" ]; then
    "$TOMCAT_HOME/bin/shutdown.sh" || true
fi

echo -e "${BLUE}[3/5] Cleaning previous deployments...${NC}"
rm -rf "$DEPLOY_DIR/$APP_NAME"
rm -f "$DEPLOY_DIR/$APP_NAME.war"

echo -e "${BLUE}[4/5] Deploying new WAR file...${NC}"
cp "$WAR_SOURCE" "$DEPLOY_DIR/$APP_NAME.war"

echo -e "${BLUE}[5/5] Starting Tomcat...${NC}"
"$TOMCAT_HOME/bin/startup.sh"

echo -e "${GREEN} Successfully deployed $APP_NAME.war to Tomcat!${NC}"
echo -e "Access application at: http://localhost:8080/$APP_NAME/"

Make the script executable:

chmod +x deploy.sh

Step 3: Running and Verifying the Pipeline

Execute your single-command deployment:

./deploy.sh

Script Execution Flow

Gradle compiles class files and packages build/dist/app.war.
Tomcat is safely stopped to release file locks.
Legacy context folders and stale .war files are removed from webapps/.
The fresh build is placed into webapps/app.war.
Tomcat restarts and auto-expands the package.

Verify by running:

curl -I http://localhost:8080/app/

Key Takeaways & Conclusion

Predictable Outputs: Setting deterministic output filenames in build.gradle simplifies automation scripts.
Idempotency: Cleaning stale files (rm -rf) before deploying prevents Tomcat from serving stale code or holding file locks.
Portability: This Bash pattern can easily be modified for remote servers over SSH or integrated into CI/CD pipelines like GitHub Actions or Jenkins.

Did you find this approach helpful? Check out my open-source projects on GitHub or connect with me on DEV Community.

How to Connect a React Frontend to a Spring Boot REST API

Yogeth.C.R — Wed, 05 Aug 2026 07:29:13 +0000

When building modern full-stack web applications, separating the frontend UI from the backend business logic is standard practice. A common challenge developers encounter when connecting a React application to a Spring Boot backend is handling Cross-Origin Resource Sharing (CORS) and state synchronization.

In this tutorial, you will learn how to build a RESTful API in Spring Boot, expose an endpoint, and fetch data from a React frontend.

Prerequisites

Before starting, ensure you have the following installed on your machine:

Node.js (v18+) & npm
Java Development Kit (JDK 17+)
Maven or Gradle

Step 1: Setting Up the Spring Boot Backend

First, configure a Spring Boot controller to serve a JSON endpoint and handle CORS requests.

Create the Controller (`WeatherController.java`)

package com.example.demo.controller;

import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.HashMap;
import java.util.Map;

@RestController
@RequestMapping("/api")
@CrossOrigin(origins = "http://localhost:5173") // Enables React frontend origin
public class WeatherController {

    @GetMapping("/status")
    public Map<String, String> getStatus() {
        Map<String, String> response = new HashMap<>();
        response.put("status", "Online");
        response.put("message", "Backend successfully connected to React!");
        return response;
    }
}

Key Note: The @CrossOrigin annotation prevents CORS errors when making fetch calls from your local React development server.

Step 2: Setting Up the React Frontend

Now, create a React component using standard hooks (useState and useEffect) to call the Spring Boot API.

Create the Fetch Component (`ApiStatus.jsx`)

import { useState, useEffect } from 'react';

export default function ApiStatus() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch('http://localhost:8080/api/status')
      .then((res) => {
        if (!res.ok) throw new Error('Failed to reach backend');
        return res.json();
      })
      .then((data) => {
        setData(data);
        setLoading(false);
      })
      .catch((err) => {
        setError(err.message);
        setLoading(false);
      });
  }, []);

  if (loading) return <p>Connecting to Spring Boot backend...</p>;
  if (error) return <p style={{ color: 'red' }}>Error: {error}</p>;

  return (
    <div style={{ padding: '20px', border: '1px solid #ccc' }}>
      <h3>Backend Connection Status</h3>
      <p><strong>Status:</strong> {data.status}</p>
      <p><strong>Message:</strong> {data.message}</p>
    </div>
  );
}

Step 3: Verifying the Connection

Run your Spring Boot application using ./mvnw spring-boot:run (runs on port 8080 by default).
Start your React dev server using npm run dev (runs on port 5173).
Open your browser to http://localhost:5173. You should see the message: "Backend successfully connected to React!"

Conclusion

Connecting React with Spring Boot requires configuring CORS policy annotations on the backend and managing API loading/error states cleanly in the React frontend.