CODEWITHSUNDEEP
javascriptnode.jsvue.jsportvue-cli
Mick
Mick

Reputation: 97

Deploy an application that uses two ports

I'm implementing a web app with Vue. In my application I use Pusher to implement real time multi-user communication.

Locally, the application runs on "http://loocalhost:8080" and I set up a node.js server on "http://localhost:5000" that manages users subscription on the pusher shared channel and events sharing between them. The application works fine. Now I want to deploy it on an hosting server to make it working on the internet.

My problem is related to the need to use two different ports. In particular I don't know how to organize my "server.js" file to do this (or if platforms like Heroku" could support the use of two ports). Below I post my actual 'server.js' file. I hope you can help me.

const express = require('express')
const path = require('path')
const bodyParser = require('body-parser')
const app = express()
const Pusher = require('pusher')
const crypto = require('crypto')
const cors = require('cors')


//initialize Pusher with your appId, key and secret
const pusher = new Pusher({
   appId: '***',
key: '******',
secret: '*****',
cluster: 'eu',
useTLS: true
})

// Body parser middleware
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: false}))
app.use(cors())
// The code below helps to fix any potential CORS issue.
app.use((req, res, next) => {
  // Website you wish to allow to connect
  res.setHeader('Access-Control-Allow-Origin', '*')
  // Request methods you wish to allow
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE')
  // Request headers you wish to allow
  res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type')

  // Set to true if you need the website to include cookies in the requests sent
  // to the API (e.g. in case you use sessions)
  res.setHeader('Access-Control-Allow-Credentials', false)
  // Pass to next layer of middleware
  next()
})

// Index API route for the Express app
app.get('/', (req, res) => {
  res.send('Welcome')
})

// API route used by Pusher as a way of authenticating users
app.post('/pusher/auth', (req, res) => {
  let socketId = req.body.socket_id
  let channel = req.body.channel_name
  // Generate a random string and use as presence channel user_id
  let presenceData = {
    user_id: crypto.randomBytes(16).toString('hex')
  }
  let auth = pusher.authenticate(socketId, channel, presenceData)
  res.send(auth)
})

// Set port to be used by Node.js
app.set('port', (5000))

app.listen(app.get('port'), () => {
  console.log('Node app is running on port', app.get('port'))
})

Upvotes: 1

Views: 1143

Answers (1)

Dan
Dan

Reputation: 63139

You're using Vue, so in development, the frontend is being served locally by Webpack's devServer on port 8080. You're also running a node server in development which simulates the API portion of your production server.

In actual production, there is no need for 2 servers or 2 ports. In production, you don't need a dedicated server for your frontend. That's just for rapid and convenient development. Have the node production server serve the frontend as well. Something like this depending on your server structure:

// Static assets
app.use(express.static(path.join(__dirname, 'dist')));

Heroku doesn't support multiple ports, and you don't need them. It's possible (and normal) to serve both backend and frontend from one domain.

Upvotes: 1

Related Questions