Will be using Java 8.
Generate jar file:
mvn clean package
Output: runnable .jar file.
Vue.js front managed using webpack which consumes the greeting API defined on Chapter-1.
Run server during development (available on localhost:8181):
npm run serve
Generate frontend files:
cd frontend
npm run build
Output: frontend ready files on frontend/dist
Get greeting from HTTP API and display it on frontend.
The API will be queried using axios and front rendered by Vue.
Output: frontend loading the content of the greeting from server
Integrate Vue development (frontend) with backend development with the aim of distributing an standalone .jar file which includes both frontend and backend inside it.
As a result:
- Node and npm binaries are setup at a level project avoiding problems between setups on development teams.
- During development stage frontend code is run with
npm run serveon localhost:8181 and proxy-passes all traffic pointing to /api to port localhost:8080 (Springboot backend). - On build and packaging stage, frontend is built first, then backend copies all code from frontends build output to the resources folder and packages.
Output: output jar file serves both backend and frontend
Setup a PostgreSQL database for persistence and manage schema migrations with Flyway.
Important note, remember to add to your pom.xml jpa dependecy:
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
Output: docker file with the database definition and first migration for a table run on project build.
- Setup jOOQ as object-database mapping tool.
- API call that returns all predictions from database.
- Front renders all predictions.
Tip:
Sample prediction to insert to database:
INSERT INTO prediction (title, body, deadline) VALUES ('Hello world', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum pellentesque tortor, vitae porta turpis rutrum non. Sed elit mi, aliquam vitae ullamcorper ac, rutrum sed lacus. In finibus lectus bibendum, efficitur nisi sit amet, eleifend dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit.', '2020-12-31');
Output: on build database tables related objects are generated. Use of those objects is out of scope.
Enable security using JWT
Following this guide
Output: /profile will be displayed only if user is logged in (login and then using token).
Make Vue display a /user page with dummy content but which can be only seen if the user is logged in.
Post a prediction and register it asociated with the user.
Following this guide
Also this guide
Included migration to Vuex4 + Vue Router 4.
Output: /user displays dummy content if the user is logged in, if not redirects to /login
To be done in the future.