A continuación, veremos un pequeño tutorial para aprender a crear un proyecto Spring Boot + Vue.js desde cero.
Setup inicial
Antes de comenzar, tenemos que asegurarnos de tener instaladas las siguientes herramientas:
- Maven → https://maven.apache.org/download.cgi
- Node/NPM → https://nodejs.org/en/download/
Una vez instalados los anteriores, instalamos el cliente de Vue con la siguiente instrucción:
npm install -g @vue/cliEstructura del proyecto
Para poder configurar el proyecto correctamente, deberemos llegar a tener la siguiente estructura:
spring-vue
├─┬ backend → módulo backend con el código Spring Boot
│ ├── src
│ └── pom.xml
├─┬ frontend → módulo frontend con el código Vue.js
│ ├── src
│ └── pom.xml
└── pom.xml → este es el pom de Maven que actúa de “padre” entre ambos módulos
Creación del proyecto
Para crear el proyecto, desde el IDE (en el tutorial se usará Intellij IDEA), seleccionamos nuevo proyecto > maven y pulsamos en Next:
Escribimos el nombre del proyecto y la carpeta donde estará almacenado y pulsamos en Finish:
Esto generará el nuevo proyecto, habiendo creado la carpeta src por defecto, pero al ser el “padre” de los otros módulos, eliminamos dicha carpeta: Spring-vue > src > click derecho ratón > Delete
Abrimos el pom de nuestro proyecto, ya que aquí en el padre es donde definiremos la dependencia con Spring Boot, así como la paquetización del proyecto y la versión de Java a utilizar:
<?xml version="1.0" encoding="UTF-8"?>
<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/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>fs.spring.vue</groupId>
<artifactId>spring-vue</artifactId>
<version>1.0.0</version>
<packaging>pom</packaging>
<name>spring-vue</name>
<description>Example project for Spring Boot + Vue.js</description>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.3.3.RELEASE</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<properties>
<java.version>1.8</java.version>
</properties>
</project>
Creación del módulo Backend
Para crear el módulo backend, que contendrá el código Spring Boot, pulsamos botón derecho del ratón sobre nuestro proyecto base y pulsamos en New > Module:
Dejamos seleccionado Maven y pulsamos en Next:
Escribimos el nombre de nuestro módulo, es decir, backend y pulsamos en Finish:
Esto generará un sub-proyecto dentro de nuestro proyecto base:
En el pom.xml de nuestro nuevo módulo es donde deberán estar definidos todos los starters de Spring Boot que necesitemos utilizar, así como todas las dependencias necesarias del proyecto.
Por ahora, añadimos el starter de Spring Boot Web y varios plugins que nos facilitarán las tareas de compilación y limpieza de archivos:
<?xml version="1.0" encoding="UTF-8"?>
<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/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<artifactId>backend</artifactId>
<packaging>war</packaging>
<name>backend</name>
<description>Backend module for our example project</description>
<parent>
<artifactId>spring-vue</artifactId>
<groupId>fs.spring.vue</groupId>
<version>1.0.0</version>
</parent>
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
<java.version>1.8</java.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-tomcat</artifactId>
<scope>provided</scope>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
<configuration>
<arguments>
<argument>--spring.profiles.active=prod</argument>
</arguments>
<finalName>spring-vue</finalName>
</configuration>
</plugin>
<plugin>
<artifactId>maven-clean-plugin</artifactId>
<configuration>
<filesets>
<fileset>
<directory>src/main/resources/public</directory>
<includes>
<include>**/*</include>
</includes>
</fileset>
</filesets>
</configuration>
</plugin>
<plugin>
<artifactId>maven-resources-plugin</artifactId>
<executions>
<execution>
<id>copy Vue.js frontend content</id>
<phase>generate-resources</phase>
<goals>
<goal>copy-resources</goal>
</goals>
<configuration>
<outputDirectory>src/main/resources/public</outputDirectory>
<overwrite>true</overwrite>
<resources>
<resource>
<directory>${project.parent.basedir}/frontend/target/dist</directory>
<includes>
<include>static/</include>
<include>index.html</include>
<include>favicon.ico</include>
<include>*.js</include>
</includes>
</resource>
</resources>
</configuration>
</execution>
</executions>
</plugin>
</plugins>
</build>
</project>
Los plugins que se han incluido se encargan de:
- spring-boot-maven-plugin: se utiliza para renombrar el war/jar ejecutable al nombre indicado en finalName.
- maven-clean-plugin: durante la compilación, limpia la carpeta resources/public que es donde se almacenará el código Vue.js compilado desde el frontal.
- maven-resources-plugin: se encarga de copiar el código compilado de Vue.js del módulo frontend a la carpeta resources/public del módulo backend. Esto es necesario para que el ejecutable final sea un único archivo.
Ahora, necesitamos crear el iniciador de la aplicación de Spring Boot. Para ello, creamos una clase Application sobre el paquete fs.spring.vue con el siguiente contenido:
package fs.spring.vue;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
public class Application {
/**
* Application's main method
*
* @param args the console arguments
*/
public static void main(String[] args) {
// Run the app!
SpringApplication.run(Application.class, args);
}
}
Y finalmente la ejecutamos. Si todo va bien deberían aparecer las siguientes trazas:
Creación del módulo Frontend
Este módulo será el que contenga todo el código Vue.js. Para ello, creamos el nuevo módulo de maven igual que en el paso anterior pero con el nombre frontend:
Esto, creará el módulo, sólo que en este caso, puesto que va a contener código Vue.js, eliminamos la carpeta src: Spring-vue > frontend > src > click derecho ratón > Delete
Desde la terminal que nos ofrece el propio IDE (o un cmd si estamos usando otro IDE), accedemos por terminal a la carpeta frontend y ejecutamos lo siguiente:
NOTA: La opción –no-git es para evitar que genere el apartado de git, puesto que esto deberá darse en el proyecto padre y no aquí.
Cuando nos pregunte si queremos generar el proyecto en la carpeta actual, decimos que sí:
Seleccionamos el preset default que incluye todo, o seleccionamos las características manualmente:
Comenzará la instalación del proyecto:
Una vez que termine, veremos que se han generado múltiples carpetas y archivos:
Donde:
- La carpeta node_modules contendrá las dependencias JavaScript que necesite el proyecto Vue.
- La carpeta public contiene el index.html, que será el que se encargue de cargar la aplicación Vue, así como otros archivos estáticos.
- La carpeta src contiene todo el código Vue.
- .editorconfig es el archivo de configuración para el editor de archivos Vue, js, etc.
- babel.config.js es el archivo de configuración de babel.
- package.json es el archivo donde se definen las dependencias del frontal.
Ahora, necesitamos crear un archivo llamado vue.config.js que contendrá la configuración del servidor de desarrollo de vue.
En este fichero configuramos:
- El puerto en el que se arranca el servidor de Vue.
- Un proxy para evitar problemas con las políticas CORS al llamar al backend.
- Y definimos las carpetas de construcción para hacerlo compatible con Maven.
// vue.config.js
module.exports = {
// proxy all webpack dev-server requests starting with /api
// to our Spring Boot backend (localhost:8098) using http-proxy-middleware
// see https://cli.vuejs.org/config/#devserver-proxy
devServer: {
port: 8081,
proxy: {
'/api': {
target: 'http://localhost:8080',
ws: true,
changeOrigin: true
}
}
},
// Change build paths to make them Maven compatible
// see https://cli.vuejs.org/config/
outputDir: 'target/dist',
assetsDir: 'static'
}
Ahora, editamos el pom.xml del módulo frontend para añadir una dependencia que nos servirá para automatizar la compilación del código vue (más información aquí: https://github.com/eirslett/frontend-maven-plugin):
<?xml version="1.0" encoding="UTF-8"?>
<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/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<artifactId>frontend</artifactId>
<name>frontend</name>
<description>Frontend module for our example project</description>
<parent>
<artifactId>spring-vue</artifactId>
<groupId>fs.spring.vue</groupId>
<version>1.0.0</version>
</parent>
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
</properties>
<build>
<plugins>
<plugin>
<groupId>com.github.eirslett</groupId>
<artifactId>frontend-maven-plugin</artifactId>
<version>1.6</version>
<executions>
<!-- Install our node and npm version to run npm/node scripts-->
<execution>
<id>install node and npm</id>
<goals>
<goal>install-node-and-npm</goal>
</goals>
<configuration>
<nodeVersion>v11.5.0</nodeVersion>
</configuration>
</execution>
<!-- Install all project dependencies -->
<execution>
<id>npm install</id>
<goals>
<goal>npm</goal>
</goals>
<!-- optional: default phase is "generate-resources" -->
<phase>generate-resources</phase>
<!-- Optional configuration which provides for running any npm command -->
<configuration>
<arguments>install</arguments>
</configuration>
</execution>
<!-- Build and minify static files -->
<execution>
<id>npm run build</id>
<goals>
<goal>npm</goal>
</goals>
<configuration>
<arguments>run build</arguments>
</configuration>
</execution>
</executions>
</plugin>
</plugins>
</build>
</project>
Finalmente, probamos a ejecutar el módulo front end. Desde la consola terminal, ejecutamos. Si todo va bien, podremos ver en las trazas el arranque:
Y si accedemos, a una de esas URL veremos nuestro proyecto Vue:
Compilar el proyecto
Antes de nada, accedemos al pom.xml del proyecto raíz donde debemos verificar que ambos módulos estén definidos y tengan el orden correcto de compilación, es decir, primer frontend y luego backend:
Esto es muy importante puesto que, tal y como hemos definido los pom.xml de sendos módulos, primero se ha de compilar el código Vue.js para que luego, cuando compile el backend, pueda copiar los archivos compilados de Vue a dicho módulo.
Para compilar el proyecto, desde la carpeta raíz del proyecto ejecutamos “clean”:
Y, cuando finalice, “package”:
Finalmente, podemos ejecutar el war que se ha generado en la carpeta target del backend y contendrá el código compilado de ambos proyectos. Para ello, ejecutamos:
java -jar backend\target\spring-vue.warPodemos ver que se arranca correctamente:
Y si accedemos a la URL http://localhost:8080 (es decir, el puerto de Spring Boot y no el del frontal), veremos nuevamente nuestra aplicación:
