Vue SPA with Spring Boot, separate or not

Question

What is the difference between writing Spring boot REST API backed SPA

1. inside one project, javascript served from Spring's app server
2. two projects, Spring backend server app and javascript frontend in separate node server

Are there any benefits of the first over the other other. For me separate project are more clean. I'm pretty new to javascript so I'm affraid to clutter the java project with all the folder, files and javascript build processes. Also there are more i.e. separate vuejs templates than vuejs-spring-boot templates.

Is there any way, to somehow connect both solutions, by generating one js file for the SPA and serv it from Spring.

Regarding authentication I can utilize Spring MVC in first option, the second one is asking for some token authentication.

Answer 1

Is there any way, to somehow connect both solutions, by generating one js file for the SPA and serv it from Spring.

You can copy the dist content into src/main/resources in SpringBoot:

npm run build

And that HTML/JS will be served from Spring.
However, this process is take time and not fits with daily development.
During development, you can let dev server proxy all API request to the actual backend:

`

// config/index.js
module.exports = {
  // ...
  dev: {
    proxyTable: {
      // proxy all requests starting with /api to jsonplaceholder
      '/api': {
        target: 'http://jsonplaceholder.typicode.com:8000', // <-- Spring app running here
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

` Refer: https://vuejs-templates.github.io/webpack/proxy.html

The above example will proxy the request /api/posts/1 to http://jsonplaceholder.typicode.com/posts/1.

So, in client side, you can develop normally, and run in dev mode npm run dev

Hope this help!

Answer 2

You can use both ways,but separating the frontend from backend will make your application reusable.

I mean if you want your vue.js project to connect with another api for example with Laravel,then you have to make only the backend and let your frontend as it is.

In the other hand you can keep your api backend as it is and for frontend you can use angular or react.So then you have to make only the frontend and let your api as it is.

Also in my opinion it is great to use separate project when you working on group.Because it is more clear and gives you flexibility to manage the frontend and backend easily.

Actually i am working on project and i am making the frontend and someone else is making the backend.

I always prefer to separate backend from frontend so in my opinion that is the best way.But ofcourse you can use both ways.