score:9
so! it turns out heroku support team was incorrect in their analysis of my application. my application is built in two different ways (one for production as well as for development). using npm run start
[see static/package.json] on local utilizes hot reloading and benefits from faster local changes via server.js. however, in a production environment, you want to use a compressed bundle.js file so my goal was to use npm run build:production
[see static/package.json].
the issue i was running into was syntaxerror: expected expression, got '< bundle.js:1
in the console and it seemed to me that bundle.js wasn't loading at all. i listed a series of valid questions above on why i thought that might happen, but they all assumed that the main problem was an inability to run my react application at the same time as my flask application.
i was totally wrong. i didn't need to run server.js at all. the real reason that index.html and flask/python wasn't able to find my bundle.js and load the frontend on production was because of a mistake in the config.py
file within flask which i never thought to post.
flask has a very particular configuration that allows static_folder
to be defined and template_folder
. a while back i had swapped my static_folder for another directory while working on some image upload functionality. the reason i never caught it is because on local i run server.js for hot reloading so i never saw the compressed bundle.js file error out.
after fixing this mistake, i pushed to heroku and amazingly...it worked on the first try!
here's the correct code that fixed it:
app = flask(__name__, static_folder="./static/dist", template_folder="./static")
in closing whilst running a flask/react application on heroku:
- use multi buildpacks (one for node, one for python).
- use your procfile to load only the flask side.
- you need a package.json file in your root directory...even if you have another in your static folder like me.
- use webpack to compress your react code and serve it up in a compressed way.
- use
render_template
with flask to render the index.html file that holds youroot
div for react. - make sure all your dependencies for react are listed inside of actual "dependencies" instead of "devdepencies" otherwise heroku will ignore them.
i really hope this helps someone! i was slamming my head against the wall for 2 weeks and it turned out to be a small obscure problem....isn't it always?
additional resources: https://codeburst.io/creating-a-full-stack-web-application-with-python-npm-webpack-and-react-8925800503d9 while this is very simplified...it's what lead me to finding my bug so i'll post it here.
score:1
your flask backend doesn't seem to be running on the same port as you forward your traffic too:
starting gunicorn 19.6.0 listening at: 0.0.0.0:13521 (4)
app.all(/^\/api\/(.*)/, (req, res) => {
proxy.web(req, res, { target: 'http://0.0.0.0:8081' });
});
flask is listening on port 13521 (chosen randomly) but the /api/ routes are forwarded to port 8081. instead, you should probably configure gunicorn to use a fixed port: http://docs.gunicorn.org/en/latest/settings.html#bind
Source: stackoverflow.com
Related Query
- React Flask Heroku App is not displaying frontend
- Running npm run build in Heroku to serve a flask backend react frontend app
- Not able to receive/set cookies in browser from backend in MERN app with backend hosted on heroku and frontend on netlify
- My react frontend is not changing when I deploy to Google App Engine
- How Do I Deploy Flask API & React Frontend Microservices to Google App Engine with Proxy?
- Updating State for changed item not displaying on react frontend
- Status Code: 405 Not Allowed in React frontend hosted on Heroku
- Materialize Cards not displaying properly in React app
- Images not displaying in React App
- deploying spring app with react frontend to heroku
- Flask + React App Fails When Deployed to Heroku
- Images not loading in React app when deployed on Heroku
- Deploying a React + NodeJS + Express + MySQL App to Heroku only deploying the Server Not the React
- React app deployed smoothly on Heroku but the app is not running
- React App deploying but not running in heroku
- React app does not display anything when deployed to heroku
- '.filter is not a function' error message in React app when deployed to Heroku but not when running locally
- React JS - SVG file href not displaying in my app
- Django frontend app not loading React Component
- Displaying a CSV file using react frontend and flask backend
- UI is not displaying changes from an array item in a react redux tool kit app
- Google Maps JavaScript API not displaying in my React app
- texpress-session not setting cookie in react app when deployed to heroku
- React app + heroku server not working on production, but working fine in dev
- Localhost react app not receiving cookie from Heroku hosted node API
- Background Image Not Displaying in React App
- React app not working after uploading to Heroku
- App not compatible with buildpack, React - Heroku
- React message not displaying after flask response
- HTTP Error 404.3 - Not Found - backend .net core, frontend react hosted on azure app service
More Query from same tag
- immer.js merge nested object
- ANTD React How can I do affix like antd website?
- Firebase library for Node.js breaks when using 'babel' loader. Specifically: "Uncaught TypeError: Cannot read property 'navigator' of undefined"
- Error: ENOENT: no such file or directory React Node.js
- Cannot authenticate with Graph API access token on proprietary API
- How do I pass an array of objects that contains a component to child component in React with Typescript?
- How to store and retrieve objects in react-redux? [Objects subscribed to local-storage]
- How to get another component value in react js?
- Re-declaring an identifier in ES6
- this.setState() not changing value (not an asynchronous update issue)
- how to secure security_access_key in react js application?
- TS2322 Error when extending Button, component property not found. What is the correct way to type?
- Validate ReactJS password confirmation
- Cannot read property 'contains' of null
- React testing react-hook-form useForm
- Couldn't find preset "@babel/env" - reactjs
- stateless component compare param every time parent rendered
- eCharts stacked bar graph - Y axis
- How to set a key prop in a select element
- why returning an **element** from const outcomes as an error?
- Adding server side rendering to an existing React site created with create-react-app
- Jest Returning False when expecting True
- Maximum update depth exceeded (without onclick)
- Passing/Accessing props in stateless child component
- what is a different approach to bind a function to a component React es6
- Getting multiple svg element when data get loaded D3
- How to pass Header JWT Token with Axios & React?
- ReactJS router Matched leaf route at location "/" does not have an element
- Aframe React dynamic string value
- React.js, setting state in callback func