JSP in vscode


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>jsp-demo</artifactId>
  <version>1.0-SNAPSHOT</version>
  <packaging>war</packaging>

  <name>jsp-demo Maven Webapp</name>

  <dependencies>
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>3.8.1</version>
      <scope>test</scope>
    </dependency>
  </dependencies>

  <build>
    <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>

6️⃣ Maven Build Commands (What & Why)

Clean old build files

mvn clean

Build WAR file

mvn package

or

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

MistakeReason
Using Live ServerJSP not supported
Using <%! %> for requestCauses compilation error
Running .war fileWAR is not executable
Port 8080 conflictUse 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