From 4c45e3a1af21db518ebdc8c150263a7b9c915006 Mon Sep 17 00:00:00 2001 From: efqsouthworks Date: Tue, 5 Oct 2021 03:53:22 +0200 Subject: [PATCH 1/6] refactor to follow a pipeline and have independent projects - addedusage of docker-maven-plugin to build the images - removed the helper copy thing from the backend - front is packaged as a war so it may be threated as a dependency and used in the pipeline - added a docker-compose file that may be removed later whenever I introduce the use of docker-compose-maven-plugin before and after integration or e2e tests. Those should be run in separated maven artifacts or later on in the reactor run -removed all the heroku and readme manual stuff--- maybe another maven artifact or a terraform thing... donno, have to read whatever those do --- Dockerfile | 29 - README.md | 2270 +---------------- app.json | 43 - backend-docker-image/Dockerfile | 17 + backend-docker-image/pom.xml | 54 + backend/pom.xml | 26 - .../ControllerConfiguration.java | 21 + .../src/main/resources/application.properties | 2 +- docker-compose.yml | 12 + frontend-docker-image/Dockerfile | 12 + frontend-docker-image/nginx.conf | 32 + frontend-docker-image/pom.xml | 56 + frontend/package-lock.json | 24 +- frontend/pom.xml | 55 +- frontend/src/api/backend-api.ts | 2 +- frontend/src/main/webapp/WEB-INF/web.xml | 4 + frontend/vue.config.js | 2 +- pom.xml | 119 +- screenshots/bootstrap-styled-vuejs.png | Bin 275094 -> 0 bytes .../comparison-angular-react-vuejs.png | Bin 69826 -> 0 bytes .../configure-jest-inside-intellij.png | Bin 247248 -> 0 bytes screenshots/docker-hub-create-repo.png | Bin 293074 -> 0 bytes screenshots/entwickler-press-092018.jpg | Bin 21191 -> 0 bytes screenshots/heroku-automatic-deploys.png | Bin 376005 -> 0 bytes screenshots/heroku-pipeline.png | Bin 214320 -> 0 bytes ...history-mode-whitelabel-error-page-404.gif | Bin 1944689 -> 0 bytes screenshots/java-magazin-8.2018.png | Bin 101593 -> 0 bytes screenshots/localhost-first-run.png | Bin 180466 -> 0 bytes .../maven-integration-jest-unittests.png | Bin 273818 -> 0 bytes .../nightwatch-npmaudit-vulnerabilities.png | Bin 181011 -> 0 bytes screenshots/nodejs-intellij-plugin.png | Bin 270751 -> 0 bytes screenshots/run-jest-inside-intellij.png | Bin 425986 -> 0 bytes .../secure-spring-redirect-to-login.gif | Bin 1296466 -> 0 bytes .../secure-spring-vue-simple-login.gif | Bin 3884694 -> 0 bytes screenshots/softwerker-vol12.png | Bin 59821 -> 0 bytes screenshots/unittestrun-jest.png | Bin 341411 -> 0 bytes screenshots/vue-devtools-chrome.png | Bin 265154 -> 0 bytes ...s-2.x-to-3.x-next-upgrade-dependencies.png | Bin 352684 -> 0 bytes .../vue-js-2.x-to-3.x-next-upgrade.png | Bin 47507 -> 0 bytes screenshots/vue-ui.png | Bin 326923 -> 0 bytes screenshots/vuejs-cli-init.png | Bin 93808 -> 0 bytes screenshots/vuejs-cli3-create.png | Bin 50359 -> 0 bytes screenshots/vuejs-cli3-select-plugins.png | Bin 131795 -> 0 bytes 43 files changed, 373 insertions(+), 2407 deletions(-) delete mode 100644 Dockerfile delete mode 100644 app.json create mode 100644 backend-docker-image/Dockerfile create mode 100644 backend-docker-image/pom.xml create mode 100644 backend/src/main/java/de/jonashackt/springbootvuejs/configuration/ControllerConfiguration.java create mode 100644 docker-compose.yml create mode 100644 frontend-docker-image/Dockerfile create mode 100644 frontend-docker-image/nginx.conf create mode 100644 frontend-docker-image/pom.xml create mode 100644 frontend/src/main/webapp/WEB-INF/web.xml delete mode 100644 screenshots/bootstrap-styled-vuejs.png delete mode 100644 screenshots/comparison-angular-react-vuejs.png delete mode 100644 screenshots/configure-jest-inside-intellij.png delete mode 100644 screenshots/docker-hub-create-repo.png delete mode 100644 screenshots/entwickler-press-092018.jpg delete mode 100644 screenshots/heroku-automatic-deploys.png delete mode 100644 screenshots/heroku-pipeline.png delete mode 100644 screenshots/html5-history-mode-whitelabel-error-page-404.gif delete mode 100644 screenshots/java-magazin-8.2018.png delete mode 100644 screenshots/localhost-first-run.png delete mode 100644 screenshots/maven-integration-jest-unittests.png delete mode 100644 screenshots/nightwatch-npmaudit-vulnerabilities.png delete mode 100644 screenshots/nodejs-intellij-plugin.png delete mode 100644 screenshots/run-jest-inside-intellij.png delete mode 100644 screenshots/secure-spring-redirect-to-login.gif delete mode 100644 screenshots/secure-spring-vue-simple-login.gif delete mode 100644 screenshots/softwerker-vol12.png delete mode 100644 screenshots/unittestrun-jest.png delete mode 100644 screenshots/vue-devtools-chrome.png delete mode 100644 screenshots/vue-js-2.x-to-3.x-next-upgrade-dependencies.png delete mode 100644 screenshots/vue-js-2.x-to-3.x-next-upgrade.png delete mode 100644 screenshots/vue-ui.png delete mode 100644 screenshots/vuejs-cli-init.png delete mode 100644 screenshots/vuejs-cli3-create.png delete mode 100644 screenshots/vuejs-cli3-select-plugins.png diff --git a/Dockerfile b/Dockerfile deleted file mode 100644 index b8371b22..00000000 --- a/Dockerfile +++ /dev/null @@ -1,29 +0,0 @@ -# Docker multi-stage build - -# 1. Building the App with Maven -FROM maven:3-jdk-11 - -ADD . /springbootvuejs -WORKDIR /springbootvuejs - -# Just echo so we can see, if everything is there :) -RUN ls -l - -# Run Maven build -RUN mvn clean install - - -# Just using the build artifact and then removing the build-container -FROM openjdk:17-jdk - -MAINTAINER Jonas Hecht - -VOLUME /tmp - -# Add Spring Boot app.jar to Container -COPY --from=0 "/springbootvuejs/backend/target/backend-0.0.1-SNAPSHOT.jar" app.jar - -ENV JAVA_OPTS="" - -# Fire up our Spring Boot app by default -ENTRYPOINT [ "sh", "-c", "java $JAVA_OPTS -Djava.security.egd=file:/dev/./urandom -jar /app.jar" ] \ No newline at end of file diff --git a/README.md b/README.md index 641e35c3..9be896d5 100644 --- a/README.md +++ b/README.md @@ -1,2257 +1,27 @@ -# spring-boot-vuejs +* frontend and backend are now independent modules +* docker images are built as different aritifacts (not attached) +* added a docker-compose file but I may remove it and use a maven plugin to start the composition before integration tests +* removed all the noise from the readme -[![Build Status](https://github.com/jonashackt/spring-boot-vuejs/workflows/build/badge.svg)](https://github.com/jonashackt/spring-boot-vuejs/actions) -[![codecov](https://codecov.io/gh/jonashackt/spring-boot-vuejs/branch/master/graph/badge.svg?token=gMQBTyKuKS)](https://codecov.io/gh/jonashackt/spring-boot-vuejs) -[![License](http://img.shields.io/:license-mit-blue.svg)](https://github.com/jonashackt/spring-boot-vuejs/blob/master/LICENSE) -[![renovateenabled](https://img.shields.io/badge/renovate-enabled-yellow)](https://renovatebot.com) -[![versionspringboot](https://img.shields.io/badge/dynamic/xml?color=brightgreen&url=https://raw.githubusercontent.com/jonashackt/spring-boot-vuejs/master/pom.xml&query=%2F%2A%5Blocal-name%28%29%3D%27project%27%5D%2F%2A%5Blocal-name%28%29%3D%27parent%27%5D%2F%2A%5Blocal-name%28%29%3D%27version%27%5D&label=springboot)](https://github.com/spring-projects/spring-boot) -[![versionjava](https://img.shields.io/badge/jdk-8,_11,_15-brightgreen.svg?logo=java)](https://github.com/spring-projects/spring-boot) -[![versionvuejs](https://img.shields.io/badge/dynamic/json?color=brightgreen&url=https://raw.githubusercontent.com/jonashackt/spring-boot-vuejs/master/frontend/package.json&query=$.dependencies.vue&label=vue&logo=vue.js)](https://vuejs.org/) -[![versiontypescript](https://img.shields.io/badge/dynamic/json?color=blue&url=https://raw.githubusercontent.com/jonashackt/spring-boot-vuejs/master/frontend/package.json&query=$.devDependencies.typescript&label=typescript&logo=typescript)](https://www.typescriptlang.org/) -[![versionbootstrap](https://img.shields.io/badge/dynamic/json?color=blueviolet&url=https://raw.githubusercontent.com/jonashackt/spring-boot-vuejs/master/frontend/package.json&query=$.dependencies.bootstrap&label=bootstrap&logo=bootstrap.js)](https://getbootstrap.com/) -[![versionnodejs](https://img.shields.io/badge/dynamic/xml?color=brightgreen&url=https://raw.githubusercontent.com/jonashackt/spring-boot-vuejs/master/frontend/pom.xml&query=%2F%2A%5Blocal-name%28%29%3D%27project%27%5D%2F%2A%5Blocal-name%28%29%3D%27build%27%5D%2F%2A%5Blocal-name%28%29%3D%27plugins%27%5D%2F%2A%5Blocal-name%28%29%3D%27plugin%27%5D%2F%2A%5Blocal-name%28%29%3D%27executions%27%5D%2F%2A%5Blocal-name%28%29%3D%27execution%27%5D%2F%2A%5Blocal-name%28%29%3D%27configuration%27%5D%2F%2A%5Blocal-name%28%29%3D%27nodeVersion%27%5D&label=nodejs&logo=node.js)](https://nodejs.org/en/) -[![versionwebpack](https://img.shields.io/badge/dynamic/json?color=brightgreen&url=https://raw.githubusercontent.com/jonashackt/spring-boot-vuejs/master/frontend/package-lock.json&query=$.dependencies.webpack.version&label=webpack&logo=webpack)](https://webpack.js.org/) -[![versionaxios](https://img.shields.io/badge/dynamic/json?color=brightgreen&url=https://raw.githubusercontent.com/jonashackt/spring-boot-vuejs/master/frontend/package.json&query=$.dependencies.axios&label=axios)](https://github.com/axios/axios) -[![versionjest](https://img.shields.io/badge/dynamic/json?color=brightgreen&url=https://raw.githubusercontent.com/jonashackt/spring-boot-vuejs/master/frontend/package-lock.json&query=$.dependencies.jest.version&label=jest&logo=jest)](https://jestjs.io/) -[![versionnightwatch](https://img.shields.io/badge/dynamic/json?color=brightgreen&url=https://raw.githubusercontent.com/jonashackt/spring-boot-vuejs/master/frontend/package-lock.json&query=$.dependencies.nightwatch.version&label=nightwatch)](http://nightwatchjs.org/) -[![Deployed on Heroku](https://img.shields.io/badge/heroku-deployed-blueviolet.svg?logo=heroku)](https://spring-boot-vuejs.herokuapp.com/) -[![Pushed to Docker Hub](https://img.shields.io/badge/docker_hub-released-blue.svg?logo=docker)](https://hub.docker.com/r/jonashackt/spring-boot-vuejs) - -> **If you´re a JavaMagazin / blog.codecentric.de / Softwerker reader**, consider switching to [vue-cli-v2-webpack-v3](https://github.com/jonashackt/spring-boot-vuejs/tree/vue-cli-v2-webpack-v3) -![localhost-first-run](screenshots/localhost-first-run.png) +usage -A live deployment is available on Heroku: https://spring-boot-vuejs.herokuapp.com +prerrequisites +* you need to have docker installed and running +* maven installed -This project is used as example in a variety of articles & as eBook: +build +* run mvn clean install +* run docker-compose up +* browse to http://localhost +* click on everything -[![java-magazin-8.2018](screenshots/java-magazin-8.2018.png)](https://jaxenter.de/ausgaben/java-magazin-8-18) -[![entwickler-press-092018](screenshots/entwickler-press-092018.jpg)](https://www.amazon.com/Vue-js-f%C3%BCr-alle-Wissenswertes-Einsteiger-ebook/dp/B07HQF9VX4/ref=sr_1_1?ie=UTF8&qid=1538484852&sr=8-1&keywords=Vue-js-f%C3%BCr-alle-Wissenswertes-Einsteiger-ebook) -[![softwerker-vol12](screenshots/softwerker-vol12.png)](https://info.codecentric.de/softwerker-vol-12) -[blog.codecentric.de/en/2018/04/spring-boot-vuejs](https://blog.codecentric.de/en/2018/04/spring-boot-vuejs) | [JavaMagazin 8.2018](https://jaxenter.de/ausgaben/java-magazin-8-18) | [entwickler.press shortcuts 229](https://www.amazon.com/Vue-js-f%C3%BCr-alle-Wissenswertes-Einsteiger-ebook/dp/B07HQF9VX4/ref=sr_1_1?ie=UTF8&qid=1538484852&sr=8-1&keywords=Vue-js-f%C3%BCr-alle-Wissenswertes-Einsteiger-ebook) | [softwerker Vol.12](https://info.codecentric.de/softwerker-vol-12) -## Upgrade procedure - -Get newest node & npm: -```shell -brew upgrade node -npm install -g npm@latest -``` - -Update vue-cli -```shell -npm install -g @vue/cli -``` - -Update Vue components/plugins (see https://cli.vuejs.org/migrating-from-v3/#upgrade-all-plugins-at-once) -```shell -vue upgrade -``` - -## In Search of a new Web Frontend-Framework after 2 Years of absence... - -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) - -![comparison-angular-react-vuejs](screenshots/comparison-angular-react-vuejs.png) - -And the [introduction phrase](https://vuejs.org/v2/guide/index.html) 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! - - - -## Setup Vue.js & Spring Boot - -### Prerequisites - -#### MacOSX - -``` -brew install node -npm install -g @vue/cli -``` - -#### Linux - -``` -sudo apt update -sudo apt install node -npm install -g @vue/cli -``` - -#### Windows - -``` -choco install npm -npm install -g @vue/cli -``` - -## Project setup - -``` -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 -``` - -## Backend - -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: - -```xml - - - - org.springframework.boot - spring-boot-maven-plugin - - - maven-resources-plugin - - - copy Vue.js frontend content - generate-resources - - copy-resources - - - src/main/resources/public - true - - - ${project.parent.basedir}/frontend/target/dist - - static/ - index.html - favicon.ico - - - - - - - - - -``` - - -## Frontend - -Creating our `frontend` project is done by the slightly changed (we use `--no-git` here, because our parent project is already a git repository and otherwise vue CLI 3 would initialize an new one): - -``` -vue create frontend --no-git -``` - -see https://cli.vuejs.org/guide/ - -This will initialize a project skeleton for Vue.js in /frontend directory - it, therefore, asks some questions in the cli: - -![vuejs-cli3-create](screenshots/vuejs-cli3-create.png) - -__Do not__ choose the default preset with `default (babel, eslint)`, because we need some more plugins for our project here (choose the Plugins with the __space bar__): - -![vuejs-cli3-select-plugins](screenshots/vuejs-cli3-select-plugins.png) - -You can now also use the new `vue ui` command/feature to configure your project: - -![vue-ui](screenshots/vue-ui.png) - -If you want to learn more about installing Vue.js, head over to the docs: https://vuejs.org/v2/guide/installation.html - - -### Use frontend-maven-plugin to handle NPM, Node, Bower, Grunt, Gulp, Webpack and so on :) - -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`: - -```xml - - - - com.github.eirslett - frontend-maven-plugin - ${frontend-maven-plugin.version} - - - - install node and npm - - install-node-and-npm - - - v10.10.0 - - - - - npm install - - npm - - - generate-resources - - - install - - - - - npm run build - - npm - - - run build - - - - - - -``` - -### Tell Webpack to output the dist/ contents to target/ - -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](https://cli.vuejs.org/config/#vue-config-js) and configure the `outputDir` and `assetsDir` correctly: - -```javascript -module.exports = { - ... - // Change build paths to make them Maven compatible - // see https://cli.vuejs.org/config/ - outputDir;: 'target/dist', - assetsDir;: 'static'; -} -``` - - -## First App run - -Inside the root directory, do a: - -``` -mvn clean install -``` - -Run our complete Spring Boot App: - -``` -mvn --projects backend spring-boot:run -``` - -Now go to http://localhost:8098/ and have a look at your first Vue.js Spring Boot App. - - - -## Faster feedback with webpack-dev-server - -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 serve -``` - -That’s it! - - -## Browser developer tools extension - -Install vue-devtools Browser extension https://github.com/vuejs/vue-devtools and get better feedback, e.g. in Chrome: - -![vue-devtools-chrome](screenshots/vue-devtools-chrome.png) - - -## IntelliJ integration - -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 :) - - - -## HTTP calls from Vue.js to (Spring Boot) REST backend - -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](https://github.com/mzabriskie/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: - -```js -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: - -```html - - -

