Skip to content

Build fintech application with Spring Boot, Vavr and Vue.js (Part 1)

Hi there! I want to present you my new series of tutorials – building full-stack apps using Spring Boot and Vue.js. I want to say here that it does not serve as 100% introduction, so you need to have something under your belt. Rather, my goal is to explain, how to build complete full-stack solutions from scratch. Follow me for updates to be notified about new parts!

Table of contents

What we will do

Ok, during this series of tutorials we will build a prototype of an accounting app using Spring Boot and Vue.js. The idea of the app is actually a [very] simplified project, that is real and runs in production. So, contrary to many artificial tutorials in the Web, here you will learn hands-on patterns and techniques to learn how to build full stack projects from 0. And for free, of course. Technically, our project consists of two apps (client and server).

We will implement following features:

  1. Companies management
  2. Invoices management
  3. Bills management
  4. JWT security (login, signup, token validation)
  5. Subscription using Stripe

In this first part we will set up both apps and pre-configure them for future development.

Pre-requesties

This tutorial does not pretend to be an introduction to Spring Boot or Vue.js, even though we will explore all necessary concepts here. I suggest you to have intermediate Java skills and at least basic understanding of Java web programming. You don’t need to be Spring Boot ninja, but you should understand ideas behind repositories, controllers, REST API and how to write basic unit tests. BTW, I recommend you to check my tutorial on JUnit 5 and on JMeter load testing, if you need to refresh your testing skills. You also need to have some experience with JS, although Vue.js experience is not required.

Please check you have following tools installed:

  1. Java 8+: Traditional requirement, but I recommend to have latest JDK
  2. Gradle
  3. MongoDB server
  4. Vue CLI

And, of course, you can grab code for this tutorial here:

// Vue.js app (client)
git clone https://github.com/mednikoviurii/cashtrack-app.git

// Spring app (backend)
git clone https://github.com/mednikoviurii/cashtrack-server.git

Set up a backend part

In this section we will create new Spring Boot application and prepare it for future development. In order to initialize new project, we use Spring Initialzr, however, you can use Spring Tools for Eclipse or VS Code too to generate a new Spring app.

Step 1. Create new Spring Boot project

Open Spring Initialzr in your browser. Here we can configure, how our future app should look like. First, we provide some basic options, including name, build tool, language and metadata:

Image 1. General project settings (Spring)

In this tutorial we will use following configuration:

  • Project: select Gradle as a build tool
  • Language: Java
  • Spring Boot: select the latest stable release, in my case it is 2.2.2
  • Project metadata: enter GroupID and ArtificatID of your choice, not required to be net.mednikov.cashtrack.

Next, move on and open Options section:

Image 2. Options (Spring)

Here alongside with package name, we can select:

  • Packaging: this parameter sets up how we will deploy our app – as JAR or WAR. Select Jar
  • Java: select language version here. Generally speaking, any JDK version after 1.8 will work in this project. I advise you to choose the latest one (here JDK 13), if you have it is installed. I selected here 8 for maximum compatibility

And the final step in this part is dependency management. On Dependencies section you can use autocomplete input to search for dependencies for this project:

Image 3. Dependencies (Spring)

We need to add latter Spring libraries here:

  • Spring Web: the core building block for our REST API
  • Spring Data MongoDB
  • Lombok: I know that Lombok is a very disputable thing, but, similarly, this tutorial does not concentrate on getters and setters, and it is a good idea to avoid boilerplate code if you can (Spring itself adds so much stuff, that reducing Lombok does not give you any fraction)

Press Generate button and download an archive. From here you need to import it to IDE of your choice and wait, while it runs initial configuration and resolves dependencies. But this is not the end of backend configuration. We also need some libraries, that Spring Initialzr does not have, so we need to import them manually.

Step 2. Import additional dependencies

In this tutorial we also will use Vavr. This library adds immutable collections and enhanced Stream API capabilities, which Java does not offer for us out of the box (also this work from Java 8). Inside dependencies block in build.gradle add following imports:

dependencies {
// .. Spring imports

implementation 'io.vavr:vavr:0.10.2'
}

Save build.gradle to import these dependencies. Next thing is to create app’s structure.

Step 3. Define an app’s structure

There are different approaches to structure Spring apps, but mainly are used two of them:

  • Packaging by layer
  • Packaging by feature

