JSP Development using Maven & VS Code (Step-by-Step)

This guide explains how to create, configure, and run a JSP project using Maven, VS Code (Antigravity), and embedded Tomcat, without manually copying WAR files.

1️⃣ Prerequisites

Make sure the following are installed:

Java JDK 8 or above
Apache Maven
VS Code / Antigravity
VS Code Extensions:
- Extension Pack for Java
- Maven for Java

Verify from terminal:

java -version
mvn -version

2️⃣ Create Maven Web Project (JSP)

Run the following command in terminal:

mvn archetype:generate \
-DgroupId=com.cia \
-DartifactId=jsp-demo \
-DarchetypeArtifactId=maven-archetype-webapp \
-DinteractiveMode=false

This creates a standard Maven Web Application structure.

3️⃣ Project Structure

After creation, the folder structure will look like this:

jsp-demo/
 ├── pom.xml
 └── src/
     └── main/
         └── webapp/
             └── index.jsp

index.jsp → entry point of the JSP application
pom.xml → Maven configuration file

4️⃣ Configure `pom.xml`

Replace / update pom.xml with the following configuration:

Key Points:

Packaging type is war
Updated maven-war-plugin
Embedded Tomcat using tomcat7-maven-plugin
Port changed to 8081 to avoid conflict

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>com.cia</groupId>
  <artifactId>demo</artifactId>
  <packaging>war</packaging>
  <version>1.0-SNAPSHOT</version>
  <name>demo Maven Webapp</name>
  <url>http://maven.apache.org</url>
  
  <dependencies>
    <dependency>
        <groupId>com.mysql</groupId>
        <artifactId>mysql-connector-j</artifactId>
        <version>8.0.33</version>
    </dependency>
</dependencies>

  <build>
    <finalName>demo</finalName>
<plugins>
    <!-- WAR Plugin (updated for modern Java) -->
      <plugin>
        <groupId>org.apache.maven.plugins</groupId>
        <artifactId>maven-war-plugin</artifactId>
        <version>3.4.0</version>
      </plugin>

      <!-- Embedded Tomcat -->
      <plugin>
        <groupId>org.apache.tomcat.maven</groupId>
        <artifactId>tomcat7-maven-plugin</artifactId>
        <version>2.2</version>
        <configuration>
          <path>/jsp-demo</path>
          <port>8081</port>
        </configuration>
      </plugin>

    </plugins>
  </build>
</project>

5️⃣ Sample `index.jsp`

Edit src/main/webapp/index.jsp:

<html>
<body>
    <h2>Hello World!</h2>

    <!-- Read number from query parameter and print square -->

    <%
        String num = request.getParameter("number");
        if (num != null) {
            int x = Integer.parseInt(num);
    %>
        <p>Square of <%= x %> is <%= x * x %></p>
    <%
        } else {
    %>
        <p>Please pass number as query parameter</p>
        <p>Example: ?number=5</p>
    <%
        }
    %>
</body>
</html>

Sample 2

<html>
<body>

<h2>Read POST Parameter in JSP</h2>

<form method="post" action="index.jsp">
    Enter number:
    <input type="text" name="number">
    <input type="submit" value="Submit">
</form>

<%
    String num = request.getParameter("number");
    if (num != null) {
        int x = Integer.parseInt(num);
%>
    <p>Square of <%= x %> is <%= x * x %></p>
<%
    }
%>

</body>
</html>

Sample 3 with database connection

<%@ page import="java.sql.*" %>

    <% 
String url="jdbc:mysql://localhost:3306/<your_database_name>?useSSL=false&serverTimezone=UTC" ; 
String user="your_db_username" ; 
String password="your_db_password"; 
Connection con=null; 
Statement stmt=null; 
ResultSet rs=null; 
try {
        Class.forName("com.mysql.cj.jdbc.Driver"); 
        con=DriverManager.getConnection(url, user, password);
        stmt=con.createStatement(); 
        rs=stmt.executeQuery("SELECT name FROM users"); %>

        <h3>Users from DB:</h3>
        <ul>
            <% while (rs.next()) { %>
                <li>
                    <%= rs.getString("name") %>
                </li>
            <% } %>
        </ul>

<% } catch (Exception e) { %>
            <p style="color:red;">
                <%= e.getMessage() %>
            </p>
<% } finally { 
        if (rs !=null) 
        rs.close(); 
        if (stmt !=null) stmt.close(); 
        if (con !=null) con.close(); 
} %>

6️⃣ Maven Build Commands (What & Why)

Clean old build files

mvn clean

or

mvn clean install

Build WAR file

mvn package

mvn install

These commands generate a .war file inside the target directory.

7️⃣ Run JSP Application (No WAR Copy Required)

Start embedded Tomcat using:

mvn tomcat7:run

Tomcat will start on port 8081.

8️⃣ Access Application in Browser

Open browser and visit:

http://localhost:8081/jsp-demo/

For query parameter example:

http://localhost:8081/jsp-demo/index.jsp?number=5

Output:

Square of 5 is 25

9️⃣ Important Notes for Students

JSP cannot run directly in browser
JSP needs a Servlet Container (Tomcat)
WAR files are deployed, not executed
Embedded Tomcat is ideal for:
- learning
- development
- quick demos

10️⃣ Common Mistakes to Avoid

Mistake	Reason
Using Live Server	JSP not supported
Using `<%! %>` for request	Causes compilation error
Running `.war` file	WAR is not executable
Port 8080 conflict	Use 8081 or higher

11️⃣ Summary

Maven manages project structure & dependencies
Tomcat Maven Plugin runs JSP without manual deployment
VS Code + Maven is lightweight and industry-relevant
Best approach for learning JSP fundamentals