Vue with own backend code on server (Node.js+Vue.js)

Question

So... for my job I am making a software solution that helps our employees have a centralized location to do their work on since we'll be transitioning to a Microsoft 365/Azure environment. My co-workers and I decided to use Vue.js as a way to control the view of the applications whereas Node.js is handling the backend.

The things we do:

Single-Signon via MSAL (this is already working)
Dynamic Module loading (this also works, we're able to upload, update, remove backend functionality without having to restart the server)

What we're looking for:

Since we use MSAL for SSO and this code need to run on any page of the software package we've opted for an SPA as there is always the same code that needs to be ran regardless of what URI you are on, this way we have a 'main page' and the individual applications load in through Vue-router
A way to dynamically create the Vue-router depending on the list of applications we add.

The issue:

And now that I've given some information, we finally get to the part where I ask the question.

Due to constraints put on us from the higher-ups we are only getting 1 port available to us (port 443), this meant that (by what we could find online) that Vue-cli is pretty much out of the question since we have our own backend code that needs to run as well. This means our own backend server needs to serve the vue page(s), therefore losing some functionality we get from Vue-cli.

That being said, we made Vue-router work by using the CDN library in our testing, but this comes with the issue that we can't access the data from the parent, which is something we need to be able to access since we need to be able to use the upper layer code for our requests to get data.

So for the actual question:

Is there a way use Vue-cli AND your own backend code on the same Node process?
If not, how can we use Vue-router and Vue-components and access parent data without having to use Vue-cli to build our application for us?

On both these questions we've failed to find any results by looking it up for ourselves, nor have we've been able to make this work by creating our own code (we're all fairly new to Vue, so we don't know the ins and outs yet).

I hope someone here can help us out on either of those 2 questions.

how do you mean Vue-cli an backend code on same node process? if you build an vue app with vue-cli, you first develope it, build it, then it creates an folder called dist. everything thats inside you upload to your server. its 1 index.html with some js and css folders — Ilijanovic
– Ilijanovic, Commented Jun 16, 2020 at 6:45
you might be after of something an MEVN stack, check this out, might help : youtube.com/watch?v=j55fHUJqtyw&t=1110s — Karl L
– Karl L, Commented Jun 16, 2020 at 6:54
@ifaruki our current situation does not allow us to build it like that, we have to be able to add pages at run time whenever we add a new app. user9879287 Thanks. I'll give that series a look. — AlexSNorth
– AlexSNorth, Commented Jun 16, 2020 at 7:00

Indyz · Accepted Answer · 2020-06-16 07:09:02Z

0

As Ifaruki commented the result of the vue-cli in the end is the dist-folder. In the folder there's a index.html and all the files, like js and css, that's needed to run the frontend.

How you serve this index.html in the end is up to you, so for example, if your backend runs Express, you can build you Vue-dist-folder to somewhere your Express application can reach it and serve it when the user tries to reach it.

app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist', 'index.html'));
});

This will serve the page when the user GET the / route. This is a simple example but it's the generall idea.

Another option would be to maybe run Vue Nuxt instead of Vue. Nuxt is a server-side-rendered framework that uses Vue. This means that you could build it more into the backend and maybe split into a /web and /api namespace for the routes.

Since it's generally not possible to run two processes on the same port this kind of solution is the only one i can think of.

answered Jun 16, 2020 at 7:09

Indyz

3313 silver badges7 bronze badges

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

1 Comment

AlexSNorth Over a year ago

This looks interesting, I'll give it a look!

Collectives™ on Stack Overflow

Vue with own backend code on server (Node.js+Vue.js)

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related