CODEWITHSUNDEEP
node.jsexpressvue.jsroutesport
codebot
codebot

Reputation: 707

Node with Vue, different ports for requests and API

I have a project that is based on node and has Vue as a front-end.

In my app.js file in node I have

if(process.env.NODE_ENV === 'production'){
    //static folder
    app.use(express.static(path.join(__dirname,'public'))); 
    //handle SPA
    app.get(/.*/, (req, res)=>{
        res.sendFile(__dirname + '/public/index.html');
    });
}

and then 

const port = process.env.PORT || 4000;
app.listen(port, ()=>{
    console.log('Server runs on port ', port);
});

So, node listens on port 4000 and all incoming requests (from port 4000) go to '/public/index.html' to get served by vue

In my vue.config.js I have 

const path = require('path');

module.exports = {
    outputDir : path.resolve(__dirname, '..public'),
    devServer:{
        proxy:{
            '/*':{
                target:'http://localhost:5000'
            }
        }
    }
}

Everything works fine for now, but please help me understand the following

How can I have node listening to a port (eg 80) and then all other node api endpoints in another port (eg 4000) ?

I want all incoming requests to go to port 80, then still go to '/public/index.html', so Vue can take over.

But , the node endpoints Vue uses to GET and POST data , I want them to still be in port 4000, const basicUrl = 'http://awesomeness:4000/';

How can I do that ?

Thanks

Upvotes: 0

Views: 903

Answers (1)

mJehanno
mJehanno

Reputation: 866

You may need to create 2 express App as shown in the link below :

NodeJS Express - separate routes on two ports

The first one will listen to port 80 and will return the index.html file.

The other one will listen to 4000 and handle request from your Vue app.

Upvotes: 1

Related Questions