Flask webserver in Heroku returning 404 when serving CSS files

Question

Website works for everything except CSS files. Static images works, static javascript works, favicon works, but CSS returns 404. I've tried different browsers and cache-reload on web browser.

Application logs:

2021-08-04T15:17:38.416574+00:00 heroku[router]: at=info method=GET 
path="/static/css/index.css" host=redacted fwd="82.196.112.61"
dyno=web.1 connect=1ms service=7ms status=404 bytes=2332 protocol=https

2021-08-04T15:17:38.424598+00:00 heroku[router]: at=info method=GET 
path="/static/js/bootstrap.bundle.js" host=redacted fwd="82.196.112.61"
dyno=web.1 connect=0ms service=27ms status=200 bytes=208248 protocol=https

This is my project structure. It works fully well locally, but as soon as I push it to Heroku the CSS fails to be served.

Project structure:

App.py:

from app import app

if __name__ == "__main__":
    app.run(host='0.0.0.0',
            port=33507,
            use_reloader = True)

__init__.py:

from flask import Flask, send_from_directory
from whitenoise import WhiteNoise
app = Flask(__name__)

# Allows the app to identify the static folder
app.static_folder = 'static'
app.wsgi_app = WhiteNoise(
    app.wsgi_app,
    root='static/')

@app.route("/static/<path:path>")
def static_dir(path):
    return send_from_directory("static", path)

#Configuration of application, see configuration.py, choose one and uncomment.
configuration = 'app.configuration.ProductionConfig'
#configuration = 'app.configuration.DevelopmentConfig'
app.config.from_object(configuration)
print('Running server on ' + app.config['ENV'] + '.')

from flask_sqlalchemy import SQLAlchemy
db = SQLAlchemy(app)
print('Running database at', app.config['SQLALCHEMY_DATABASE_URI'])

from app import views, models

db.create_all()

score 0 · Accepted Answer · answered Aug 04 '21 at 17:34

SOLVED

The issue was rooted in heroku being case-sensitive while Github is not. Even though you change the case on a folder locally, it does not get commited and pushed to Github, and this then propagates to Heroku.

TL;DR: Check that your folders are persistent in it's letter case, locally, on Github, and in Heroku.

Github:

Code:

Flask webserver in Heroku returning 404 when serving CSS files

1 Answers1