{{ response }}

-``` - -### The problem with SOP - -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:8098. - -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) - - -#### Enabling Axios CORS support - -Create a central Axios configuration file called `http-commons.js`: - -```js -import axios from 'axios' - -export const AXIOS = axios.create({ - baseURL: `http://localhost:8098`, - headers: { - 'Access-Control-Allow-Origin': 'http://localhost:8080' - } -}) -``` - -Here we allow requests to the base URL of our Spring Boot App on port 8098 to be accessible from 8080. - -Now we could use this configuration inside our Components, e.g. in `Hello.vue`: -```js -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) - }) - } - } -``` - -#### Enabling Spring Boot CORS support - -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: - -```java -@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`: - -```java -// 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. - - -#### But STOP! Webpack & Vue have something much smarter for us to help us with SOP! - -Thanks to my colleague [Daniel](https://www.codecentric.de/team/dre/) 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 the [Vue CLI 3 docs](https://cli.vuejs.org/config) the only thing we need to [configure is a devserver-proxy](https://cli.vuejs.org/config/#devserver-proxy) for our webpack devserver requests. This could be done easily in the optional [vue.config.js](https://cli.vuejs.org/config/#vue-config-js) inside `devServer.proxy`: - -```js -module.exports = { - // proxy all webpack dev-server requests starting with /api - // to our Spring Boot backend (localhost:8098) using http-proxy-middleware - // see https://cli.vuejs.org/config/#devserver-proxy - devServer: { - proxy: { - '/api': { - target: 'http://localhost:8098', - ws: true, - changeOrigin: true - } - } - }, - ... -} -``` - -With this configuration in place, the webpack dev-server uses the [http-proxy-middleware](https://github.com/chimurai/http-proxy-middleware), which is a really handy component, to proxy all frontend-requests from http://localhost:8080 --> http://localhost:8098 - incl. Changing the Origin accordingly. - -This is used in the webpack build process to configure the proxyMiddleware (you don't need to change something here!): - -```js -// 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)) -}) -``` - -## Using history mode for nicer URLs - -If we use the default configuration of the generated Vue.js template, we see URLs with a `#` inside them - like this: - -``` -http://localhost:8098/#/bootstrap - -or - -http://localhost:8098/#/user -``` - -With the usage of __[HTML5 history mode](https://router.vuejs.org/guide/essentials/history-mode.html#html5-history-mode)__, we can achieve much nicer URLs without the `#` in them. Only thing to do in the Vue.js frontend is to configure our router accordingly inside the [router.js](frontend/src/router.js): - -``` -... - -Vue.use(Router); - -const router = new Router({ - mode: 'history', // uris without hashes #, see https://router.vuejs.org/guide/essentials/history-mode.html#html5-history-mode - routes: [ - { path: '/', component: Hello }, - { path: '/callservice', component: Service }, - ... -``` - -That's nearly everything. BUT only nearly! If one clicks on a link inside our frontend, the user is correctly send to the wished component. - -But if the user enters the URL directly into the Browser, we get a `Whitelabel Error Page` because our Spring Boot backend gives us a __HTTP 404__ - since this URL isn't present in the backend: - -![html5-history-mode-whitelabel-error-page-404](screenshots/html5-history-mode-whitelabel-error-page-404.gif) - -The solution is to redirect or better forward the user to the frontend (router) again. The [Vue.js docs don't provide an example configuration for Spring Boot](https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations), but luckily [there are other resources](https://www.baeldung.com/spring-redirect-and-forward). In essence we have to implement a forwarding controller in our [BackendController](backend/src/main/java/de/jonashackt/springbootvuejs/controller/BackendController.java): - -``` - // Forwards all routes to FrontEnd except: '/', '/index.html', '/api', '/api/**' - // Required because of 'mode: history' usage in frontend routing, see README for further details - @RequestMapping(value = "{_:^(?!index\\.html|api).$}") - public String redirectApi() { - LOG.info("URL entered directly into the Browser, so we need to redirect..."); - return "forward:/"; - } -``` - -This controller will forward every request other then `'/', '/index.html', '/api', '/api/**'` to our Vue.js frontend. - - -## Bootstrap & Vue.js - -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: - -``` -CALL Spring Boot REST backend service -``` - -instead of - -``` - -``` - -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: - -![bootstrap-styled-vuejs](screenshots/bootstrap-styled-vuejs.png) - -A good discussion about various UI component frameworks: http://vuetips.com/bootstrap - - -## Heroku Deployment - -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: - -![heroku-pipeline](screenshots/heroku-pipeline.png) - -And with the help of super cool `Automatic deploys`, we have our GitHub Actions 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 GitHub Actions (and Codegov...) build succeeded: - -![heroku-automatic-deploys](screenshots/heroku-automatic-deploys.png) - -You only have to connect your Heroku app to GitHub, activate Automatic deploys and set the named checkbox. That's everything! - - -#### Accessing Spring Boot REST backend on Heroku from Vue.js frontend - -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](https://stackoverflow.com/a/12023039/4964553). - -> You can [try out your Heroku app locally](https://devcenter.heroku.com/articles/heroku-local)! 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](https://github.com/jonashackt/spring-boot-vuejs/blob/master/frontend/src/components/http-common.js): - -``` -export const AXIOS = axios.create({ - baseURL: `/api` -}) -``` - -#### Using Heroku's Postgres as Database for Spring Boot backend and Vue.js frontend - -First, add [Heroku Postgres database](https://elements.heroku.com/addons/heroku-postgresql) 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](backend/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](backend/src/main/java/de/jonashackt/springbootvuejs/repository/UserRepository.java): - -```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 { - - List findByLastName(@Param("lastname") String lastname); - - List findByFirstName(@Param("firstname") String firstname); - -} - -``` - -Now write your Testcases accordingly like [UserRepositoryTest.java](backend/src/test/java/de/jonashackt/springbootvuejs/repository/UserRepositoryTest.java): - -```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 final User norbertSiegmund = new User("Norbert", "Siegmund"); - private final 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 usersWithLastNameSiegmund = users.findByLastName("Siegmund"); - - assertThat(usersWithLastNameSiegmund, contains(norbertSiegmund)); - } - - - @Test - public void testFindByFirstName() throws Exception { - // Search for specific User in Database according to firstname - List usersWithFirstNameJonas = users.findByFirstName("Jonas"); - - assertThat(usersWithFirstNameJonas, contains(jonasHecht)); - } - -} -``` - -Then include this functionality in your REST-API - see [BackendController.java](backend/src/main/java/de/jonashackt/springbootvuejs/controller/BackendController.java): - -```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](frontend/src/components/User.vue): - -```html - - - -``` - - -## Testing - -### Install vue-test-utils - -https://github.com/vuejs/vue-test-utils - -`npm install --save-dev @vue/test-utils` - -### Jest - -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.spec.js](frontend/test/components/Hello.spec.js): - -```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. - -##### Jest Configuration - -The Jest run-configuration is done inside the [package.json](frontend/package.json): - -```js -"scripts";: { - ... - "test:unit";: "vue-cli-service test:unit --coverage",; - .... - }, -``` - -Jest can be configured via `jest.config.js` in your project root, or the `jest` field in [package.json](frontend/package.json). In our case we especially need to configure `coverageDirectory`: - -```json - ], - "jest": { - ... - "coverageDirectory": "/tests/unit/coverage", - "collectCoverageFrom": [ - "src/**/*.{js,vue}", - "!src/main.js", - "!src/router/index.js", - "!**/node_modules/**" - ] - } -} -``` - -Jest needs to know the right output directory `/tests/unit/coverage` to show a correct output when `npm run test:unit` is run (or the corresponding Maven build). If you run the Jest Unit tests now with: - -`npm run test:unit` - -- you´ll recognize the table of test covered files: - -![unittestrun-jest](screenshots/unittestrun-jest.png) - - -##### Integration in Maven build (via frontend-maven-plugin) - -Inside the [pom.xml](pom.xml) we always automatically run the Jest Unittests with the following configuration: - -```xml - - - npm run test:unit - - npm - - - test - - - run test:unit - - -``` - -This will integrate the Jest Unittests right after the npm run build command, just you are used to in Java-style projects: - -![maven-integration-jest-unittests](screenshots/maven-integration-jest-unittests.png) - -And don't mind the depiction with `ERROR` - this is just a known bug: https://github.com/eirslett/frontend-maven-plugin/issues/584 - - -##### Run Jest tests inside IntelliJ - -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: - -![nodejs-intellij-plugin](screenshots/nodejs-intellij-plugin.png) - -IntelliJ Jest integration docs: https://www.jetbrains.com/help/idea/running-unit-tests-on-jest.html - -The automatic search inside the [package.json](frontend/package.json) for the Jest configuration file [jest.conf.js](frontend/test/unit/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`: - -![configure-jest-inside-intellij](screenshots/configure-jest-inside-intellij.png) - -Now, when running `All Tests`, this should look like you're already used to Unittest IntelliJ-Integration: - -![run-jest-inside-intellij](screenshots/run-jest-inside-intellij.png) - - - -## End-2-End (E2E) tests with Nightwatch - -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 - -![http://nightwatchjs.org/img/operation.png](http://nightwatchjs.org/img/operation.png) - -Nightwatch is configured through the [nightwatch.conf.js](/frontend/test/e2e/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 - - -#### Write Nightwatch tests - -An example Nightwatch test is provided in [HelloAcceptance.test.js](/frontend/test/e2e/specs/HelloAcceptance.test.js): - -```js -module.exports = { - 'default e2e tests': browser => { - browser - .url(process.env.VUE_DEV_SERVER_URL) - .waitForElementVisible('#app', 5000) - .assert.elementPresent('.hello') - .assert.containsText('h1', 'Welcome to your Vue.js powered Spring Boot App') - .assert.elementCount('img', 1) - .end() - } -} -``` - -##### Run E2E Tests - -`npm run test:e2e` - - -## Run all tests - - `npm test` - - - -## NPM Security - -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` - - - - -## Shift from templates to plugin-based architecture in Vue Cli 3 - -In the long run, templates like the main [webpack](https://github.com/vuejs-templates/webpack) are deprecated in the Vue.js universe: - -https://vuejsdevelopers.com/2018/03/26/vue-cli-3/ - -Plugins bring the following benefits compared to templates: - -* No lock in, as plugins can be added at any point in the development lifecycle -* Zero config plugins allow you to spend time developing rather than configuring -* Easy to upgrade, as configuration can be customized without “ejecting” -* Allows developers to make their own plugins and presets - -Starting point: https://cli.vuejs.org/ - - -#### OMG! My package.json is so small - Vue CLI 3 Plugins - -From https://cli.vuejs.org/guide/plugins-and-presets.html: - -> Vue CLI uses a plugin-based architecture. If you inspect a newly created project's package.json, you will find dependencies that start with `@vue/cli-plugin-`. Plugins can modify the internal webpack configuration and inject commands to `vue-cli-service`. Most of the features listed during the project creation process are implemented as plugins. - -With plugings, extensions to an existing project could also be made via: `vue add pluginName`. E.g. if you want to add Nightwatch E2E tests to your project, just run `vue add @vue/e2e-nightwatch`. All scoped packages are available here: https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue - -These new Vue CLI 3 plugin architecture cleans our big `package.json` to a really neat compact thing. This was the old big dependency block: - -````json - "devDependencies": { - "@vue/test-utils": "^1.0.0-beta.25", - "autoprefixer": "^7.1.2", - "babel-core": "^6.26.3", - "babel-helper-vue-jsx-merge-props": "^2.0.3", - "babel-jest": "^21.0.2", - "babel-loader": "^7.1.5", - "babel-plugin-dynamic-import-node": "^1.2.0", - "babel-plugin-syntax-jsx": "^6.18.0", - "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0", - "babel-plugin-transform-runtime": "^6.22.0", - "babel-plugin-transform-vue-jsx": "^3.5.0", - "babel-preset-env": "^1.7.0", - "babel-preset-stage-2": "^6.22.0", - "babel-register": "^6.22.0", - "chalk": "^2.4.1", - "chromedriver": "^2.41.0", - "copy-webpack-plugin": "^4.5.2", - "cross-spawn": "^5.0.1", - "css-loader": "^0.28.0", - "extract-text-webpack-plugin": "^3.0.0", - "file-loader": "^1.1.4", - "friendly-errors-webpack-plugin": "^1.6.1", - "html-webpack-plugin": "^2.30.1", - "jest": "^22.0.4", - "jest-serializer-vue": "^0.3.0", - "nightwatch": "^1.0.11", - "node-notifier": "^5.1.2", - "optimize-css-assets-webpack-plugin": "^3.2.0", - "ora": "^1.2.0", - "portfinder": "^1.0.17", - "postcss-import": "^11.0.0", - "postcss-loader": "^2.1.6", - "postcss-url": "^7.2.1", - "rimraf": "^2.6.0", - "selenium-server": "^3.14.0", - "semver": "^5.5.1", - "shelljs": "^0.7.6", - "uglifyjs-webpack-plugin": "^1.3.0", - "url-loader": "^1.1.1", - "vue-jest": "^1.0.2", - "vue-loader": "^13.7.3", - "vue-style-loader": "^3.0.1", - "vue-template-compiler": "^2.5.17", - "webpack": "^3.6.0", - "webpack-bundle-analyzer": "^2.13.1", - "webpack-dev-server": "^2.11.3", - "webpack-merge": "^4.1.4" - }, -```` - -As you can see, we´re not only maintaining our high-level libraries of choice like nightwatch, jest and so on. We´re also maintaining libraries that they use itself. Now this is over with Vue CLI 3. Let´s have a look at the super clean dependency block now: - -```json -"devDependencies": { - "@vue/cli-plugin-babel": "^3.0.3", - "@vue/cli-plugin-e2e-nightwatch": "^3.0.3", - "@vue/cli-plugin-unit-jest": "^3.0.3", - "@vue/cli-service": "^3.0.3", - "@vue/test-utils": "^1.0.0-beta.20", - "babel-core": "7.0.0-bridge.0", - "babel-jest": "^23.0.1", - "node-sass": "^4.9.0", - "sass-loader": "^7.0.1", - "vue-template-compiler": "^2.5.17" - }, -``` - -As you dig into the directories like `node_modules/@vue/cli-plugin-e2e-nightwatch`, you´ll find where the used libraries of nightwatch are configured - in the respective `package.json` there: - -```json - "dependencies": { - "@vue/cli-shared-utils": "^3.0.2", - "chromedriver": "^2.40.0", - "deepmerge": "^2.1.1", - "execa": "^0.10.0", - "nightwatch": "^0.9.21", - "selenium-server": "^3.13.0" - }, -``` - -This is really cool, I have to admit! - - -#### The vue.config.js file - -Vue CLI 3 removes the need for explicit configuration files - and thus you wont find any `build` or `config` directories in your projects root any more. This now implements a "convention over configuration" approach, which makes it much easier to kick-start a Vue.js project, as it provides widly used defaults to webpack etc. It also eases the upgradeability of Vue.js projects - or even makes it possible. - -__But__: How do we configure webpack etc. for CORS handling, the build directories and so on? This could be done with the optional [vue.config.js](https://cli.vuejs.org/config/#vue-config-js): - -```javascript -module.exports = { - // proxy all webpack dev-server requests starting with /api - // to our Spring Boot backend (localhost:8098) using http-proxy-middleware - // see https://cli.vuejs.org/config/#devserver-proxy - devServer: { - proxy: { - '/api': { - target: 'http://localhost:8098', - ws: true, - changeOrigin: true - } - } - }, - // Change build paths to make them Maven compatible - // see https://cli.vuejs.org/config/ - outputDir: 'target/dist' -} -``` - -#### Updating Vue in an existing project - -Update your local `@vue/cli` to the latest version: - -``` -npm install -g @vue/cli -``` - -Then update Vue.js and all your other JS dependencies with: - -``` -cd frontend -npm update -``` - - -## Upgrade to Vue.js 3.x/4.x next - -Let's move from 2.6.x -> 3.x/4.x next here. - -> Be aware that [the latest version of vue currently is `2.6.x` and `3.x` is considered `next`](https://www.npmjs.com/package/vue)! - -There are some resources: - -https://v3.vuejs.org/guide/migration/introduction.html#quickstart - -https://johnpapa.net/vue2-to-vue3/ - -And if we are using 3.x, we can even migrate to 4.x: https://cli.vuejs.org/migrating-from-v3/ - - -#### Upgrade from 2.x to 3.x - -There's a migration tooling, simply use: - -```shell -vue add vue-next -``` - -This took around 3 minutes or more on my MacBook and changed some files: - -![vue-js-2.x-to-3.x-next-upgrade](screenshots/vue-js-2.x-to-3.x-next-upgrade.png) - -The [package.json](frontend/package.json) got some new or upgraded deps: - -![vue-js-2.x-to-3.x-next-upgrade-dependencies](screenshots/vue-js-2.x-to-3.x-next-upgrade-dependencies.png) - -[As John stated in his post](https://johnpapa.net/vue2-to-vue3/) it's strange to find `beta` versions with `vue`, `vue-router` and `vuex`. - -So in order to see what a fresh skeleton would produce, let's also create one in another dir ([I assume you have `npm install -g @vue/cli` installed](https://v3.vuejs.org/guide/migration/introduction.html#quickstart): - -```shell -mkdir vue3test && cd vue3test -vue create hello-vue3 -``` - -I aligned my project to match the latest skeleton generation much better: So router, store and api got their own directories. The views are now in the correct folder `views` - and I extracted one component to use from the newly introduced `Home.vue` view: the `HelloSpringWorld.vue` component. - -I also went over the [package.json](frontend/package.json) and upgraded to the latest release versions instead of alphas (except `@vue/test-utils` which only has a `rc` atm). - -All imports were refactored too. Coming from this style: - -```javascript -import Vue from 'vue' -import Router from 'vue-router' -``` - -everything now reads: - -```javascript -import { createApp } from 'vue'; -import { createRouter, createWebHistory } from 'vue-router' -``` - -Also check your `router.js` or [router/index.js](frontend/src/router/index.js)! Using a path redirect like this leads to a non working routing configuration: - -```javascript - // otherwise redirect to home - { path: '*', redirect: '/' } -``` - -The error in the Browser console states: - -```shell -Uncaught Error: Catch all routes ("*") must now be defined using a param with a custom regexp. -See more at https://next.router.vuejs.org/guide/migration/#removed-star-or-catch-all-routes. -``` - -I changed it to the new param with regex syntax like this: - -```javascript - // otherwise redirect to home - { path: '/:pathMatch(.*)*', redirect: '/' } -``` - -A crucial point to get jest to work again, was to add the following to the [jest.config.js](frontend/jest.config.js): - -```javascript - transform: { - '^.+\\.vue$': 'vue-jest' - } -``` - -Otherwise my tests ran into the following error: - -```shell -npm run test:unit - -> frontend@4.0.0 test:unit -> vue-cli-service test:unit --coverage - - FAIL tests/unit/views/User.spec.js - ● Test suite failed to run - - Vue packages version mismatch: - - - vue@3.0.11 (/Users/jonashecht/dev/spring-boot/spring-boot-vuejs/frontend/node_modules/vue/index.js) - - vue-template-compiler@2.6.12 (/Users/jonashecht/dev/spring-boot/spring-boot-vuejs/frontend/node_modules/vue-template-compiler/package.json) - - This may cause things to work incorrectly. Make sure to use the same version for both. - If you are using vue-loader@>=10.0, simply update vue-template-compiler. - If you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest. - - at Object. (node_modules/vue-template-compiler/index.js:10:9) -``` - -Luckily this so answer helped me out: https://stackoverflow.com/a/65111966/4964553 - -And finally Bootstrap Vue doesn't support Vue 3.x right now: https://github.com/bootstrap-vue/bootstrap-vue/issues/5196 - So I temporarily commented out the imports. - - -#### Add TypeScript - -Vue 3.x is now build with TypeScript: https://v3.vuejs.org/guide/typescript-support.html - -> A static type system can help prevent many potential runtime errors as applications grow, which is why Vue 3 is written in TypeScript. This means you don't need any additional tooling to use TypeScript with Vue - it has first-class citizen support. - -There's also a huge documentation of TypeScript itself at https://www.typescriptlang.org/docs/ I can also recommend https://medium.com/js-dojo/adding-typescript-to-your-existing-vuejs-2-6-app-aaa896c2d40a - -To migrate your project there's the command: - -```shell -vue add typescript -``` - -The first question arises: `Use class-style component syntax? (Y/n)` whether to use class-style component syntax or not. I didn't use it. I think the interface definitions of components are concise enough without the class-style. But let's see how this will work out. - -So this was the output: - -```shell -vue add typescript - WARN There are uncommitted changes in the current repository, it's recommended to commit or stash them first. -? Still proceed? Yes - -📦 Installing @vue/cli-plugin-typescript... - - -added 59 packages, removed 58 packages, and audited 2219 packages in 6s - -85 packages are looking for funding - run `npm fund` for details - -3 low severity vulnerabilities - -To address all issues (including breaking changes), run: - npm audit fix --force - -Run `npm audit` for details. -✔ Successfully installed plugin: @vue/cli-plugin-typescript - -? Use class-style component syntax? No -? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes -? Use TSLint? Yes -? Pick lint features: Lint on save -? Convert all .js files to .ts? Yes -? Allow .js files to be compiled? Yes -? Skip type checking of all declaration files (recommended for apps)? Yes - -🚀 Invoking generator for @vue/cli-plugin-typescript... -📦 Installing additional dependencies... - - -added 2 packages, and audited 2221 packages in 3s -... -✔ Successfully invoked generator for plugin: @vue/cli-plugin-typescript -``` - -Now I went through all the componentes and views and extended ` -``` - -For now the conditional is only handled by two boolean values: `loginSuccess` and `loginError`. - -To bring those to life, we implement the `callLogin()` method: - -``` -, - methods: { - callLogin() { - api.getSecured(this.user, this.password).then(response => { - console.log("Response: '" + response.data + "' with Statuscode " + response.status) - if(response.status == 200) { - this.loginSuccess = true - } - }).catch(error => { - console.log("Error: " + error) - this.loginError = true - }) - } - } -``` - -With this simple implementation, the Login component asks the Spring Boot backend, if a user is allowed to access the `/api/secured` resource. The [backend-api.js](frontend/src/components/backend-api.js) provides an method, which uses axios' Basic Auth feature: - -``` - getSecured(user, password) { - return AXIOS.get(`/secured/`,{ - auth: { - username: user, - password: password - }}); - } -``` - -Now the Login component works for the first time: - -![secure-spring-vue-simple-login](screenshots/secure-spring-vue-simple-login.gif) - - - - -#### Protect multiple Vue.js components - -Now we have a working Login component. Now let's create a new `Protected.vue` component, since we want to have something that's only accessible, if somebody has logged in correctly: - -``` - - - -``` - -This component should only be visible, if the appropriate access was granted at the Login. Therefore we need to solve 2 problems: - -* __Store the login state__ -* __Redirect user from Protected.vue to Login.vue, if not authenticated before__ - - - -#### Store login information with vuex - -The super dooper simple solution would be to simply use `LocalStorage`. But with [vuex](https://github.com/vuejs/vuex) there is a centralized state management in Vue.js, which is pretty popular. So we should invest some time to get familiar with it. There's a full guide available: https://vuex.vuejs.org/guide/ and a great introductory blog post here: https://pusher.com/tutorials/authentication-vue-vuex - -You could also initialize a new Vue.js project with Vue CLI and mark the `vuex` checkbox. But we try to extend the current project here. - -First we add [the vuex dependency](https://www.npmjs.com/package/vuex) into our [package.json](frontend/package.json): - -``` -... - "vue": "^2.6.10", - "vue-router": "^3.0.6", - "vuex": "^3.1.1" - }, -``` - -> There are four things that go into a Vuex module: the initial [state](https://vuex.vuejs.org/guide/state.html), [getters](https://vuex.vuejs.org/guide/getters.html), [mutations](https://vuex.vuejs.org/guide/mutations.html) and [actions](https://vuex.vuejs.org/guide/actions.html) - -#### Define the vuex state - -To implement them, we create a new [store.js](frontend/src/store.js) file: - -``` -import Vue from 'vue' -import Vuex from 'vuex' - -Vue.use(Vuex) - -export default new Vuex.Store({ - state: { - loginSuccess: false, - loginError: false, - userName: null - }, - mutations: { - - }, - actions: { - - }, - getters: { - - } -}) - -``` - -We only have an initial state here, which is that a login could be successful or not - and there should be a `userName`. - - -#### Define a vuex action login() and the mutations login_success & login_error - -Then we have a look onto __vuex actions: They provide a way to commit mutations to the vuex store.__ - -As our app here is super simple, we only have one action to implement here: `login`. We omit the `logout` and `register` actions, because we only define one admin user in the Spring Boot backend right now and don't need an implemented logout right now. Both could be implemented later! - -We just shift our logic on how to login a user from the `Login.vue` to our vuex action method: - -``` - mutations: { - login_success(state, name){ - state.loginSuccess = true - state.userName = name - - }, - login_error(state){ - state.loginError = true - state.userName = name - } - }, - actions: { - async login({commit}, user, password) { - api.getSecured(user, password) - .then(response => { - console.log("Response: '" + response.data + "' with Statuscode " + response.status); - if(response.status == 200) { - // place the loginSuccess state into our vuex store - return commit('login_success', name); - } - }).catch(error => { - console.log("Error: " + error); - // place the loginError state into our vuex store - commit('login_error', name); - return Promise.reject("Invald credentials!") - }) - } - }, -``` - -Instead of directly setting a boolean to a variable, we `commit` a mutation to our store if the authentication request was successful or unsuccessful. We therefore implement two simple mutations: `login_success` & `login_error` - - -#### Last but not least: define getters for the vuex state - -To be able to access vuex state from within other components, we need to implement getters inside our vuex store. As we only want some simple info, we need the following getters: - -``` - getters: { - isLoggedIn: state => state.loginSuccess, - hasLoginErrored: state => state.loginError - } -``` - -#### Use vuex Store inside the Login component and forward to Protected.vue, if Login succeeded - -Instead of directly calling the auth endpoint via axios inside our Login component, we now want to use our vuex store and its actions instead. Therefore we don't even need to import the [store.js](frontend/src/store.js) inside our `Login.vue`, we can simply access it through `$store`. Thy is that? Because we already did that inside our [main.js](frontend/src/main.js): - -``` -import store from './store' - -... - -new Vue({ - router, - store, - render: h => h(App) -}).$mount('#app') -``` - -With that configuration `store` and `router` are accessible from within every Vue component with the `$` prefixed :) - -If we have a look into our `Login.vue` we see that in action: - -``` -callLogin() { - this.$store.dispatch('login', { user: this.user, password: this.password}) - .then(() => this.$router.push('/Protected')) - .catch(error => { - this.error.push(error) - }) - } -``` - -Here we access our vuex store action `login` and issue a login request to our Spring Boot backend. If this succeeds, we use the Vue `$router` to forward the user to our `Protected.vue` component. - - -#### Redirect user from Protected.vue to Login.vue, if not authenticated before - -Now let's enhance our [router.js](frontend/src/router.js) slightly. We use the Vue.js routers' [meta field](https://router.vuejs.org/guide/advanced/meta.html) feature to check, whether a user is loggin in already and therefore should be able to access our Protected component with the URI `/protected` : - -``` - { - path: '/protected', - component: Protected, - meta: { - requiresAuth: true - } - }, -``` - -We also add a new behavior to our router, that checks if it requires authentication every time a route is accessed. If so, it will redirect to our Login component: - -``` -router.beforeEach((to, from, next) => { - if (to.matched.some(record => record.meta.requiresAuth)) { - // this route requires auth, check if logged in - // if not, redirect to login page. - if (!store.getters.isLoggedIn) { - next({ - path: '/login' - }) - } else { - next(); - } - } else { - next(); // make sure to always call next()! - } -}); -``` - -Now if one clicks onto `Protected` and didn't login prior, our application redirects to `Login` automatically: - -![secure-spring-redirect-to-login](screenshots/secure-spring-redirect-to-login.gif) - -With this redirect, we also don't need the part with `
` inside our Login.vue, since in case of a successful login, the user is directly redirected to the Protected.vue. - - -## Check auth state at secured backend endpoints - -We're now already where we wanted to be at the first place: Our Spring Boot backend has a secured API endpoint, which works with simple user/password authentication. And our Vue.js frontend uses this endpoint to do a Login and protect the `Protected` component, if the user didn't log in before. The login state is held in the frontend, using the `vuex` store. - -Now if we want to go a step ahead and call a secured API endpoint in the backend from within our `Protected` frontend component, we need to fully store the credentials inside our `vuex` store, so we could access our secured resource - - - +-----------------------------------------------------------------------+ - | Vue.js frontend | - | +----------------------------------------+ | - | | vuex store | | - | +----------------------------------------+ | - | | | | - | +-----------------+ +-----------------+ +-----------------+ | - | | | | | | | | - | | | | Login.vue | | Protected | | - | | | | | | | | - | +-----------------+ +-----------------+ +-----------------+ | - | | | | - +-------------------------------------------|---------------|-----------+ - |-------------| | - +---+ +---+ +---+ - | | /api/hello | | /api/user | | /api/secured - +---+ +---+ +---+ - | | | - +-----------------------------------------------------------------------+ - | | - | | - | | - | | - | | - | | - | Spring Boot backend | - +-----------------------------------------------------------------------+ - -Therefore we enhance our [store.js](frontend/src/store.js): - -``` -export default new Vuex.Store({ - state: { - loginSuccess: false, - loginError: false, - userName: null, - userPass: null, - response: [] - }, - mutations: { - login_success(state, payload){ - state.loginSuccess = true; - state.userName = payload.userName; - state.userPass = payload.userPass; - }, - ... - }, - actions: { - login({commit}, {user, password}) { - ... - // place the loginSuccess state into our vuex store - commit('login_success', { - userName: user, - userPass: password - }); - ... - getters: { - isLoggedIn: state => state.loginSuccess, - hasLoginErrored: state => state.loginError, - getUserName: state => state.userName, - getUserPass: state => state.userPass - } -``` - -> Be sure to use the current way to define and [interact with vuex mutations](https://vuex.vuejs.org/guide/mutations.html). Lot's of blog posts are using an old way of committing multiple parameters like `commit('auth_success', token, user)`. This DOES NOT work anymore. Only the first parameter will be set, the others are lost! - -Now inside our [Protected.vue](frontend/src/components/Protected.vue), we can use the stored credentials to access our `/secured` endpoint: - -``` -