使用Java和Vue创建Web应用程序的更好方法

Question

I'm starting to get into web development a little more. Currently I use the Spark Framework along with Vue for the few apps I've made. While this certainly works it's not ideal.

The project is built with Maven (and NPM for Vue) and the build process looks something like this.

1. Maven packages the Spark Framework Java application
2. Maven (with the frontend-maven-plugin) downloads node/npm and builds the Vue frontend
3. Maven copies the compiled resources into the jar as static assets

So the filesystem looks something like this

/src/main/java (Spark Framework)

/src/main/resources (Vue)

This leads to a couple of annoyances.

1. Everything is in one repository. Ideally I'd be able to have a separate repo for each layer of the project (One for Java, one for Vue)
2. Development workflow isn't ideal. If I just want to test the Java part of the app, I still spend time compiling the frontend (Vue)
3. A minor issue, but while working in an IDE, I'm dealing with deeply nested folders. Anytime I want to edit the frontend, my folder structure looks something like /src/main/resources/project-vue/

Here's one of my projects that uses this model

So my question is: What's a better way to structure my application?

Answer 1

I've had a few months to think and in that time I've created a few more applications with Vue, here's the workflow I've started to take.

I create a GitHub organization for any project that has more than one layer. For example, many of my projects have a REST API written in Java or JavaScript, and a web interface with Vue. This organization will contain a repository for each layer. Here's a link to an organization that follows this idea.

This allows me to separate my backend and frontend, but it complicated deployment. I can no longer serve my Vue files with the same web server as the API, but upon further thought that's probably a good thing.

With this pattern I can host my static Vue site on Amazon S3 which is extremely cheap, and use free dynos with Heroku to host my API.