We will not discuss here which is better, as I believe that no pattern can be absolute. The more classical one for Spring apps is packaging by layer, which we will use in this tutorial. Create following packages in src/main/java/{app name}:

Image 4. Project folders (Spring)

Here we will create several packages (based on layer):

  • controllers
  • entities
  • repositories
  • utils
  • services
  • clients

Step 4. Set server port

By default, Spring’s embedded server listens port number 8080. We need to customize it (in the latter parts we will also use variable value to inject port during deployment, but for now we stick with hardcoded one) and set 4567 – default Sinatra’s value. Open resources/application.properties and add this key-value pair:

server.port=4567

Step 5. Set Mongo database

We need to configure database credentials to be able to connect to it from Spring Data Mongo. To start we will use hardcoded values, later we will configure variable values for deployment. For Mongo database running locally add to resources/application.properties following lines:

spring.data.mongodb.database=cashtrack
spring.data.mongodb.port=27017
spring.data.mongodb.host=localhost

Step 6. Test backend

Our app does pretty nothing for now, but we can still verify that we did everything correctly. In terminal run this command to start Spring Boot app:

gradle bootRun

If you compled all previous steps correctly, you will get similar output:

Image 5. Running app (Spring)

This means, that we now have Spring part up and running and can proceed with Vue.js part.

Set up a client

In this section we will create a new Vue.js application that gonna serve as client for our REST API. NB I use Vue UI to create and manage Vue app in this tutorial, but you can use CLI tools as you like it.

Step 7. Create a new Vue project

To start a Vue GUI manager, run following command in your terminal:

vue ui

This will start Vue GUI app on localhost:8000. With this tool you can create new projects, as well manage them. Click on Create button to start a wizard. On the first screen you can enter a directory for project and select package manager:

Image 6. Details (Vue)
  • Project manager = I select npm here, you can choose yarn if you like it more, but remember your choice – it is needed during deployment!

Click Next to go to the Presets tab. Here select Manual. This will bring you to preset configuration screen:

Image 7. Features (Vue)

On this screen enter following configuration:

  • Router = switch this param on
  • Linter/Formatter = I disabled this parameter

Finally Vue asks us about history mode:

Image 8. History mode (Vue)

It is up to you enable it or not. I disabled history mode – basically, what it does is removing of hash character, so you will get something like your-url.com/users instead of your-url.com/#/users. NB that usage of history mode requires you to do some additional config on server to run Vue.js app. So in this tutorial we will keep things simple. Finally, press Create Project and let Vue to generate it.

Step 8. Install dependencies

We will use here three main dependencies: Axios (for dealing with HTTP), Buefy (set of Bulma-based components for Vue) and Dinero.js (will utilize it for money calculations, when we will go to invoicing). You can install them with CLI or using Dependencies tab in Vue UI:

Image 9. Dependencies (Vue)

We also need to import Buefy to be able to use it. Open src/main.js and import Buefy:

import Buefy from 'buefy'
import 'buefy/dist/buefy.css'

Then add following line:

Vue.use(Buefy)

At the end, your main.js file should be similar to this:

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import Buefy from 'buefy'
import 'buefy/dist/buefy.css'

Vue.config.productionTip = false
Vue.use(Buefy)

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

Step 9. Create a shared Axios client

It is considered as a good design practice to have a base Axios instance that shares common configuration, like base URL. Let create a new file src/http/AxiosClient.js:

import axios from 'axios';

export const AxiosClient = axios.create({
    baseURL: `localhost:4567/v1/`
});

Here we will provide baseUrl, that we can change from one place when we will deploy app and need to change URL for particular server’s location.

Step 10. Test client

Let run Vue app to check that it works. On Tasks tab, run serve task. After build ends, access localhost:8080 (default location) in your browser. Should be like this:

image 10. Running application (Vue)

Congrats! You completed first part of this tutorial and now have both Spring Boot and Vue.js apps configured. In the next part we will write first API to deal with companies (vendors and customers).

What’s next?

In succeding part we will build API part for managing companies (e.g. vendors and customers) using TDD approach. We will see how to create all required elements (repository, service, controller) to serve REST API in Spring Boot. Meanwhile, follow me in socials. If you have questions, don’t forget to drop them in comments below or write me an email.

Copy link
Powered by Social Snap