3

I am working on a web application with a create-react-app frontend and a Flask API backend with Flask-RESTful. I built the app locally and it works on my computer, but now I am unsuccessfully trying to deploy it to Heroku.

I deployed the Flask backend and the React frontend as two different Heroku dynos, so each one has their own URL. When I go to the URL for the frontend, it appears to be working fine, and the backend URL seems to work too. However, the app relies on API calls to the backend, and I am having trouble successfully sending requests to my backend.

When I was working locally, I would run the flask backend with the gunicorn --bind 0.0.0.0:8000 app:app and the frontend with the npm start command. The app worked fine with relative calls in my Axios function calls as long as I put "proxy": "https://localhost:8000" in my package.json file in my frontend app. In general, I followed this tutorial: https://www.fullstackreact.com/articles/using-create-react-app-with-a-server/.

I thought I could simply edit the proxy field in the package.json file to point to the URL of my backend Heroku app, and then I wouldn't have to change anything else. However, when I deploy using this, I find that the requests to my endpoint are being made to https://my-frontend-app.herokuapp.com/<endpoint> instead of https://my-backend-app.herokuapp.com/<endpoint>.

Here is my package.json:

{
  "name": "heroku-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "axios": "^0.18.0",
    "bootstrap": "^4.1.2",
    "plotly.js": "^1.39.2",
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "react-plotly.js": "^2.2.0",
    "react-scripts": "1.1.4",
    "reactstrap": "^6.3.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "proxy": "https://star-employees-api.herokuapp.com"
}

My requests look like this:

axios.get('/analyze', data)
.then((response) => {
    // Handle request response here
};

Can anyone tell me what I'm doing wrong here? This is my first time deploying an app like this and using Heroku, so I'm not sure if I'm way off base here. If there is a better way to deploy this kind of app, please let me know as well. I can provide any other code snippets or file structure if it's helpful, just not sure what would be helpful at this point. Thanks in advance.

pomtree
  • 148
  • 2
  • 10
  • 2
    The `proxy` field is only used for the Webpack dev server in development. You must configure your production server separately. – Tholle Aug 11 '18 at 22:21
  • @Tholle I see, are there any resources for how to do this? Based on my very rudimentary research, I need to use something like nginx to take the place of the webpack dev server? Thanks for your help! – pomtree Aug 11 '18 at 22:27
  • I have never hosted anything on heroku myself, but if you can use nginx [this might be wroth a try](https://serverfault.com/questions/857348/nginx-serving-a-create-react-app-application-on-one-port-and-my-api-on-another). – Tholle Aug 11 '18 at 22:45
  • 1
    It looks like the create-react-app-buildpack for Heroku I'm using contains this kind of functionality out of the box as mentioned here: https://github.com/mars/create-react-app-buildpack#proxy I followed the instructions but it is still not working for me. I'll post an issue on GitHub and post an answer if I find a solution. – pomtree Aug 12 '18 at 19:16

1 Answers1

3

I managed to figure it out. As Tholle mentioned, the proxy field in the package.json file is only for the dev server. If you're using create-react-app with Heroku and the buildpack, there are some other steps. When deploying, you need to follow the instructions here and add a static.json file in your topmost directory.

pomtree
  • 148
  • 2
  • 10
  • How would you go about setting this up if you were running both server and client on the same dyno? – Destaq Aug 02 '20 at 18:48