[FIXED] Flask App Error while deploying to Heroku at=error code=H10 desc=“App crashed” method=GET path=“/”

Issue

flask app gives this error on Heroku. it works fine on localhost

2021-08-22T00:04:11.771139+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=trivia-q.herokuapp.com request_id=b26bbe05-64ee-478a-a31f-e4699e18cfe6 fwd="154.181.253.212" dyno= connect= service= status=503 bytes= protocol=https
2021-08-22T00:04:13.438962+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=trivia-q.herokuapp.com request_id=3c281e81-3be8-4c9d-8f51-f6b4ce786210 fwd="154.181.253.212" dyno= connect= service= status=503 bytes= protocol=htt

trivia
├───flaskr
│   └───__init__.py
├───frontend
│   └───react app
├───Procfile
├───requirements.txt
├───test_flaskr.py

init.py

import os
from flask import Flask, request, abort, jsonify
from flask.helpers import send_from_directory
from flask_sqlalchemy import SQLAlchemy
from flask_cors import CORS
import random

from models import setup_db, Question, Category

QUESTIONS_PER_PAGE = 10

# adding pagination to the question
def paginate_question(request, selection):
    page = request.args.get("page", 1, type=int)
    start = (page - 1) * QUESTIONS_PER_PAGE
    end = start + QUESTIONS_PER_PAGE

    question = [question.format() for question in selection]
    current_questions = question[start:end]
    return current_questions


def create_app(test_config=None):
    # create and configure the app
    app = Flask(__name__, static_folder="frontend/build")
    setup_db(app)
    # set up CORS allowing all the origins
    cors = CORS(app, resources={"/": {"origins": "*"}})

    @app.after_request
    def after_request(response):
        response.headers.add(
            "Access-Control-Allow-Headers", "Content-Type,Authorization,true"
        )
        response.headers.add(
            "Access-Control-Allow-Methods", "GET,PUT,POST,DELETE,OPTIONS"
        )
        return response

    @app.route("/")
    def serve():
        return send_from_directory(app.static_folder, "index.html")

Pocfile

web: gunicorn -w 4 "flaskr:create_app()"

requirements.txt

aniso8601==6.0.0
Click==7.0
Flask==1.0.3
Flask-Cors==3.0.7
Flask-RESTful==0.3.7
Flask-SQLAlchemy==2.4.0
itsdangerous==1.1.0
Jinja2==2.10.1
MarkupSafe==1.1.1
psycopg2-binary==2.8.2
pytz==2019.1
six==1.12.0
SQLAlchemy==1.3.4
Werkzeug==0.15.5

package.json

{
  "name": "trivia-app",
  "version": "0.1.0",
  "private": true,
  "proxy": "https://trivia-q.herokuapp.com/",
  "dependencies": {
    "corsproxy": "^1.5.0",
    "jquery": "^3.4.1",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-router-dom": "^5.0.0",
    "react-scripts": "3.0.1"
  },
  "scripts": {
    "start": "node node_modules/react-scripts/scripts/start.js",
    "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"
    ]
  }
}

link to GitHub repo https://github.com/M-Rb3/trivia

I tried changing the Procfile many time after some search but it did not work, should I deploy the frontend and backend separately?..................

Solution

I did not include the gunicorn in the requirements.txt. If someone got the same error you should look for the full log heroku - how to see all the logs

Answered By - M-Rb3