Next, we will see a small tutorial to learn how to create a Spring Boot + Vue.js project from scratch.
Initial Setup
Before we start, we need to make sure we have the following tools installed:
- Maven https://maven.apache.org/download.cgi →
- Node/NPM → https://nodejs.org/en/download/
Once the above are installed, we install the Vue client with the following instruction:
npm install -g @vue/cliProject structure
To be able to configure the project correctly, we must get the following structure:
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
Creation of the project
To create the project, from the IDE (the tutorial will use Intellij IDEA), select new project > maven and click on Next:
Write the name of the project and the folder where it will be stored and click on Finish:
This will generate the new project, having created the default src folder, but being the "father" of the other modules, we delete that folder: Spring-vue > src > right click > Delete
We open the pom of our project, since here in the father is where we will define the dependency with Spring Boot, as well as the project's packaging and the version of Java to use:
<?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>
Creating the BackendModule
To create the backend module, which will contain the Spring Boot code, right-click on our base project and click on New > Module:
Leave Maven selected and click on Next:
We write the name of our module, i.e. backend, and click on Finish:
This will generate a sub-project within our base project:
In the pom.xml of our new module is where all the Spring Boot starters we need to use should be defined, as well as all the necessary project dependencies.
For now, we've added the Spring Boot Web starter and several plugins that will make it easier for us to compile and clean up files:
<?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>
The plugins that have been included take care of:
- spring-boot-maven-plugin: used to rename the executable war/jack to the name indicated in the finalName.
- maven-clean-plugin: during compilation, clean the resources/public folder where the Vue.js code compiled from the front end will be stored.
- maven-resources-plugin: copies the compiled code from Vue.js of the frontend module to the resources/public folder of the backend module. This is necessary so that the final executable is a single file.
Now, we need to create the initiator of the Spring Boot application. To do this, we create an Application class on the fs.spring.vue package with the following content:
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);
}
}
And we finally executed her. If all goes well, the following traces should appear:
Creating the FrontendModule
This module will be the one that contains all the code Vue.js. To do this, we create the new maven module as in the previous step but with the name frontend:
This will create the module, only in this case, since it will contain Vue.js code, we delete the src folder: Spring-vue > frontend > src > right click > Delete
From the terminal that offers us the IDE itself (or a cmd if we are using another IDE), we access by terminal to the frontend folder and execute the following:
NOTE: The -no-git option is to prevent it from generating the git section since this should be in the parent project and not here.
When he asks us if we want to generate the project in the current folder, we say yes:
We select the default preset that includes everything, or we select the features manually:
The installation of the project will begin:
Once it's done, we'll see that multiple folders and files have been generated:
Where:
- The node_modules folder will contain the JavaScript dependencies needed by the Vue project.
- The public folder contains the index.html, which will be responsible for loading the Vue application, as well as other static files.
- The src folder contains all the Vue code.
- .editorconfig is the configuration file for the editor of Vue, js, etc. files.
- babel.config.js is the configuration file for babel.
- package.json is the file where the frontend dependencies are defined.
Now, we need to create a file called see configuration js which will contain the configuration of the vue development server.
In this file we configure:
- The port on which the Vue server is started.
- A proxy to avoid problems with CORS policies when calling the backend.
- And we defined the construction folders to make it compatible with 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'
}
Now, we edit the pom.xml of the frontend module to add a dependency that will serve to automate the compilation of the vue code (more information here: 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>
Finally, we tried running the front end module. From the terminal console, we run. If all goes well, we can see in the traces the boot:
And if we access one of those URLs we'll see our Vue project:
Compile the project
First of all, we access the pom.xml of the root project where we must verify that both modules are defined and have the correct order of compilation, that is, first frontend and then backend:
This is very important since, as we have defined the pom.xml of each module, first you have to compile the code Vue.js so that later, when you compile the backend, you can copy the compiled files from Vue to that module.
To compile the project, from the project's root folder we run "clean":
And, when I'm done, "package."
Finally, we can execute the war that has been generated in the target folder of the backend and it will contain the compiled code of both projects. To do this, we execute:
java -jar backend\target\spring-vue.warWe can see that it starts properly:
And if we access the URL http://localhost:8080 (i.e. the Spring Boot port and not the front end), we'll see our application again:
