title: Running frontend and backend on the same port
body: <p>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. </p>
  
  <p>The frontend is written using <strong>Vue.js</strong> so it's a <em>SPA</em>. This webapp is kind of complex and involves a lot of routing and backend <strong>AJAX</strong> API calls.</p>
  
  <pre><code>// All imports
  import ...
  
  loadMap(Highcharts);
  loadDrilldown(Highcharts);
  boost(Highcharts);
  
  Vue.config.productionTip = false
  
  Vue.use(VueCookie);
  Vue.use(ElementUI, {locale});
  Vue.use(VueRouter);
  Vue.use(VueHighcharts, {Highcharts });
  Vue.use(HighMaps);
  
  // 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: '&lt;App/&gt;'
  })
  </code></pre>
  
  <p>The backend is written using <strong>Express</strong> on <strong>Node.js</strong> and it answers to specific <strong>AJAX</strong> calls from the <em>Frontend</em>.</p>
  
  <pre><code>// All imports
  import ...
  
  function prepareApp() {
      let app = new Express();
  
      app.use(cors({
          origin: "*",
          allowedHeaders: "Content-type",
          methods: "GET,POST,PUT,DELETE,OPTIONS" }));
  
      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");
          next();
      });
  
      app.use(helmet());
      app.use(bodyParser.json());
      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
      app.post('/customQuery', stats.query);
      app.post('/statistics', stats.statistics)
      app.post('/getUserInfo', stats.getUserInfo)
      app.post('/setUserInfo', stats.setUserInfo)
      app.post('/genericQuery', stats.genericQuery)
      app.post('/NOSQLQuery', stats.NOSQLQuery)
  
      // Users check and insertion
      app.get('/insertUser', stats.insertUser)
      app.post('/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, () =&gt; {
      console.log("App listening on http://localhost:8080");
  });
  </code></pre>
  
  <p>I only used this setup during development so I had <em>both</em> running at the same time on localhost with a different port for both. Now I would like to start the <strong>production</strong> cycle but I have no idea where to start.</p>
  
  <p>Most importantly I am deploying both applications onto a <strong>V</strong>irtual <strong>M</strong>achine 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 <strong>80</strong> and the port <strong>443</strong>. 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 <strong>while still using a single port</strong>.</p>
  
  <p>I hope I explained the problem kinda well. Looking forward to a nice (and maybe long) answer.</p>