0

I'm getting this error on deploying to heroku:

at=error code=H10 desc="App crashed" method=GET path="/" host=deploy-testv1.herokuapp.com 
request_id=b36172ff-cb1b-4436-978f-1be34e28a9e3 fwd="123.201.36.104" dyno= connect= service= 
status=503 bytes= protocol=https
2021-05-18T11:08:48.938254+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET 
path="/favicon.ico" host=deploy-testv1.herokuapp.com request_id=8e63e9a0-c621-47e0-a91d-bad7716ddde5 
fwd="123.201.36.104" dyno= connect= service= status=503 bytes= protocol=https

My Procfile:

web: gunicorn app:app

Here is the app.py file:

from flask import Flask, send_from_directory
from flask_restful import Api, Resource, reqparse
from flask_cors import CORS 
from HelloApiHandler import HelloApiHandler

app = Flask(__name__, static_url_path='', static_folder='../build')
CORS(app) #comment this on deployment
api = Api(app)

@app.route("/", defaults={'path':''})
def serve(path):
   return send_from_directory(app.static_folder,'index.html')

api.add_resource(HelloApiHandler, '/flask/hello')

HelloApiHandler.py file:

from flask_restful import Api, Resource, reqparse

class HelloApiHandler(Resource):
def get(self):
 return {
  'resultStatus': 'SUCCESS',
  'message': "Hello Api Handler"
  }

def post(self):
print(self)
parser = reqparse.RequestParser()
parser.add_argument('type', type=str)
parser.add_argument('message', type=str)

args = parser.parse_args()

print(args)
# note, the post req from frontend needs to match the strings here (e.g. 'type and 'message')

request_type = args['type']
request_json = args['message']
# ret_status, ret_msg = ReturnData(request_type, request_json)
# currently just returning the req straight
ret_status = request_type
ret_msg = request_json

if ret_msg:
  message = "Your Message Requested: {}".format(ret_msg)
else:
  message = "No Msg"

final_ret = {"status": "Success", "message": message}

return final_ret

My App.js file:

import logo from './logo.svg';
import './App.css';
import React, { useEffect, useState } from 'react';
import axios from 'axios'

function App() {
  const [getMessage, setGetMessage] = useState({})

useEffect(()=>{
 axios.get('https://deploy-testv1.herokuapp.com/flask/hello').then(response => {
  console.log("SUCCESS", response)
  setGetMessage(response)
}).catch(error => {
  console.log(error)
})

 }, [])
 return (
  <div className="App">
  <header className="App-header">
    <img src={logo} className="App-logo" alt="logo" />
    <p>React + Flask Tutorial</p>
    <div>{getMessage.status === 200 ? 
      <h3>{getMessage.data.message}</h3>
      :
      <h3>LOADING</h3>}</div>
  </header>
</div>
);
}

export default App;

My root folder structure view:

enter image description here

Inside api folder

enter image description here

I have provided everything that's needed. Please let me know what wrong am I doing? Is there something wrong in my procfile or in app.py/app.js? Or is my file structure incorrect?

Have also added nodejs and python buildpack in heroku.

enter image description here

davidism
  • 121,510
  • 29
  • 395
  • 339
ShridharK
  • 365
  • 2
  • 14
  • Please let me know if you have any questions or if there is code of some other file that you wish to see. This is a small test project so these are the main files. – ShridharK May 18 '21 at 11:27
  • What is the error message trying to tell you...? – thebjorn May 18 '21 at 11:30
  • I've added the error message in the question. It just says App crashed with code of H10. Don't know why app is crashing. – ShridharK May 18 '21 at 11:31
  • By the way I just copied requirements.txt file from my api folder and pasted inside my root folder. I hope that isn't a problem. I had just seen in 1 link where they kept requirements inside root folder. – ShridharK May 18 '21 at 11:32
  • It says a bit more than that, no? I can see that it includes a path... (do you know what favicon.ico is and why it is requested?) – thebjorn May 18 '21 at 11:33
  • It's a default error (even I don't know what it is) that it throws, if you check this website and scroll down, you'll see he got the same error: https://dev.to/lawrence_eagles/causes-of-heroku-h10-app-crashed-error-and-how-to-solve-them-3jnl#:~:text=A%20bug%20in%20your%20Procfile,your%20server%20is%20in%20server.&text=js%20this%20would%20definitely%20crash,App%20crashed%20error%20code%20message. – ShridharK May 18 '21 at 11:35
  • "I'm struggling" is a perfectly valid status update ;-) It's important to not panic too much in these situations, and divide the problem into smaller steps (e.g. start with the simplest site you can deploy, then add features until you get stuck -- now you have a smaller problem you need to fix than you have now, rinse-and-repeat). Then the status update becomes "I'm struggling, I can deploy a site with x and y but not when I add z. I'm still making progress/I'm stuck and need some help." – thebjorn May 18 '21 at 11:44
  • Hi, Did you try to solve with this one? https://stackoverflow.com/questions/43593542/python-flask-web-api-heroku-it-runs-locally-but-shows-application-error-when – Priyank Kachhela May 18 '21 at 11:56
  • Checking that, let's see if it works. I had tried that in my previous code (previous question), but will see in this one. – ShridharK May 18 '21 at 12:00
  • It's throwing the same error. – ShridharK May 18 '21 at 12:03

1 Answers1

0

In app.py, this small change. Instead of just from HelloApiHandler, I changed it to api.HelloApiHandler. Apparently, while deploying on Heroku, we have to keep the Procfile as the reference even for Python files. It doesn't matter that the app.py file and HelloApiHandler.py file are in the same directory.

from api.HelloApiHandler import HelloApiHandler

And in Procfile. The same above reason

web: gunicorn api.app:app

This deployed my application.

ShridharK
  • 365
  • 2
  • 14