We Keep Coding

No css styles on Django web-app deployed on heroku

I have created a simple web-app using django when i run it on my localhost it works fine. But after I deployed it to heroku the admin page has no css
my setting.py file has configuration
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATIC_URL = '/static/'
When I visit my site deployed on heroku the admin page looks like this (ie, no css)
And on my localhost it lookscompletely fine
i also ran python manage.py collectstatic command
In static folder all css are present but when ran on heroku they are not loaded
Edit -
I have not added any css
They are the css files provided by django by default

Python Django Admin not showing CSS

I was working with Django latest version by watching a tutorial on YT, but for some reason, my admin page isn't coming how it has to. It does not have a style or CSS.
[enter image description here][1]
[1]: https://i.stack.imgur.com/MrASY.pngenter code here

Are you running in debug or production mode?
Django delivers static files like CSS, JS etc in debug though it's own development server.
When you run in production mode / through a web server you have to configure your web server to deliver the static files.
Cheers

First of all I think you should first try this in the command line:
python manage.py collectstatic
After that go to settings file and check STATIC_URL and STATIC_ROOT
It should look like this(if you didn't change anything):
STATIC_URL = '/static/'
STATIC_ROOT = "/var/www/example.com/static/"
Static Url: URL to use when referring to static files located in STATIC_ROOT.
Static Root:
The absolute path to the directory where collectstatic will collect static files for deployment.
and also you can check the documentation.

Django Whitenoise with compressed staticfiles

I'm not able to get my django project to run with whitenoise and compressed staticfiles (including libsass). In links below, I read that it's only possible by offline compression of needed staticfiles. But when I started up the docker container, running compress command
docker-compose -f production.yml run --rm django python manage.py compress
gives me error:
ValueError: Missing staticfiles manifest entry for 'sass/app.scss'
While trying to request the site gives me following error (as expected?):
compressor.exceptions.OfflineGenerationError: You have offline compression enabled but key "..." is missing from offline manifest. You may need to run "python manage.py compress"
Settings are as follows (build with cookiecutter-django, see link for complete code base below):
STATIC_ROOT = str(ROOT_DIR("staticfiles"))
STATIC_URL = "/static/"
STATICFILES_DIRS = [str(APPS_DIR.path("static"))]
STATICFILES_FINDERS = [
"django.contrib.staticfiles.finders.FileSystemFinder",
"django.contrib.staticfiles.finders.AppDirectoriesFinder",
]
STATICFILES_STORAGE = "whitenoise.storage.CompressedManifestStaticFilesStorage"
STATICFILES_FINDERS += ["compressor.finders.CompressorFinder"]
COMPRESS_PRECOMPILERS = [("text/x-scss", "django_libsass.SassCompiler")]
COMPRESS_CACHEABLE_PRECOMPILERS = (("text/x-scss", "django_libsass.SassCompiler"),)
COMPRESS_ENABLED = env.bool("COMPRESS_ENABLED", default=True)
COMPRESS_STORAGE = "compressor.storage.GzipCompressorFileStorage"
COMPRESS_URL = STATIC_URL
So after searching the internet for 1 day; I'm stuck... Thx for any help or suggestion!
Code base: https://github.com/rl-institut/E_Metrobus/tree/compress
which is build with cookiecutter-django-foundation
including the following changes to config/setttings/production.py:
COMPRESS_STORAGE = "compressor.storage.GzipCompressorFileStorage" # Instead of pre-set "storages.backends.s3boto3.S3Boto3Storage"
COMPRESS_ROOT = STATIC_ROOT # Just in case
COMPRESS_OFFLINE = True # Needed to run compress offline
Possible related links:
Whitenoise and django-compressor cause 404 for compressed files
Possible to use WhiteNoise with Django-Compressor?
Django staticfiles not found on Heroku (with whitenoise)
https://github.com/django-compressor/django-compressor/issues/486
EDIT
Solved it using Justins answer (see below, with additonal changes).
My mistake was trying to compress files with already running container, giving me the error above. After changing Dockerfile with following lines (Notice the duplicate collectstatic cmd!):
python /app/manage.py collectstatic --noinput
python /app/manage.py compress --force
python /app/manage.py collectstatic --noinput
/usr/local/bin/gunicorn config.wsgi --bind 0.0.0.0:5000 --chdir=/app
and rebuilding image everything worked like a charm :)
Additionally, diverging from settings above, I had to set COMPRESS_ENABLED=True in my settings/env file.

