Build a Simple CRUD App with Spring Boot and Vue.js

Developer Blog Comments
1

Build a Simple CRUD App with Spring Boot and Vue.js

Create a CRUD (create, read, update, and delete) application using Spring Boot and Vue.js.

2

Raslan Ismail

why should i use yarn?!!

3

Matt Raible

You can use npm if you’d prefer. I like yarn because if you specify a version number, it adds that exact version rather than a range. It also allows you to run your scripts with ”yarn {scriptName}” instead of ”npm run {scriptName}”.

4

jdd540

Awesome tut, first of all.
Secondly, I’m having issues with the serve configuration after adding Axios and/or vuejs-logger. The project runs fine until i add those, but after adding them and running yarn run serve I get the following error message:
‘vue-cli-service’ is not recognized as an internal or external command,
operable program or batch file.
Any help with this would be greatly appreciated

5

Matt Raible

Whenever I see dependencies that were there, and now aren’t, I try running npm install. Can you please try that and let us know if it works?

6

Draško Kokić

Any recommendations how to deploy the client (Vue) app within the server (Spring Boot) app? Simply coping the client/dist into server/src/main/resources/public?

7

Matt Raible

See https://developer.okta.com/…. The steps should be similar.

8

Matt Raible

Did you follow the steps to create a TodoRepository and RestRepositoryConfigurator? If so, can you please try comparing your code with the example on GitHub?

9

Matt Raible

Can you please try comparing your code with the example on GitHub?

10

Matt Raible

Since Todo.java uses Lombok, I’m guessing you don’t have annotation processing configured and that’s why it’s not working. I just tried the following and it worked fine for me.


git clone GitHub - oktadev/okta-spring-boot-vue-crud-example: A Todo App that showcases Spring Boot, Vue.js, and Okta's support for both.
cd okta-spring-boot-vue-crud-example/server
./gradlew bootRun

11

Duodécimo Fernandes

Up to creating vue.js application all went well.
But after implementing load data from server, I’m getting a CORS error:
localhost/:1 Access to XMLHttpRequest at ‘http://localhost:9090/todos’ from origin ‘http://localhost:8081’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
(I am just using alternatives ports for client and server, but I think that should not be an issue …)
I have adjusted teh fix CORS errors:
…
CorsConfiguration config = new CorsConfiguration();
config.setAllowCredentials(true);
// *** URL below needs to match the Vue client URL and port ***
config.setAllowedOrigins(Collections.singletonList(“http://localhost:8081”));
…
I’d love to complete this tutorial, any help will be appretiated!
Chers!

12

Duodécimo Fernandes

I apologize, my mistake:
I did indeed corrected client url (changing from 8080 to 8081, that I am using), but I forgot to rerun the server to accomodate the changes.
After server relaunch all worked fine!

13

Alexander Peshkov

Perfect presentation, thank you.
However I have an issue with the first (after replacing style.css and extending index.html) - when i ‘yarn serve’ client server is up

DONE Compiled successfully in 195ms

App running at:
- Local: http://localhost:8080/
- Network: http://192.168.1.70:8080/

i have a blank index page : localhost:8080

Front and backend are compiled well and get up, but the issue still persists

I guess i shall take a look at Todos.vue

14

Matt Raible

Hello Alexander,

Do you see any errors in your browser’s developer console that indicates what the problem might be?

You might try comparing your code to the example on GitHub. The project’s README has instructions on how to clone, configure, and run the app.

15

suryalistic

Can you share whats the typo? I have the same issue.
I compared code on github. There is a difference between the article and the code on github.
On Github: RestRepositoryConfigurator extends RepositoryRestConfigurerAdapter
from article: RestRepositoryConfigurator implements RepositoryRestConfigurer
Does that matter?
I dont see the “todos” link from GET response.

16

Andrew Hughes

RepositoryRestConfigurerAdapter is just a slightly older. The repo uses Spring 2.0.6. The tutorial is more up to date (2.1.0). However, both should work, and all the class does is configure the REST API to expose IDs in the JSON. Neither will affect the basic function of the Spring Data REST service.

I just tested the code again and it works for me. Make sure you stopped and re-started your spring boot project, and that you created both the Todo.java resource class and the TodoRepository.java repository class. Otherwise, what version of Java are you on? Can you post your code somewhere so that I can try it out?

17

Ivan

For me, the issue was the packaging of the SpringBootVueApplication.java file. It was under a different package than my Todo.java file. To fix it, I moved the SpringBootVueApplication class under the same package as Todo.java (and the others).

18

Ivan

Same issue and fix for me. +1

19

john allen

building and running just fine (but not loading from the api) … so thought oh i missed the Cors code for 8080… so added in and then tomcat failed to start … and bean instatiation failures

first trip is "org.springframework.context.ApplicationContextException: Unable to start web server; nested exception is org.springframework.boot.web.server.WebServerException: Unable to start embedded Tomcat
…

any clues ? stumped… server starts and API is fine in temrinal and works without the Cors code … BUT Todo fails to load the API data. double checked all code in this page… I’m fairly precise when following to the letter instructions

20

Matt Raible

Make sure you’re not importing the reactive CORS classes from Spring.