1

My application has two separate parts, back-end in Java (Spring boot) and front-end in Vuejs.

I can simply deploy the JAR for my back-end code where I need to, and that's it for deployment.

But when it comes to deploying the Vuejs app, I can do something similar and just put the compiled Vuejs application in the proper path in a Java Spring boot application and that will be all for the front-end too.

It just doesn't seem right to me to put that application in Spring boot when it doesn't really have to do anything with it really other than for deployment (Maybe I know nothing like Jon Snow).

Also, when its put under a Spring boot application, manual URL editing doesn't work.

This app doesn't do anything on its own, it fetches all its data from the back-end app.

So what are my options here, can someone please guide me in the right direction?

Do I just setup a nodejs server and deploy the Vuejs app in that? I am not sure how that works, or whether should I even be doing that for a production application. And if so, where do I start with setting up nodejs?

Improve this question

3 Answers 3

Reset to default
2

It makes sense to deploy it together with spring, and it's very common practice, at least from my experience with Angular (which I suppose would be very similar to VueJS). You don't need to have 2 servers running. You just let Spring server your HTML/js/CSS files, which helps you avoid any problems with CORS.

I am not really sure what 'URL manual editing', do you mean by navigating the web page by editing the URL? I don't see much use cases there tbh and I would guess that is only a matter of few settings.

In gradle - I would set up a build task (not sure if task is correct word, 2 build.gradle files, each for FE/BE, the BE would depend on FE), the FE would be run when BE is run, it creates static HTML/js (in my case from angular, but it should be similar for Vue) and BE task adds the output to the classpath of the java application so that Spring can register the HTML and serve it to you.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Yes, that's exactly what I mean by manual URL editing. Also when you open a link in a new tab, that also needs to be handled. You're right all of this could be handled but I thought maybe there's a way to do it that will take care of all of this. Thanks for your response though.
2

You could use Docker to create a Dockerized version of your Vue.js app and then you can deploy this onto a cloud service provider such as AWS (e.g. EC2).

Check out this link for a basic guide https://v2.vuejs.org/v2/cookbook/dockerize-vuejs-app.html

Improve this answer

3 Comments

This is a nice article, I'll try it out. Thanks
how would you recommend doing this on a production server? I can build this image on my local, and then push it to Docker hub, and from my production server run it. But private repos cost money. Do you have anything else in mind?
@nullpointer Typically I would use docker-compose on an EC2 instance on AWS
0

My approach is to deploy front-end and back-end separately.

You can use web-server to proxy requests to Vuejs or Spring boot.

For example, if you use Nginx, you can use this configuration to pass requests

# pass root request to index file
location / {
    root /front_files/;
    index /index.html;
}

# pass requests to static files
location ~ ^/(js|styles) {
    root /front_files/;
}

# pass requests to back-end
location /api/ {
    proxy_pass http://127.0.0.1:8080/;
}
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.