How To Setup Spring Boot With Vue.js Frontend

In this article, you will learn how to setup a Maven multi-module project which consists out of a Spring Boot backend and a Vue.js frontend. The application itself will not be created, only the setup of the project is covered in this article. Enjoy!

Introduction

Many applications consist out of a backend and a frontend. But how will you organize and structure your project and how will you deploy the backend and frontend? Many options to choose from and there is no one size fits all. You must make decisions that suit your use case. In either case, it is important to keep the backend code and the frontend code separated from each other. This way, it is easier to change things later on. So, which decisions do you need to make?

• Do you want to package and deploy the backend and frontend simultaneously?
• Do you need to be able to scale up and down your application from the beginning?
• Do you want the frontend to be updated separately from the backend?
• Among many more. 

There is no right or wrong, you need to choose wisely based on the type of application and non-functional requirements. In this article, you will learn how to setup the project structure for an application which consists out of a Spring Boot backend part and a Quasar frontend part (Quasar is a Vue.js based framework). Both are packaged in the Spring Boot jar-file and deployed as a single unit. This will enable you to get started quite fast and it will leave the options open to separate both when needed. In the latter case, you will need to deploy the frontend part in a web server like NGINX. As the build tool, Maven will be used.

Sources used in this blog are available at GitHub.

Prerequisites

• Basic Spring Boot knowledge.
• Basic Quasar (Vue.js) knowledge or other frontend framework.
• Basis Linux knowledge.
• Basic Maven knowledge.

Besides that, you need to have Java 17, Node.js, and npm installed. Instructions for installing Node.js can be found in the official documentation. Choose the instructions for your operating system and ensure that you use a LTS version.

Below are the instructions when you are using Ubuntu 22.04:

$ curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash - &&\
$ sudo apt-get install -y nodejs

After this, verify the installation:

$ node -v
v18.12.1

Update npm:

$ sudo npm install -g [email protected]

Install the Quasar Framework, which will allow you to create responsive web applications. It is like a layer on top of Vue.js:

$ sudo npm install -g @quasar/cli

Project Overview

As written before, you will create a Maven multi-module project, which consists out of a Spring Boot backend application and a Quasar frontend. The project structure is the following:

myspringbootvueplanet
├── backend
│   └── pom.xml 
├── frontend
│   └── pom.xml 
└── pom.xml

The main project is called myspringbootvueplanet and has its own pom. It consists out of a module backend and a module frontend, each with their own pom files. In the next sections, this structure will be created and the contents of the directories and pom files will be created.

Spring Boot Backend

First, you will start with the Spring Boot backend:

• Navigate to Spring Initializr.
• Choose Java 17
• Choose Maven
• Add the Spring Web dependency. 
• Download the project and unzip it.

Create a directory backend in your main project directory and move the src directory to this new backend directory. Next, copy the pom file to the backend directory:

$ mkdir backend
$ mv src/ backend/src
$ cp pom.xml backend/pom.xml

The pom in the main project needs to be adapted so that it knows about the backend module. Change the contents as follows. 

Note: the packaging is changed to pom:

<?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 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
     
    <groupId>com.mydeveloperplanet.myspringbootvueplanet</groupId>
    <artifactId>myspringbootvueplanet</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>MySpringBootVuePlanet</name>
    <description>Demo project for Spring Boot with Vue frontend</description>
    <packaging>pom</packaging>
 
    <modules>
        <module>backend</module>
    </modules>
 
</project>

The backend pom needs to be changed also. Change the artifactId into backend.

Change the following line:

<artifactId>myspringbootvueplanet</artifactId>

Into:

<artifactId>backend</artifactId>

And remove the name tag. The upper part of the pom is the following:

<parent>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-parent</artifactId>
  <version>3.0.1</version>
  <relativePath/> <!-- lookup parent from repository -->
</parent>
<groupId>com.mydeveloperplanet.myspringbootvueplanet</groupId>
<artifactId>backend</artifactId>
<version>0.0.1-SNAPSHOT</version>

Verify whether the Maven project builds by executing the following command from the root of the project:

$ mvn clean verify

Quasar Frontend

To create a basic Vue.js frontend application with the Quasar framework, you execute the following command from the root of the repository and you answer the questions according to your needs:

