Menu
Good day. I've managed to successfully deploy my react app to Heroku. However, when I try to open, I get the following errors in my heroku logs:
2020-04-04T11:31:03.263548+00:00 app[web.1]: ℹ ｢wds｣: Project is running at http://172.17.176.146/
2020-04-04T11:31:03.263914+00:00 app[web.1]: ℹ ｢wds｣: webpack output is served from
2020-04-04T11:31:03.264020+00:00 app[web.1]: ℹ ｢wds｣: Content not from webpack is served from /app/public
2020-04-04T11:31:03.264096+00:00 app[web.1]: ℹ ｢wds｣: 404s will fallback to /
2020-04-04T11:31:03.264274+00:00 app[web.1]: Starting the development server...
2020-04-04T11:31:03.264276+00:00 app[web.1]:
2020-04-04T11:31:03.360569+00:00 heroku[web.1]: State changed from starting to crashed
2020-04-04T14:25:45.432183+00:00 heroku[web.1]: State changed from crashed to starting
2020-04-04T14:25:57.190700+00:00 app[web.1]:
2020-04-04T14:25:57.190727+00:00 app[web.1]: > [email protected] start /app
2020-04-04T14:25:57.190728+00:00 app[web.1]: > react-scripts start
2020-04-04T14:25:57.190728+00:00 app[web.1]:
2020-04-04T14:25:59.253101+00:00 app[web.1]: ℹ ｢wds｣: Project is running at http://172.16.211.122/
2020-04-04T14:25:59.253414+00:00 app[web.1]: ℹ ｢wds｣: webpack output is served from
2020-04-04T14:25:59.253514+00:00 app[web.1]: ℹ ｢wds｣: Content not from webpack is served from /app/public
2020-04-04T14:25:59.253580+00:00 app[web.1]: ℹ ｢wds｣: 404s will fallback to /
2020-04-04T14:25:59.253747+00:00 app[web.1]: Starting the development server...
2020-04-04T14:25:59.253749+00:00 app[web.1]:
2020-04-04T14:25:59.349915+00:00 heroku[web.1]: State changed from starting to crashed
2020-04-04T14:28:20.178274+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=kerron-king-portfolio.herokuapp.com request_id=d8f77821-5bd5-4d55-8b95-8fbd37c13c09 fwd="190.213.65.88" dyno= connect= service= status=503 bytes= protocol=https
2020-04-04T14:28:24.241325+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=kerron-king-portfolio.herokuapp.com request_id=c021725e-5389-452d-9601-a7c8018ab331 fwd="190.213.65.88" dyno= connect= service= status=503 bytes= protocol=https
This is a react app, that was built using the create-react-app command. I did no webpack editing and my package.json is as follows:
{
"name": "portfolio",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"prop-types": "^15.7.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"eslint": "^6.8.0",
"eslint-config-airbnb": "^18.1.0",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-react": "^7.19.0",
"eslint-plugin-react-hooks": "^2.5.1"
}
}
My public folder is as follows:
- index.html
- robots.txt
The contents of those files are: index.html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Portfolio</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
robots.txt :
# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:
I also have 4 images that I use in the project, that are housed in the following directory:
portfolio/src/imgs
Any help in solving this would be greatly appreciated.
296
There are some errors which only occur when the app is rebooting so you will need to restart the app to see these log messages appear. For most apps, we also recommend enabling one of the free logging addons from https://elements.heroku.com/addons#logging to make sure that your historical log data is being saved.
To deploy React app on Heroku, we need to add buildpacks. Click on the Settings tab and then click on Add buildpack button inside the Buildpacks section. Our React buildpack URL is https://github.com/mars/create-react-app-buildpack. Copy this URL and add it to buildpack like below.
Ok, I've found the issue. The default buildpack when deploying is that of node.js. I needed to use the create-react-app buildpack (as seen below). It works perfectly now.
heroku create $APP_NAME --buildpack mars/create-react-app
git push heroku master
heroku open
If your app is already deployed you can just install the https://github.com/mars/create-react-app-buildpack in heroku settings, if still not working. Try adding a procfile with web: bin/boot. It works for me and hope it works for you.
30
If you used create-react-app you should add a new object called engines. Inside of the engines object, you specify the versions for npm and node. To do this open up your terminal and type in:
npm -v Press enter
node -v Press enter
{
"name": "portfolio",
"version": "0.1.0",
"private": true,
"engines": {
"npm": "5.7.1",// here put your version
"node": "9.5.0" // here put your version
},
... the rest of the file
}If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
