title: How to set React app and API on same port?
body: <p>I've got a React app that via an API pulls data from a separate database. </p>
  
  <p>When I run it locally, the app is one port and the API is on another port.</p>
  
  <p>Since when I make AJAX calls in the app to the API, I need to include the URL where the API can connect. </p>
  
  <p>It works if I hardcode the separate port (e.g., the app is on <a href="http://localhost:3000" rel="noreferrer">http://localhost:3000</a> and the API on <a href="http://localhost:3100" rel="noreferrer">http://localhost:3100</a>, making the AJAX url call to the API <a href="http://localhost:3100/api/trusts" rel="noreferrer">http://localhost:3100/api/trusts</a>).</p>
  
  <p>However, since the app and API are on different ports, I can't make the AJAX url a relative path because it erroneously sends the AJAX call to <a href="http://localhost:3000/api/trusts" rel="noreferrer">http://localhost:3000/api/trusts</a> and not <a href="http://localhost:3100/api/trusts" rel="noreferrer">http://localhost:3100/api/trusts</a>.  </p>
  
  <p>How do I get them to run on the same port? </p>
  
  <p>Thanks! </p>
  
  <p>Here's my server.js:</p>
  
  <pre><code>var express = require('express');
  var bodyParser = require('body-parser');
  var mongoose = require('mongoose');
  var path = require('path');
  var app = express();
  var router = express.Router();
  var mongoose = require('mongoose');
  var Schema = mongoose.Schema;
  
  //set our port to either a predetermined port number if you have set it up, or 3001
  var port = process.env.PORT || 5656;
  
  //db config
  var mongoDB = 'mongodb://XXX:XXX!@XXX.mlab.com:XXX/XXX';
  mongoose.connect(mongoDB);
  var db = mongoose.connection;
  db.on('error', console.error.bind(console, 'MongoDB connection error:'));
  
  //body parsing
  app.use(bodyParser.json());
  app.use(bodyParser.urlencoded({ extended: true }));
  
  // allow cross-browser
  app.use(function(req, res, next) {
    res.setHeader('Access-Control-Allow-Origin', '*');
    next();
  });
  
  // handling static assets
  app.use(express.static(path.join(__dirname, 'build')));
  
  // api handling
  var TrustsSchema = new Schema({
    id: String,
    name: String
  });
  
  var Trust = mongoose.model('Trust', TrustsSchema);
  
  const trustRouter = express.Router();
  
  trustRouter
      .get('/', (req,res) =&gt; {
  
        Trust.find(function(err, trusts) {
          if (err) {
            res.send(err);
          }
          res.json(trusts)
        });
      });
  
  app.use('/api/trusts', trustRouter);
  
  
  //now  we can set the route path &amp; initialize the API
  router.get('/', function(req, res) {
    res.json({ message: 'API Initialized!'});
  });
  
  app.get('/*', function (req, res) {
     res.sendFile(path.join(__dirname, 'build', 'index.html'));
   });
  
  app.listen(port, function() {
    console.log(`api running on port ${port}`);
  });
  </code></pre>
  
  <p>Below is the AJAX call I'm trying to make that doesn't work because the relative path is appended to the app's port (i.e., <a href="http://localhost:3000/" rel="noreferrer">http://localhost:3000/</a>) and not the API's port (i.e., <a href="http://localhost:3100/" rel="noreferrer">http://localhost:3100/</a>):</p>
  
  <pre><code>axios.get("/api/trusts")
    .then(res =&gt; {
      this.setState({trusts: res.data});
    })
    .catch(console.error);
  </code></pre>