CODEWITHSUNDEEP
pythonreactjsflaskheroku
IanH
IanH

Reputation: 161

I get a 404 error on Heroku but it works locally

My app works locally (when running Heroku local in the terminal), with the correct routes. However when I move onto the Heroku server the app is built fine but then just shows a 404 error when I go onto the app. The Heroku.logs return something like this for whichever page I go onto.

2020-07-16T17:24:44.233685+00:00 heroku[router]: at=info method=GET path="/" host=advancedmatchedbetting.herokuapp.com request_id=315ee036-cb58-4493-9b46-c2a25337070e fwd="176.250.1.224" dyno=web.1 connect=1ms service=3ms status=404 bytes=400 protocol=https

I will as little code as I think is needed here to keep it succinct, if there's any more that would be useful to you then let me know and ill put it up also. The git commit/push/add are all upto date.

Procfile

web: cd api && export APP_SETTINGS=config.cfg && gunicorn wsgi:app --log-file -

wsgi.py

from application.__init__ import create_app

app = create_app()

if __name__ == "__main__":
    app.run()

init.py

db = SQLAlchemy()

def create_app():
    app = Flask(__name__, static_folder='/Users/ianholdroyd/Documents/GitHub/advancedmatchedbetting_react/build', static_url_path='/')
    db.init_app(app)
    app.config.from_envvar('APP_SETTINGS')
    with app.app_context():
        from . import routes
        db.create_all()
        return app

routes.py

@app.route('/')
def index():
    return app.send_static_file('index.html')

@app.route('/api/signup', methods=['POST'])
def signup():
    data = request.get_json()
    new_user = newsletter(
            first_name=data['firstName'],
            last_name=data['lastName'],
            email= data['email'],
            created=dt.now()
        )
    db.session.add(new_user)  # Adds new User record to database
    db.session.commit()
    return("")

config.cfg

SECRET_KEY = ****
SQLALCHEMY_TRACK_MODIFICATIONS = False
DEBUG = True
SQLALCHEMY_DATABASE_URI = 'sqlite:///static/site.db'

app.js

function App() {

    return (
      <Router>
        <Switch>
          <Route exact path="/" component={homepage} />
          <Route exact path = "/404" component={NotFoundPage} />
          <Route exact path="/calculator/" component={Calculator} />
          <Route exact path="/blogpost/:id" component={blogpostpage} />
          <Route exact path="/signup" component={signuppage} />
          <Redirect to="/404"/> 
        </Switch>
        </Router>
      );
    }


export default App;

Upvotes: 3

Views: 2893

Answers (1)

IanH
IanH

Reputation: 161

Finally managed to sort this. In case anyone else needs help.

There was a few issues with this. I first managed to allow navigation on the local version by changing my routes to this:

@app.route('/', defaults={'path': ''})
@app.route('/<path:path>')
def catch_all(path):
    return app.send_static_file('index.html')

@app.errorhandler(404)   
def not_found(e):   
  return app.send_static_file('index.html')

Then the other issue was that I had declared the static folder as one from my laptop as opposed to a relative one. I changed init.py to this which solved the issue:

app = Flask(__name__, static_folder=os.path.abspath("../build"), static_url_path='/')

I think that all of this pain could have been avoided by using something like Nginx, but I couldn't quite get my head around it so this will do as a workaround for now!

Upvotes: 1

Related Questions