React app crashed with Heroku after deployment

Question

I'm trying to deploy a new React application to Heroku. I already did that without problems, but this afternoon I have this error:

The full error message is:

heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=XXXhiddenXXX.herokuapp.com request_id=199e3ff6-54c9-4711-bb1c-b6775dfe8799 fwd="92.148.12.118" dyno= connect= service= status=503 bytes= protocol=https

I tried a lot of solutions exposed here: Heroku deployment error H10 (App crashed)

Without success.

I restarted (several times) the dyno : without success.

My heroku-postbuild is:

npm install && npm install --only=dev --no-shrinkwrap && npm run build

Perhaps it is this script which generates this error?

Check out this answer to a similar question https://stackoverflow.com/a/17004592/1680765. Also you may want to edit your previous comment to hide the sub domain. — Joshua Rose, Apr 25 '20 at 18:04
Yes I read also this post. But did not understood it. What's this port ? I have a react app, without "back". I do not know where may I work ? add .env somewhere ? — Dom, Apr 25 '20 at 18:16

score 1 · Answer 1 · answered Apr 26 '20 at 08:20

I find this solution :

I added a buidpack on my project. To do that :

go to your dashboard, tab 'Settings'
see the section 'buildpacks' :

Add the buildpack https://github.com/mars/create-react-app-buildpack.git

note : you can also add this build pack from your terminal :

heroku buildpacks:add https://github.com/mars/create-react-app-buildpack.git --app YOURAPP

Rebuild your application and that's all.

I must admit that I did not understand everything, but it is clear that it worked for me.

score 0 · Answer 2 · answered May 01 '20 at 03:47

0

The default buildpack when deploying is that of node.js. You needed to use the create-react-app buildpack (as seen below).

heroku create $APP_NAME --buildpack mars/create-react-app
git push heroku master
heroku open

answered May 01 '20 at 03:47

Bojan Mitrovic

105
1
2
10

score 0 · Answer 3 · answered Jul 12 '20 at 15:32

You need to have the app running on a Heroku port using Express.

Step 1: Add server.js file to your project add add the following:

var express  = require('express');
var app      = express();                               
var morgan = require('morgan');            
var bodyParser = require('body-parser');    
var cors = require('cors');
 
app.use(morgan('dev'));                                        
app.use(bodyParser.urlencoded({'extended':'true'}));            
app.use(bodyParser.json());                                     
app.use(cors());
 
app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header('Access-Control-Allow-Methods', 'DELETE, PUT');
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});
 
app.use(express.static('build'));
app.set('port', process.env.PORT || 5000);
app.listen(app.get('port'), function () {
  console.log('Express server listening on port ' + app.get('port'));
});

Step 2: Npm Install morgan, express and cors

Step 3: In package.json, change the "start" in scripts to "node server.js"

Step 4: Commit and Push to Heroku.

Step 5: Hard refresh your page.

You're welcome...

React app crashed with Heroku after deployment

3 Answers3