Creación de Proyecto Maven Web en Eclipse

Vamos a echar un vistazo hoy a los pasos necesarios para realizar la creación de un proyecto Web mavenizado desde Eclipse. La idea es dejar el proyecto creado, desplegarlo en el servidor de aplicaciones Tomcat y comprobar cómo se puede visualizar contenido a través de una página HTML.

 

Hace algún tiempo vimos en el blog la forma de crear un proyecto Maven desde Eclipse. La idea es ir un paso más allá y desglosar los pasos necesarios para crear un proyecto Maven que disponga de contenido Web. Aunque pueda parecer lo mismo, la verdad es que incorporar páginas web a nuestro proyecto acarrea complejidad añadida.

Creación de Proyecto Maven Web en Eclipse

Los pasos a seguir para la creación de un Proyecto Web mavenizado (desde la herramienta Eclipse) serían los siguientes.

1º) Nos vamos al menú de Eclipse y pulsamos FILE - NEW - MAVEN PROJECT. Se nos despliega la siguiente ventana emergente.

2º) En dicha ventana emergente procedemos a marcar la opción "Create a simple project" y pulsamos el botón NEXT.

3º) En la siguiente ventana indicamos lo siguiente: en ARTIFACT ID detallamos el nombre del Proyecto y en GROUP ID especificamos el nombre del paquete base. Pulsamos FINISH.

Con los pasos anteriores ya tendríamos creado un Proyecto Maven Simple.

 

Configuración de Proyecto Maven Web

 

4º) Abrimos el fichero pom.xml del proyecto y especificamos que vamos a utilizar la versión 8 de Java. Para eso, incluimos las siguientes propiedades en el apartado <properties>. Nuestro proyecto es tan simple que no nos hará falta incluir ninguna librería en <dependencies>.

<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 https://maven.apache.org/xsd/maven-4.0.0.xsd">

  <modelVersion>4.0.0</modelVersion>

  <groupId>com.universo.mavenweb</groupId>

  <artifactId>MavenWebApp</artifactId>

  <version>0.0.1-SNAPSHOT</version>

 

  <properties>

    <java.version>1.8</java.version>

    <maven.compiler.source>1.8</maven.compiler.source>

    <maven.compiler.target>1.8</maven.compiler.target>

  </properties>

 

</project>

Guardamos los cambios y dejamos que Eclipse actualice la estructura del proyecto.

5º) A continuación, nos situamos sobre el proyecto y hacemos clic con el botón derecho del ratón. Seleccionamos PROPERTIES y se nos despliega la ventana emergente con las propiedades del Proyecto.

6º) Dentro de esta ventana, nos vamos al apartado denominado PROJECTS FACETS y pulsamos el link "Convert to faceted form..."

7º) Una vez terminada la conversión, marcamos los checks de Dynamic Web Module 4.0, de Java 1.8 y de JavaScript 1.0. Cuando marquemos la opción de Dynamic Web Module nos daremos cuenta de que en la parte baja de la ventana nos apacerá un link "Further configuration available..."

8º) Pulsamos en el link "Further configuration available..." y se nos despliega una nueva ventana denominada Web Module.

 

En CONTENT DIRECTORY indicaremos la ubicación en la que van a estar contenidos las componentes web de nuestro proyecto. En CONTEXT ROOT indicamos el nombre del contexto (del endpoint) en el que queremos que quede desplegada nuestra aplicación en el entorno web. Pulsamos el botón OK.

9º) Una vez finalizada la configuración de nuestro proyecto, ya podemos proceder a lanzar el botón de APPLY AND CLOSE.

10º) Una vez que Eclipse termine de convertir nuestro proyecto, nos daremos cuenta de que ahora su estructura ha cambiado.

Como podemos apreciar, se ha creado un nuevo directorio webapp bajo la carpeta src/main (tal y como le hemos indicado en la configuración previa).

src/main/webapp

Bajo esta nuevo directorio se han creado dos carpetas denominadas META-INF y WEB-INF.

src/main/webapp/META-INF

src/main/webapp/WEB-INF

Finalmente, bajo la carpeta WEB-INF se ha creado un subdirectorio denominado lib.

src/main/WEB-INF/lib

Como es de esperar, todo los componentes web que vayamos a incluir en nuestro proyecto deberán encontrarse en estas nuevas carpetas creadas. De lo contrario, nuestros ficheros HTML y JSP no serán encontrados por el servidor de aplicaciones que realice el despliegue de nuestra aplicación.

Contenido Web del Proyecto Maven

11º) A continuación, creamos un directorio denominado views bajo la carpeta webapp:

src/main/webapp/views

Y en ese nuevo directorio nos creamos un fichero html denominado:

index.html

El detalle de este fichero es lo de menos, pondremos lo básico para visualizar que nuestro contenido se ha desplegado en el entorno web.

 

<!DOCTYPE html>

<html>

<head>

<meta charset="ISO-8859-1">

<title>Aplicacion Maven Web</title>

</head>

 

<body>

      <h1>Nuestra aplicacion Maven Web esta funcionando...</h1>

</body>

</html>

12º) Si has seguido correctamente los pasos anteriores, la estructura completa de tu proyecto debería haber quedado algo así:

 

Despliegue del Proyecto en el servidor Tomcat

 

13º) Una vez realizadas las modificaciones de nuestro proyecto, procedemos a desplegarlo con nuestro servidor de aplicaciones Tomcat (o con el que más nos guste).

14º) Finalmente, nos vamos a un navegador cualquier y colocamos el endpoint de nuestro proyecto. Como previamente hemos configurado el contexto como "MavenWebApp" y como nos hemos creado el html bajo el subdirectorio "views" de la carpeta "src/main/webapp", el endpoint de arranque de nuestro proyecto sería el siguiente:

http://localhost:8080/MavenWebApp/views/index.html

O simplemente, ya que index.html es el destino por defecto, bastaría el endpoint:

http://localhost:8080/MavenWebApp/views/

Si todo ha salido bien, nuestro navegador debería ejecutar el contenido del fichero html que nos habíamos creado en los pasos anteriores.

 

Siguiendo todos los pasos mencionados a lo largo del presente post, no deberíamos tener problemas a la hora de dejar configurada una página html para nuestro proyecto Maven. Obviamente, esto es lo más básico que se puede hacer desde Eclipse, pero ya sabemos que para recorrer un camino determinado en algún momento nos tocará dar el primer paso...

Saludos.