CODEWITHSUNDEEP
javascriptreactjsexpressherokupackage.json
Sue
Sue

Reputation: 225

Deploying Hello World react js app on to Heroku

I am recieving a application error. This is the error:

2020-10-29T17:02:02.043156+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=helloworld-mastercard.herokuapp.com request_id=640ea1df-832d-41a2-ab8a-90ba603398e9 fwd="37.228.208.88" dyno= connect= service= status=503 bytes= protocol=https
2020-10-29T17:02:05.327275+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=helloworld-mastercard.herokuapp.com request_id=f1f3fe21-e1e5-4a39-9ee5-bf078ff39266 fwd="37.228.208.88" dyno= connect= service= status=503 bytes= protocol=https

I followed a youtube tutorial on how to do this. I added a server.js with the following contents:

const express = require('express');
const favicon = require('express-favicon');
const path = require('path');
const port = process.env.PORT || 8080;
const app = express();
app.use(favicon(__dirname + '/build/favicon.ico'));
// the __dirname is the current directory from where the script is running
app.use(express.static(__dirname));
app.use(express.static(path.join(__dirname, 'build')));
app.get('/ping', function (req, res) {
 return res.send('pong');
});
app.get('/*', function (req, res) {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
app.listen(port);

My package.json is as follows:

{
  "name": "helloworld",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.5",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "express": "^4.17.1",
    "express-favicon": "^2.0.1",
    "path": "^0.12.7",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.0",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "node server.js",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

Ive done npm run build and am very confused where I am going wrong

enter image description here

Upvotes: 0

Views: 133

Answers (1)

Ozgur Sar
Ozgur Sar

Reputation: 2204

Heroku needs a file call Procfile in order to do the build and run processes.

In your case, create a file named exactly Procfile in your app's main folder and add the content below:

web: node server.js

You can read about Procfile more here

Furthermore, to run a build script on Heroku you need to add that to package.json file's script section like this:

"scripts": {
  "start": "node server.js", // serves the application
  "heroku-postbuild": "webpack -p" // runs after installation
}

Please refer to this link for details on how to deploy webpack apps to Heroku.

Explanation Heroku automatically installs all our dependencies and goes on to do a post-build operation before serving our application. In this post-build operation, we do the production bundling of our js files and allow Heroku to kick-start the application by running the start command.

Upvotes: 2

Related Questions