No css styles on Django web-app deployed on heroku - python

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

Related

Django admin panel css not working as expected in digital ocean server

I am trying to deploy Django project in digital ocean. My site’s CSS is working perfectly but my admin panel CSS is not working good. The dashboard of the database window overrides my entry page always.
Before few days it seems to be working good but now the CSS makes the whole page messy.
Before:
After:
if you are github to get to your on production server please delete your delete your static root directory on production and generate that by the following command
"python manage.py collectstatic"
i my case
STATIC_URL = '/static/'
STATICFILES_DIRS=[
os.path.join(BASE_DIR,'static')
]
STATIC_ROOT=os.path.join(BASE_DIR,'assests')
"assests" is my static root folder, i deleted that entire folder after cloning my repo to the production server and afterwards i generated assessts folder by the command
"python manage.py collectstatic"

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.

Static files not loading (Django 1.11)

I am trying to set up a development version of a Django Rest (1.11) application on a mac.
I have run the python manage.py collectstatic command and this resulted in the files being copied into a 'static' folder.
However when I run the application (python manage.py runserver) none of the static files load in the browser (no css). The Network tab shows the status of the static files as 404.
My settings.py file has the following:
STATIC_URL = '/static/'
STATIC_ROOT = BASE_DIR + '/abba_rest/static/'
Appreciate any advice on how to debug this issue.
I got the static files to load by using the --insecure flag when starting the server;
python manage.py runserver --insecure

Docker Django 404 for web static files, but fine for admin static files

please help me on this docker django configuration for serving static files.
my Django project running on Docker got some issues with delivering static files.
All static files for admin view is loading fine, but static files for client web view is throwing 404 Not found Error.
This is my docker.yml configuration details:
web:
build: ./web
expose:
- "8000"
links:
- postgres:postgres
volumes:
- ./web:/usr/src/app
ports:
- "8000:8000"
env_file: .env
command: python manage.py runserver 0.0.0.0:8000
postgres:
image: postgres:latest
volumes:
- /var/lib/postgresql
ports:
- "5432:5432"
update
This is the admin static file url will look like :
http://developer.com:8000/static/admin/css/base.css
and this is how client static file url looks like:
http://developer.com:8000/static/css/base.css
Where those admin folder in static directory is creator by running django command collectstatic
I have used this setting previously, and was working fine. But when I moved the project root folder to another directory seems have this issue.
I am totally stuck here, many many thanks for all your help and feedback.
This was issue with the STATICFILES_DIRS configuration in the settings.py file.
This setting defines the additional locations the staticfiles app will traverse if the FileSystemFinder finder is enabled, e.g. if you use the collectstatic or findstatic management command or use the static file serving view.
Following was the configuration in my settings.py:
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, "static")
Now I updated this code to:
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),
]
And every files is loading fine.
Reference Link
Use Whitenoise to make your life easier when dealing with static files in django.
1.If you are using docker-compose,add whitenoise to your requirements.txt file:
whitenoise==3.3.1
2.Add whitenoise to your middleware apps inside settings.py
MIDDLEWARE_CLASSES = [# 'django.middleware.security.SecurityMiddleware','whitenoise.middleware.WhiteNoiseMiddleware',# ...]
make sure that you add this below your security.SecurityMiddleware app
3.Finally, change the following variables inside settings.py
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
STATIC_URL = '/static/'
STATICFILES_DIRS = (os.path.join(BASE_DIR,'<app_name>/static'),os.path.join(BASE_DIR, 'static'),)
Be sure to replace with the name of your app. Note that this only applies if your static files are stored in(for example) my_project/app/static/app/.
Otherwise if your static folder is located in my_project/app/static:
STATICFILES_DIRS = (os.path.join(BASE_DIR, 'static'),)
Lastly disable the built-in django static file server as follows:
INSTALLED_APPS = [
# ...
'whitenoise.runserver_nostatic',
'django.contrib.staticfiles',
# ...]
As you have moved your project to another directory, there is a possibility that the path of your static directories are also different now. Django in most scenarios use apache, nginx or some other web servers to serve static files. One point to notice is that your static directory should be accessed publicly. I had gone through a problem like this before. What I did was I moved static dir to document root mentioned in apache config file.
So move your static files to the doc root of apache and update static directories in settings.py to refer to the static directory in your apache doc root. I hope this helps.

Missing bootstrap resources in Django-Rest-Framework

I'm using the new django-rest-framework 2.0 and have been following the tutorial for creating a rest based API. The API is now complete, however I am having trouble getting the bootstrap resources to load, all return with a 404 Not Found from Django.
I feel like the resources should be loaded from django-rest-framework module's static directory, And when I do a listing on 'python2.7/dist-packages/rest_framework/static/rest_framework' I see the css, js, and img directories I need with but I have been unable to find any place in the documentation that shows how to link the CSS from the module to my project.
What is the best course of action here? Should I download the source and copy the folder into my /static directory? Symlinking is out of the question because I need to check the project into a central repo.. Ideas?
First up, I'm assuming that you mean the bootstrap static resources aren't loading for the browsable API? (Although I guess it could be that you're trying to use them elsewhere in your project?)
If you're running with DEBUG=True they should be served automatically, but once you're running with DEBUG=False you need to make sure to run manage.py collectstatic and ensure your STATIC_ROOT and STATIC_URL settings are correct.
Django's static files documentation should help: https://docs.djangoproject.com/en/dev/howto/static-files/
If you're still not having any luck I'd suggest you double check your Django version (1.3 and upwards is supported), and REST framework version (Anything from version 2 onwards), and make sure you step through the tutorial step-by-step, taking care particularly with the project setup.
If you're using Heroku you'll want to make sure you are using the configurations in the getting started documentation (https://devcenter.heroku.com/articles/getting-started-with-django). See the section "settings.py" and "wsgi.py". I was having the same problem and this solved it.
settings.py
import os
BASE_DIR = os.path.dirname(os.path.abspath(__file__))
STATIC_ROOT = 'staticfiles'
STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)
wsgi.py
from django.core.wsgi import get_wsgi_application
from dj_static import Cling
application = Cling(get_wsgi_application())
CSS is not found. The fix would be to make the missing css files (404 for files seen in the browser console) available. That's it.
You can make the css files accessible in backend(need some tweaks) or in front end(comparatively easy).
This solution works perfect if you have a seperate frontend & backend(restful) setup such as Django-Django rest framework and AngularJS..
Let us say if django backend is running at 8000, and front end is running at 9000.
frontend.example.com loads front end JS app running at 9000
backend.example.com loads django app running at 8000
in settings.py
import os
BASE_DIR = os.path.dirname(os.path.dirname(__file__))
STATIC_URL = 'http://frontend.example.com/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
then in terminal
$ python manage.py collectstatic
Then go to dir where you have the folder static
$ cp -rf static/* /frontend-code-directory/static/
DONE.
What I have done basically, is copying all css of django apps to the frontend. Frontend serves this easy as frontend is already a collection of static files.

Categories