$ npm init quasar
What would you like to build? › App with Quasar CLI, let's go!
Project folder: … frontend
Pick Quasar version: › Quasar v2 (Vue 3 | latest and greatest)
Pick script type: › Typescript
Pick Quasar App CLI variant: › Quasar App CLI with Vite
Package name: … frontend
Project product name: (must start with letter if building mobile apps) … myspringbootvueplanet
Project description: … A demo project for Spring Boot with Vue/Quasar
Author: … mydeveloperplanet <[email protected]>
Pick a Vue component style: › Composition API
Pick your CSS preprocessor: › Sass with SCSS syntax
Check the features needed for your project: › ESLint
Pick an ESLint preset: › Prettier
Install project dependencies? (recommended) › Yes, use npm

At this moment, a frontend directory has been created in the root of the repository containing the frontend application. Add the following pom to the frontend directory. In this pom, you make use of the frontend-maven-plugin, which allows you to build the frontend application by means of Maven:

<?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 https://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>com.mydeveloperplanet.myspringbootvueplanet</groupId>
  <artifactId>frontend</artifactId>
  <version>0.0.1-SNAPSHOT</version>
 
  <build>
    <plugins>
      <plugin>
        <groupId>com.github.eirslett</groupId>
        <artifactId>frontend-maven-plugin</artifactId>
        <version>1.12.1</version>
        <executions>
          <execution>
            <id>install node and npm</id>
            <goals>
              <goal>install-node-and-npm</goal>
            </goals>
            <configuration>
              <nodeVersion>v18.12.1</nodeVersion>
            </configuration>
          </execution>
          <execution>
            <id>npm install</id>
            <goals>
              <goal>npm</goal>
            </goals>
            <configuration>
              <arguments>install</arguments>
            </configuration>
          </execution>
          <execution>
            <id>npm install @quasar/cli -g</id>
            <goals>
              <goal>npm</goal>
            </goals>
            <configuration>
              <arguments>install @quasar/cli -g</arguments>
            </configuration>
          </execution>
          <execution>
            <id>npx quasar build</id>
            <goals>
              <goal>npx</goal>
            </goals>
            <configuration>
              <arguments>quasar build</arguments>
            </configuration>
          </execution>
        </executions>
      </plugin>
    </plugins>
  </build>
 
</project>

Now, add the frontend module to the pom in the root of the repository:

<modules>
  <module>backend</module>
  <module>frontend</module>
</modules>

Verify whether the project builds and execute the following command from the root of the repository:

$ mvn clean verify

Combine Backend and Frontend

Now it is time to package the frontend distribution files with the backend application. To do so, you add the following to the build-plugins section of the backend pom:

<build>
  <plugins>
    <plugin>
      <artifactId>maven-resources-plugin</artifactId>
      <executions>
        <execution>
          <id>copy frontend content</id>
          <phase>generate-resources</phase>
          <goals>
            <goal>copy-resources</goal>
          </goals>
          <configuration>
            <outputDirectory>target/classes/static</outputDirectory>
            <overwrite>true</overwrite>
            <resources>
              <resource>
                <directory>../frontend/dist/spa</directory>
              </resource>
            </resources>
          </configuration>
        </execution>
      </executions>
    </plugin>
  </plugins>
</build>

The frontend build outputs the distributable files into directory <root repo>/frontend/dist/spa. The maven-resouces-plugin will copy those resources and will add them to the <root repo>/target/classes/static directory. The Spring Boot application will serve those pages onto http://localhost:8080/. By default, Spring will serve static content from a number of directories. 

Beware: after this change, you will not be able to run the module builds in parallel anymore because the backend build is dependent of the frontend build. When you are using the Maven daemon to run your builds, you have to add the flag -T1 in order to force it to build sequentially.

Build the application again:

$ mvn clean verify

Start the application from the root of the repository by executing the following command:

$ java -jar backend/target/backend-0.0.1-SNAPSHOT.jar

Navigate in the browser to http://localhost:8080/ and the Quasar Framework start page is shown:

Conclusion

In this article, you learned how to create the project structure for a basic Spring Boot backend with a Quasar frontend application. Deployment is easy because all distributable files are part of the Spring Boot jar-file and can be started by means of a single command.