I just had the same problem.
Add this to project/compose/production/django/start
python /app/manage.py compress --force
i.e.
python /app/manage.py collectstatic --noinput
python /app/manage.py compress --force
/usr/local/bin/gunicorn config.wsgi --bind 0.0.0.0:5000 --chdir=/app

this is weird but it work very well.
collect and compress static files by whitenoise
python manage.py collectstatic --clear
set COMPRESS_STORAGE = 'compressor.storage.BrotliCompressorFileStorage'
to make .br files in CACHE directory
python manage.py compress --force
set COMPRESS_STORAGE = 'compressor.storage.GzipCompressorFileStorage'
to make .gzfiles in CACHE directory
python manage.py compress --force
to add new compressed files to whitenoise: manifest.json, manifest.json.gz,
manifest.json.br
--no-post-process option is to tell whitenoise not to compress static files again.
python manage.py collectstatic --no-post-process
make sure to run the commands in order.
to test if whitenoise is working
python manage.py runserver --nostatic

Collectstatic configuration error when deploying Django app with dokku

When deploying a Django app using dokku I am getting a following error
Collectstatic configuration error. To debug, run:
$ heroku run python ./manage.py collectstatic --noinput
I found no way to run heroku run python ./manage.py collectstatic --noinput for a dokku container, but when I am trying dokku run my app python ./manage.py collectstatic --noinput, the static files are successfully copied to the STATIC_ROOT folder and no error message given.
I could solve the problem by placing collectstatic command into Procfile:
web: python manage.py collectstatic --noinput ; gunicorn myapp.wsgi
Still, I would love to know what was causing the problem and how can it be debugged. Any ideas?

You should have four settings in your settings.py file called MEDIA_ROOT, MEDIA_URL, STATIC_ROOT and STATIC_URL.
I set mine like so:
MEDIA_ROOT = 'media'
STATIC_ROOT = 'static'
MEDIA_URL = '/media'
STATIC_URL = '/static'
Inside the docker container that gets created, you will find your application under /app which makes the media path /app/media/ and the static path /app/static/.
Unfortunately if you don't have a media and static folder committed in git, it won't get created under /app automatically.
Since git doesn't allow you to commit an empty folder (it only commits files), I do the following in my projects:
mkdir media static
touch media/.dir
touch static/.dir
git add media/.dir static/.dir
git commit -m 'Make media and static directories'
The 'touch' command creates an empty file, then you 'git add' the two newly-created files and check them in.
Now when you push, the directories will be there to contain the media and static files. Just keep in mind that every time you 'git push', a new container is created, and the old one is destroyed. While this isn't a problem for your static files, your media will be lost unless you store it somewhere else.

How to serve static content with Apache in AppFog (WSGI Python app)

I'm using AppFog PaaS system for a few days, and I love it, It's probably the best PaaS system that I've tested (I've used other 3 ones previously), but didn't find information about how to serve static content with the Web server in frontend (Apache https or nginx) I'm not sure what server is being used.
My app is a Python WSGI with CherryPy and works perfectly in AppFog but I don't wan't CherryPy to serve static content, I think that Apache httpd or nginx is a better option for that.

With Ryan's support, I'm finally able to load static files! Here are the steps:
Created a 'static' directory in the project root - here all static files will be collected running the collectstatic command.
Edit the settings.py file:
STATIC_ROOT = os.path.join( os.path.abspath( os.path.dirname(file) ), '../static' ) # May change depending on where your settings.py file is!
STATIC_URL = '/static/'
Add following line in urlpatterns variable in urls.py file:
url(r'^static/(?P.*)$', 'django.views.static.serve', { 'document_root': settings.STATIC_ROOT} ) ,
Finally, run collectstatic command in your local machine. This will copy all static files from the apps you are using:
python manage.py collectstatic
That's it. Push in AF :)
Downside: Need to run collectstatic every time we have a new static file...

Edit your nginx.conf file. In the server section enter...
# serve static files
location ~ ^/(images|javascript|css)/ {
root /var/www/html/appname;
}
images, javascript and css would be folders in your document root folder. Update all your urls accordingly.