DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones AWS Cloud
by AWS Developer Relations
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones
AWS Cloud
by AWS Developer Relations
  1. DZone
  2. Testing, Deployment, and Maintenance
  3. Deployment
  4. How To Setup Spring Boot With Vue.js Frontend

How To Setup Spring Boot With Vue.js Frontend

In this article, readers will learn how to create the project structure for a basic Spring Boot backend with a Quasar frontend application, along with code.

Gunter Rotsaert user avatar by
Gunter Rotsaert
CORE ·
Feb. 08, 23 · Tutorial
Like (1)
Save
Tweet
Share
4.90K Views

Join the DZone community and get the full member experience.

Join For Free

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:

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


After this, verify the installation:

Shell
 
$ node -v
v18.12.1


Update npm:

Shell
 
$ sudo npm install -g npm@9.2.0


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

Shell
 
$ 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:

Shell
 
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:

Shell
 
$ 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
 
<?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:

XML
 
<artifactId>myspringbootvueplanet</artifactId>


Into:

XML
 
<artifactId>backend</artifactId>


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

XML
 
<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:

Shell
 
$ 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:

Shell
 
$ 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 <mymail@address.com>
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
 
<?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:

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


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

Shell
 
$ 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:

XML
 
<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:

Shell
 
$ mvn clean verify


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

Shell
 
$ 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:

Quasar Framework

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.

Vue.js Spring Boot Apache Maven Node.js Non-functional requirement Software deployment Web server Framework JAR (file format) Java (programming language) Linux (operating system) Npm (software) Repository (version control)

Published at DZone with permission of Gunter Rotsaert, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • GitLab vs Jenkins: Which Is the Best CI/CD Tool?
  • Spring Cloud
  • Cucumber.js Tutorial With Examples For Selenium JavaScript
  • HTTP vs Messaging for Microservices Communications

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: