The issue I am having is my React application hosted on Heroku is calling "<https://localhost:8000>" for it's calls to the Express server.

I have the `proxy` in `package.json` set to `https://localhost:8000` to call my Express server. From my understanding this is all I need to do and Heroku handles the connection when it is deployed.

When I go to my endpoint like so: `https://heroku-app.herokuapp.com/v1/products/:productid` my Express server successfully sends back JSON data in the browser, so I do know my Node server is up and running on Heroku. The issue seems to be the React app `proxy` is not calling the Heroku URL post-deploy.

Here is my React apps `package.json`:

```
  {
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "proxy": "http://localhost:8000/",
  "devDependencies": {
    "enzyme-matchers": "^7.0.2"
  }
}

```

This is the `package.json` file for my server:

```
{
  "name": "stub_boilerplate",
  "version": "1.0.0",
  "description": "Quick Stub",
  "main": "server.js",
  "scripts": {
    "test": "jest",
    "start": "node server/server.js",
    "heroku-postbuild": "cd client && npm install --only=dev && npm install && npm run build"
  },
  "engines": {
    "node": "~9.10.1",
    "npm": "~5.6.0"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/manm/xxx.git"
  },
  "author": "Maison M",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/maonm/xxx/issues"
  }
}

```

Here is my `server.js` file. I am setting the `port` to `process.env.PORT || 8000`:

```
const express = require('express');
const app = express();
const port = process.env.PORT || 8000;

//Allows access to enviroment variables in development
require('dotenv').config({ path: __dirname + '/.env' });

//Middleware
app.use(express.urlencoded({ extended: true }));
app.use(express.json());
app.use(methodOverride('_method'));

//Serve build folder of client
app.use(express.static(path.join(__dirname, '../client/build')));

app.use('/v1/products', product_routes);

//Error handling
app.use(errorHandler);

//Initialize Express server
app.listen(port, err => {
  if (err) console.info(`Error: The server failed to start on ${port}`);
  else console.info(`****** Node server is running on ${port} ******`);
});

```

This is the fetch() request inside of the component:

```
  componentDidMount() {
    this.fetchStripePlans();
  }

  fetchStripePlans = () => {
    const stripeProduct = 'prod_FlXXXXXBVn8'; //QS (product)
    const url = `http://localhost:8000/v1/products/${stripeProduct}`;
    const fetchConfig = {
      method: 'GET',
      headers: {
        'content-type': 'application/json'
      }
    };

    fetch(url, fetchConfig)
      .then(data => data.json())
      .then(stripe => {
        const { data } = stripe;
        this.setState({
          stripePlans: data
        });
      })
      .catch(err => {
        this.setState({
          error: true,
          errorMessage: err.genericError
        });
      });
  };

```

This is what I am seeing in the console of the React app:

```
SignUpContainer.js:48 OPTIONS http://localhost:8000/v1/products/prod_FRon8 net::ERR_CONNECTION_REFUSED

```

So to me logically, it's not being routed to the Heroku URL. I've scoured a few tutorials on deploying React/Express projects to Heroku and all of them leave the React `proxy` set to the local host of the Express server. So I am not too sure what is happening here.