express node.js production vue.js

Running frontend and backend on the same port

I am having a problem today that has something to do with routing. I have two main codes: one is the frontend and the other one is the backend.

The frontend is written using Vue.js so it’s a SPA. This webapp is kind of complex and involves a lot of routing and backend AJAX API calls.

// All imports
import ...
Vue.config.productionTip = false
Vue.use(ElementUI, {locale});
Vue.use(VueHighcharts, {Highcharts });
// This is a global component declaration
Vue.component('app-oven', Devices);
Vue.component('app-sidebar', SideBar);
Vue.component('app-header', Header);
Vue.component('app-footer', Footer);
Vue.component('app-query', Query);
Vue.component('app-deviceproperties', DeviceProperties);
Vue.component('app-device', Device)
Vue.component('app-queryselection', QuerySelection)
Vue.component('app-index', Index)
Vue.component('app-index', Error)
Vue.component('app-realtime', RealTime);
Vue.component('app-login', Login)
Vue.component('app-preferences', Preferences)
const routes = [
{ path: '/index', component: Index},
{ path: '/', component: Login},
{ path: '/device/:deviceId', component: Device},
{ path: '/preferences', component: Preferences},
{ path: '*', component: Error}
const router = new VueRouter({
routes: routes,
mode: "history" // Gets rid of the # before the path
new Vue({
el: '#app',
router: router,
components: { App },
template: '<App/>'

The backend is written using Express on Node.js and it answers to specific AJAX calls from the Frontend.

// All imports
import ...
function prepareApp() {
let app = new Express();
origin: "*",
allowedHeaders: "Content-type",
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
app.use(bodyParser.urlencoded({extended: false}));
// Get all parameters
app.get('/params', params.parameters);
// Get all devices ever seen on the databases
app.get('/devices', params.devices);
app.get('/organizeData', organizer.updateAll);
// WebApp used services to access various things'/customQuery', stats.query);'/statistics', stats.statistics)'/getUserInfo', stats.getUserInfo)'/setUserInfo', stats.setUserInfo)'/genericQuery', stats.genericQuery)'/NOSQLQuery', stats.NOSQLQuery)
// Users check and insertion
app.get('/insertUser', stats.insertUser)'/verifyUser', stats.verifyUser)
app.get('/', errors.hello); // Returns a normal "hello" page
app.get('*', errors.error404); // Catch 404 and forward to error handler
app.use(errors.error); // Other errors handler
return app;
let app = prepareApp();
//App listener on localhost:8080
app.listen(8080, () => {
console.log("App listening on http://localhost:8080");

I only used this setup during development so I had both running at the same time on localhost with a different port for both. Now I would like to start the production cycle but I have no idea where to start.

Most importantly I am deploying both applications onto a Virtual Machine that is running on an external server. It already has a DNS association and a static IP address so that is already covered.
The problem arises when I try to run both programs at the same time on this production machine since its open ports are only the port 80 and the port 443. I think this is pretty normal in a production environment but I don’t know how to adapt my applications so that they can still talk to each other and retrieve useful information from the Database while still using a single port.

I hope I explained the problem kinda well. Looking forward to a nice (and maybe long) answer.