A live deployment is available on Heroku: https://spring-boot-vuejs.herokuapp.com
There's also a blog post about this project available here: https://blog.codecentric.de/en/2018/04/spring-boot-vuejs/
Well, I’m not a Frontend developer. I’m more like playing around with Spring Boot, Web- & Microservices & Docker, automating things with Ansible and Docker, Scaling things with Spring Cloud, Docker Compose, and Traefik... And the only GUIs I’m building are the "new JS framework in town"-app every two years... :) So the last one was Angular 1 - and it felt, as it was a good choice! I loved the coding experience and after a day of training, I felt able to write awesome Frontends...
But now we’re 2 years later and I heard from afar, that there was a complete rewrite of Angular (2), a new kid in town from Facebook (React) and lots of ES201x stuff and dependency managers like bower and Co. So I’m now in the new 2-year-cycle of trying to cope up again - and so glad I found this article: https://medium.com/reverdev/why-we-moved-from-angular-2-to-vue-js-and-why-we-didnt-choose-react-ef807d9f4163
Key points are:
- Angular 2 isn’t the way to go if you know version 1 (complete re-write, only with Typescript, loss of many of 1’s advantages, Angular 4 is coming)
- React (facebookish problems (licence), need to choose btw. Redux & MObX, harder learning curve, slower coding speed)
And the introduction phrase sounds really great:
Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only and is very easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.
So I think, it could be a good idea to invest a day or so into Vue.js. Let’s have a look here!
brew install node
npm install --global vue-cli
sudo apt update
sudo apt install node
npm install --global vue-cli
choco install npm
npm install --global vue-cli
(Oder per Installer von der Website: https://nodejs.org/en/download/)
spring-boot-vuejs
├─┬ backend → backend module with Spring Boot code
│ ├── src
│ └── pom.xml
├─┬ frontend → frontend module with Vue.js code
│ ├── src
│ └── pom.xml
└── pom.xml → Maven parent pom managing both modules
Go to https://start.spring.io/ and initialize a Spring Boot app with Web and Actuator. Place the zip’s contents in the backend folder.
Customize pom to copy content from Frontend for serving it later with the embedded Tomcat:
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</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>
</includes>
</resource>
</resources>
</configuration>
</execution>
</executions>
</plugin>
</plugins>
</build>vue init webpack frontend
This will initialize a project skeleton for Vue.js in /frontend directory - it, therefore, asks some questions in the cli:
If you want to learn more about installing Vue.js, head over to the docs: https://vuejs.org/v2/guide/installation.html
If you’re a backend dev like me, this Maven plugin here https://github.com/eirslett/frontend-maven-plugin is a great help for you - because, if you know Maven, that’s everything you need! Just add this plugin to the frontend’s pom.xml:
<build>
<plugins>
<plugin>
<groupId>com.github.eirslett</groupId>
<artifactId>frontend-maven-plugin</artifactId>
<version>${frontend-maven-plugin.version}</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>v9.11.1</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>Commonly, node projects will create for final build a dist/ directory which contains the minified source code of the web app - but we want it all in /target. Therefore go to frontend/config/index.js and replace the following lines:
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
with
index: path.resolve(__dirname, '../target/dist/index.html'),
assetsRoot: path.resolve(__dirname, '../target/dist'),
mvn clean install
Run our complete Spring Boot App:
mvn --projects backend spring-boot:run
Now go to http://localhost:8088/ and have a look at your first Vue.js Spring Boot App.
The webpack-dev-server, which will update and build every change through all the parts of the JavaScript build-chain, is pre-configured in Vue.js out-of-the-box! So the only thing needed to get fast feedback development-cycle is to cd into frontend and run:
npm run dev
That’s it!
Install vue-devtools Browser extension https://github.com/vuejs/vue-devtools and get better feedback, e.g. in Chrome:
There's a blog post: https://blog.jetbrains.com/webstorm/2018/01/working-with-vue-js-in-webstorm/
Especially the New... Vue Component looks quite cool :)
Prior to Vue 2.0, there was a build in solution (vue-resource). But from 2.0 on, 3rd party libraries are necessary. One of them is Axios - also see blog post https://alligator.io/vuejs/rest-api-axios/
npm install axios --save
Calling a REST service with Axios is simple. Go into the script area of your component, e.g. Hello.vue and add:
import axios from 'axios'
data () {
return {
response: [],
errors: []
}
},
callRestService () {
axios.get(`api/hello`)
.then(response => {
// JSON responses are automatically parsed.
this.response = response.data
})
.catch(e => {
this.errors.push(e)
})
}
}In your template area you can now request a service call via calling callRestService() method and access response data:
<button class=”Search__button” @click="callRestService()">CALL Spring Boot REST backend service</button>
<h3>{{ response }}</h3>Single-Origin Policy (SOP) could be a problem if we want to develop our app. Because the webpack-dev-server runs on http://localhost:8080 and our Spring Boot REST backend on http://localhost:8088.
We need to use Cross-Origin Resource Sharing Protocol (CORS) to handle that (read more background info about CORS here https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS)
Create a central Axios configuration file called http-commons.js:
import axios from 'axios'
export const AXIOS = axios.create({
baseURL: `http://localhost:8088`,
headers: {
'Access-Control-Allow-Origin': 'http://localhost:8080'
}
})Here we allow requests to the base URL of our Spring Boot App on port 8088 to be accessible from 8080.
Now we could use this configuration inside our Components, e.g. in Hello.vue:
import {AXIOS} from './http-common'
export default {
name: 'hello',
data () {
return {
posts: [],
errors: []
}
},
methods: {
// Fetches posts when the component is created.
callRestService () {
AXIOS.get(`hello`)
.then(response => {
// JSON responses are automatically parsed.
this.posts = response.data
})
.catch(e => {
this.errors.push(e)
})
}
}Additionally, we need to configure our Spring Boot backend to answer with the appropriate CORS HTTP Headers in its responses (there's a good tutorial here: https://spring.io/guides/gs/rest-service-cors/). Therefore we add the annotation @CrossOrigin to our BackendController:
@CrossOrigin(origins = "http://localhost:8080")
@RequestMapping(path = "/hello")
public @ResponseBody String sayHello() {
LOG.info("GET called on /hello resource");
return HELLO_TEXT;
}Now our Backend will respond CORS-enabled and will accept requests from 8080. But as this only enables CORS on one method, we have to repeatedly add this annotation to all of our REST endpoints, which isn’t a nice style. We should use a global solution to allow access with CORS enabled to all of our REST resources. This could be done in the SpringBootVuejsApplication.class:
// Enable CORS globally
@Bean
public WebMvcConfigurer corsConfigurer() {
return new WebMvcConfigurerAdapter() {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/api/*").allowedOrigins("http://localhost:8080");
}
};
}Now all calls to resources behind api/ will return the correct CORS headers.
Thanks to my colleague Daniel who pointed me to the nice proxying feature of Webpack dev-server, we don't need to configure all the complex CORS stuff anymore!
According to Vue.js Webpack Template the only thing we need to configure is a Proxy for our webpack dev-server requests. This could be done easily in the frontend/config/index.js inside dev.proxyTable:
dev: {
...
proxyTable: {
// proxy all webpack dev-server requests starting with /api to our Spring Boot backend (localhost:8088)
'/api': {
target: 'http://localhost:8088',
changeOrigin: true
}
},With this configuration in place, the webpack dev-server uses the http-proxy-middleware, which is a really handy component, to proxy all frontend-requests from http://localhost:8080 --> http://localhost:8088 - incl. Changing the Origin accordingly.
This is used in the frontend/build/dev-server.js to configure the proxyMiddleware (you don't need to change something here!):
// proxy api requests
Object.keys(proxyTable).forEach(function (context) {
var options = proxyTable[context]
if (typeof options === 'string') {
options = { target: options }
}
app.use(proxyMiddleware(options.filter || context, options))
})There’s a nice integration of Bootstrap in Vue.js: https://bootstrap-vue.js.org/
npm install bootstrap-vue
Now you can use all the pretty Bootstrap stuff with ease like:
<b-btn @click="callRestService()">CALL Spring Boot REST backend service</b-btn>
instead of
<button type="button" class=”btn” @click="callRestService()">CALL Spring Boot REST backend service</button>
The docs contain all the possible components: https://bootstrap-vue.js.org/docs/components/alert/
See some elements, when you go to http://localhost:8080/#/bootstrap/ - this should look like this:
A good discussion about various UI component frameworks: http://vuetips.com/bootstrap
As you may already read, the app is automatically deployed to Heroku on https://spring-boot-vuejs.herokuapp.com/.
The project makes use of the nice Heroku Pipelines feature, where we do get a full Continuous Delivery pipeline with nearly no effort:
And with the help of super cool Automatic deploys, we have our TravisCI build our app after every push to master - and with the checkbox set to Wait for CI to pass before deploy - the app gets also automatically deployed to Heroku - but only, if the TravisCI (and Coveralls...) build succeeded:
You only have to connect your Heroku app to GitHub, activate Automatic deploys and set the named checkbox. That's everything!
Frontend needs to know the Port of our Spring Boot backend API, which is automatically set by Heroku every time, we (re-)start our App.
You can try out your Heroku app locally! Just create a .env-File with all your Environment variables and run
heroku local!
To access the Heroku set port, we need to use relative paths inside our Vue.js application instead of hard-coded hosts and ports!
All we need to do is to configure Axios in such a way inside our frontend/src/components/http-common.js:
export const AXIOS = axios.create({
baseURL: `/api`
})
First, add Heroku Postgres database for your Heroku app.
Then follow these instructions on Stackoverflow to configure all needed Environment variables in Heroku: https://stackoverflow.com/a/49978310/4964553
Mind the addition to the backend's pom.xml described here: https://stackoverflow.com/a/49970142/4964553
Now you're able to use Spring Data's magic - all you need is an Interface like UserRepository.java:
package de.jonashackt.springbootvuejs.repository;
import de.jonashackt.springbootvuejs.domain.User;
import org.springframework.data.repository.CrudRepository;
import org.springframework.data.repository.query.Param;
import java.util.List;
public interface UserRepository extends CrudRepository<User, Long> {
List<User> findByLastName(@Param("lastname") String lastname);
List<User> findByFirstName(@Param("firstname") String firstname);
}Now write your Testcases accordingly like UserRepositoryTest.java:
package de.jonashackt.springbootvuejs.repository;
import de.jonashackt.springbootvuejs.domain.User;
import org.junit.Before;
import org.junit.Test;
import org.junit.runner.RunWith;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.autoconfigure.orm.jpa.DataJpaTest;
import org.springframework.boot.test.autoconfigure.orm.jpa.TestEntityManager;
import org.springframework.test.context.junit4.SpringRunner;
import java.util.List;
import static org.hamcrest.Matchers.contains;
import static org.junit.Assert.*;
@RunWith(SpringRunner.class)
@DataJpaTest
public class UserRepositoryTest {
@Autowired
private TestEntityManager entityManager;
@Autowired
private UserRepository users;
private User norbertSiegmund = new User("Norbert", "Siegmund");
private User jonasHecht = new User("Jonas", "Hecht");
@Before
public void fillSomeDataIntoOurDb() {
// Add new Users to Database
entityManager.persist(norbertSiegmund);
entityManager.persist(jonasHecht);
}
@Test
public void testFindByLastName() throws Exception {
// Search for specific User in Database according to lastname
List<User> usersWithLastNameSiegmund = users.findByLastName("Siegmund");
assertThat(usersWithLastNameSiegmund, contains(norbertSiegmund));
}
@Test
public void testFindByFirstName() throws Exception {
// Search for specific User in Database according to firstname
List<User> usersWithFirstNameJonas = users.findByFirstName("Jonas");
assertThat(usersWithFirstNameJonas, contains(jonasHecht));
}
}Then include this functionality in your REST-API - see BackendController.java:
@RequestMapping(path = "/user", method = RequestMethod.POST)
@ResponseStatus(HttpStatus.CREATED)
public @ResponseBody long addNewUser (@RequestParam String firstName, @RequestParam String lastName) {
User user = new User(firstName, lastName);
userRepository.save(user);
LOG.info(user.toString() + " successfully saved into DB");
return user.getId();
}and use it from the Vue.js frontend, see User.vue:
<template>
<div class="user">
<h1>Create User</h1>
<h3>Just some database interaction...</h3>
<input type="text" v-model="user.firstName" placeholder="first name">
<input type="text" v-model="user.lastName" placeholder="last name">
<button @click="createUser()">Create User</button>
<div v-if="showResponse"><h6>User created with Id: {{ response }}</h6></div>
<button v-if="showResponse" @click="retrieveUser()">Retrieve user {{user.id}} data from database</button>
<h4 v-if="showRetrievedUser">Retrieved User {{retrievedUser.firstName}} {{retrievedUser.lastName}}</h4>
</div>
</template>
<script>
// import axios from 'axios'
import {AXIOS} from './http-common'
export default {
name: 'user',
data () {
return {
response: [],
errors: [],
user: {
lastName: '',
firstName: '',
id: 0
},
showResponse: false,
retrievedUser: {},
showRetrievedUser: false
}
},
methods: {
// Fetches posts when the component is created.
createUser () {
var params = new URLSearchParams()
params.append('firstName', this.user.firstName)
params.append('lastName', this.user.lastName)
AXIOS.post(`/user`, params)
.then(response => {
// JSON responses are automatically parsed.
this.response = response.data
this.user.id = response.data
console.log(response.data)
this.showResponse = true
})
.catch(e => {
this.errors.push(e)
})
},
retrieveUser () {
AXIOS.get(`/user/` + this.user.id)
.then(response => {
// JSON responses are automatically parsed.
this.retrievedUser = response.data
console.log(response.data)
this.showRetrievedUser = true
})
.catch(e => {
this.errors.push(e)
})
}
}
}
</script>https://github.com/vuejs/vue-test-utils
npm install --save-dev @vue/test-utils
Jest is a new shooting star in the sky of JavaScript testing frameworks: https://facebook.github.io/jest/
Intro-Blogpost: https://blog.codecentric.de/2017/06/javascript-unit-tests-sind-schwer-aufzusetzen-keep-calm-use-jest/
Examples: https://github.com/vuejs/vue-test-utils-jest-example
Vue.js Jest Docs: https://vue-test-utils.vuejs.org/guides/#testing-single-file-components-with-jest
A Jest Unittest looks like Hello.test.js:
import { shallowMount } from '@vue/test-utils';
import Hello from '@/components/Hello'
describe('Hello.vue', () => {
it('should render correct hello message', () => {
// Given
const hellowrapped = shallowMount(Hello, {
propsData: { hellomsg: 'Welcome to your Jest powered Vue.js App' },
stubs: ['router-link', 'router-view']
});
// When
const contentH1 = hellowrapped.find('h1');
// Then
expect(contentH1.text()).toEqual('Welcome to your Jest powered Vue.js App');
})
})To pass Component props while using Vue.js Router, see https://stackoverflow.com/a/37940045/4964553.
How to test components with router-view or router-link https://vue-test-utils.vuejs.org/guides/using-with-vue-router.html#testing-components-that-use-router-link-or-router-view.
The test files itself could be named xyz.spec.js or xyz.test.js - and could reside nearly everywhere in the project.
The Jest run-configuration is done inside the package.json:
"scripts": {
...
"unit": "jest --config test/unit/jest.conf.js --coverage",
....
},Jest itself is configured inside frontend/test/unit/jest.conf.js
npm run unit - that'll look like:
Inside the pom.xml we always automatically run the Jest Unittests with the following configuration:
<!-- Run Unit tests -->
<execution>
<id>npm run test</id>
<goals>
<goal>npm</goal>
</goals>
<!-- optional: default phase is "generate-resources" -->
<phase>test</phase>
<!-- Optional configuration which provides for running any npm command -->
<configuration>
<arguments>run unit</arguments>
</configuration>
</execution>This will integrate the Jest Unittests right after the npm run build command, just you are used to in Java-style projects:
And don't mind the depiction with ERROR - this is just a known bug: eirslett/frontend-maven-plugin#584
First, we need to install the NodeJS IntelliJ plugin (https://www.jetbrains.com/help/idea/developing-node-js-applications.html), which isn't bundled with IntelliJ by default:
IntelliJ Jest integration docs: https://www.jetbrains.com/help/idea/running-unit-tests-on-jest.html
The automatic search inside the package.json for the Jest configuration file jest.conf.js doesn't seem to work right now, so we have to manually configure the scripts part of:
"unit": "jest --config test/unit/jest.conf.js --coverage",
inside the Run Configuration under Jest and All Tests:
Now, when running All Tests, this should look like you're already used to Unittest IntelliJ-Integration:
Great tooling: http://nightwatchjs.org/ - Nightwatch controls WebDriver / Selenium standalone Server in own child process and abstracts from those, providing a handy DSL for Acceptance tests:
Docs: http://nightwatchjs.org/gettingstarted/#browser-drivers-setup
Nightwatch is configured through the nightwatch.conf.js. Watch out for breaking changes in 1.x: https://github.com/nightwatchjs/nightwatch/wiki/Migrating-to-Nightwatch-1.0
More options could be found in the docs: http://nightwatchjs.org/gettingstarted/#settings-file
An example Nightwatch test is provided in HelloAcceptance.test.js:
module.exports = {
'default e2e tests': function (browser) {
// automatically uses dev Server port from /config.index.js
// default: http://localhost:8080
// see nightwatch.conf.js
const devServer = browser.globals.devServerURL
browser
.url(devServer)
.waitForElementVisible('#app', 5000)
.assert.elementPresent('.hello')
.assert.containsText('h1', 'Welcome to your Vue.js powered Spring Boot App')
.assert.elementCount('img', 1)
.end()
}
}npm run e2e
Current Problem with npm audit (see NPM Security)
With 1.0.6, the following error occurs after an npm run e2e:
OK. 4 assertions passed. (8.625s)
The "path" argument must be of type string. Received type object
at assertPath (path.js:39:11)
at Object.join (path.js:1157:7)
at process._tickCallback (internal/process/next_tick.js:68:7)
With the latest 0.9.21 of Nightwatch, this issue is gone. BUT: the the npm audit command does find vulnerabilities:
And thus the whole build process will break. The problem is breaking changes in Nightwatch 1.x, that aren't reflected inside the Vue.js Webpack template so far (they use the latest 0.9.x, which is vulnerable): https://github.com/nightwatchjs/nightwatch/wiki/Migrating-to-Nightwatch-1.0
npm test
npm Security - npm@6
https://medium.com/npm-inc/announcing-npm-6-5d0b1799a905
npm audit
https://blog.npmjs.org/post/173719309445/npm-audit-identify-and-fix-insecure
Run npm audit fix to update the vulnerable packages. Only in situations, where nothing else helps, try npm audit fix --force (this will also install braking changes)
https://nodejs.org/en/blog/vulnerability/june-2018-security-releases/
---> Update NPM regularly
https://docs.npmjs.com/troubleshooting/try-the-latest-stable-version-of-npm
npm install -g npm@latest
---> Update Packages regularly
https://docs.npmjs.com/getting-started/updating-local-packages
npm outdated
npm update
Nice introductory video: https://www.youtube.com/watch?v=z6hQqgvGI4Y
Examples: https://vuejs.org/v2/examples/
Easy to use web-based Editor: https://vuejs.org/v2/examples/