Proxy $PORT value from create-react-app in a child directory

[jsphkm]

I'm working on a repo which is serving a create-react-app from a node endpoint. So, the react app is nested as a child directory:

.
├── Procfile
├── frontend
│   ├── README.md
│   ├── build
│   ├── package.json <---- "proxy": "http://localhost:$PORT" 
│   ├── public 
│   ├── src
│   │   ├── App.css
│   │   ├── App.js
│   │   └── // etc...
│   └── .env <----- frontend env file, removed PORT value from here
├── package.json
├── src
│   ├── app.js
│   ├── server.js
│   └── // etc...
├── .env <--- backend env file, PORT=9000 for node
├── static.json
└── yarn.lock

With port value removed from the .env file, CRA runs on port 3000. If I hardcode port 9000 instead of $PORT, then the proxy works properly in development.

However, when deploying to production, I want the frontend to proxy Heroku's dynamic port number, this is one example:

Heroku seems to ignore the port value even if I intentionally define it in the env in their website, with a value of 9000.

My question is how do I define the proxy on the frontend without having CRA to instance at that port number, e.g. apply PORT=9000 in the frontend .env but have CRA load at port 3000.

I've tried defining the port number in the script, while making sure that I've defined PORT=9000 in the frontend env:

  "scripts": {
    "start": "export PORT=3000 && react-scripts start",

CRA will load at 3000, but I get a proxy error: