How to serve a Node.js and Vue.js app together?

user_12173228 0
Viewed 656

I realize that there have been similar questions asked here, but I sort of need things to be spelled out for me.

I have a VPS (through Vultr), which currently hosts a frontend Vue.js app on port 8080, and a backend Node.js (with Express) app on port 5000. The main directory is divided like so:

  • ./client
    • frontend Vue.js files
  • ./server
    • backend Node.js files

The frontend app includes a contact form, which upon submit makes an axios POST request to the backend app. The backend app then uses Nodemailer and a Gmail account to send an email with the form's submitted information.

As it stands, I have to run my Vue.js app and my Node.app at the same time on different ports. This seems strange to me, considering that they're really just parts of one cohesive app, and my goal is to eventually host it as a website on port 80. With this in mind, I'd like to ask what the standard practice would be for hosting the frontend Vue.js app and the backend Node.js app together.

Thank in advance for any replies.

vue.js node.js javascript
1 Answers

Try to think about it in this way that Vue.js is another js library. So if all the code for Vue templates can be bundled in a single file, then you can use that file in your index.html( I hope you know how to host a basic static page using express). The thing you require here is a "package bundler" like webpack or gulp. A package bundler helps you to compress and bundle your code. So just bundle all your vue files into a single javascript file and use it. I apologize for not being able to spell out the things for you I hope it helps.

user_102833760
Related