3

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.

Improve this question
7
  • Is this SPA? What's the role of backend? If it's REST only then it should be mounted to /api or subdomain. Commented Oct 6, 2019 at 18:43
  • it depends whether your app uses router, if so you will need to serve index.html always, independant of the route. You will probably need some libary on server if you are using history mode. Commented Oct 6, 2019 at 18:43
  • this is libary i used when tried ti achive same thing.npmjs.com/package/express-history-api-fallback Commented Oct 6, 2019 at 18:45
  • @MladenSkrbic Thank you. It's a single-page app, so it does not use router. Commented Oct 6, 2019 at 19:18
  • i dont think you understand what spa is... singla page apps do use router provides by their framework Commented Oct 6, 2019 at 19:40

1 Answer 1

Reset to default
1

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.

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

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.