Kotlin + Spring + Vue: Start

After installing the necessary tools,

we are ready to create our application. The project will consist of two modules - backend and frontend, so let's use the following folder structure:

application root folder

backend
frontend

But don't hurry to create subfolders! We will do it in more convenient ways.

Backend Initialization

There are a few ways to initialize Spring Boot Project:

Make it manually
Using dialog window in Spring Tool Suite
Using embedded Spring Initilizr in IntelliJ IDEA (available in Ultimate Edition only)
Classic way - using Spring Initializr

Use the following project configuration:

Project: Maven Project
Language: Kotlin
Spring Boot: 2.1.6
Project Metadata: Java 8, JAR packaging (the rest - at your discretion)
Dependencies:

Spring Web Starter
Spring Boot Actuator
Spring Boot DevTools

Then extract the archive to project root directory. Go to the backend project directory and execute:

$ mvn install

If everything is OK, you'll see "BUILD SUCCESS".

So, now we can run the application:

$ mvn spring-boot:run

We have no web-pages and no web-methods yet, but we have Actuator in our application. To check the application works, you can go to http://localhost:8080/actuator There you will see something like that:

{"_links":{"self":{"href":"http://localhost:8080/actuator","templated":false},"health-component":{"href":"http://localhost:8080/actuator/health/{component}","templated":true},"health-component-instance":{"href":"http://localhost:8080/actuator/health/{component}/{instance}","templated":true},"health":{"href":"http://localhost:8080/actuator/health","templated":false},"info":{"href":"http://localhost:8080/actuator/info","templated":false}}}

Press Ctrl+C to terminate the application.

Frontend Initialization

Go to the project root directory and execute:

$ vue create frontend

Select "default" - that's enough for our project:

Remove .git and .gitignore files from frontend directory. Now go to this directory and run the frontend app:

$ npm run serve

You will see the default Vue.js page at http://localhost:8080/

Backend and Frontend Integration

Crate a pom.xml file in the root project directory:

Packaging: pom
Parent: spring-boot-starter-parent
Modules:

frontend
backend

IMPORTANT: Don't change the modules order. We build the frontend first and then copy the static files to Spring Boot application.

Backend

Make some changes in backend module pom.xml:

Change parent (I named my project demo)
Remove version
Packaging - JAR
Specify start class: properties -> start class -> ...
Specify main class: build -> plugins -> spring-boot-maven-plugin -> configuration -> mainClass -> ...
Add maven-resource-plugin to copy Vue.js frontend content

Frontend

Add pom.xml to frontend directory:

artifactId: frontend
Parent: demo
Plugins: frontend-maven-plugin

Change the title of the web-page: frontend -> public -> index.html

Commonly, node projects will create a dist/ directory for builds which contains the minified source code of the web app - but we want it all in /target. Therefore we need to create the optional vue.config.js and configure the outputDir and assetsDir correctly:

module.exports = {
outputDir: 'target/dist',
assetsDir: 'static'
}

Backend + Frontend

If you're using IntelliJ IDEA and have problems with the displaying project structure, read this

Now go to the root project directory and build the project completely:

$ mvn install

Then run the application:

$ mvn --project backend spring-boot:run

If everything is fine, you will see the Vue.js default page at http://localhost:8080/

Ways to Improve

Use Gradle for project building (if it is considered to be an improvement)
Cover the code with unit test (no doubt, this is a best practice)

vaadim

Search This Blog