I have integrated swagger in django project using drf-yasg. Everything works fine on localhost but when deployed on development , swagger-ui css and js are not loading in browser.
It gives the following error:
Refused to apply style from '/static/drf-yasg/swagger-ui-dist/swagger-ui.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
I have set following values in settings.py:
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATIC_URL = '/static/'
Related
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
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.
I have a Django app hosted on Heroku, and my stylesheet isn't loading. Now I've taken the time to read the other questions on this issue, but I believe each situation is unique. Now the error is as follows:
Refused to apply style from 'https://mazzodjangoapp.herokuapp.com/static/blog/main.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
The static directory is defined in my settings.py file as:
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
STATIC_URL = '/static/'
In my base.html file, my link tag looks like this:
<link rel="stylesheet" type="text/css" href="{% static 'blog/main.css' %}">
Works locally. Why is it not loading up in the Heroku environment?
As per the Heroku guide for configuring Django apps, you need to use pip and install django_heroku
pip install django_heroku
Add it to your settings.py
import django_heroku
And finally, add this to the bottom of the settings.py file
django_heroku.settings(locals())
Using white noise in my project worked for me. since I had system errors and I couldn't install Django-Heroku.
Here is the link I used to set up my white noise.
Basically
Install white noise
pip install whitenoise
Add it to middleware
MIDDLEWARE = [
django.middleware.security.SecurityMiddleware',
'whitenoise.middleware.WhiteNoiseMiddleware',
#...
]
and that's all. you then send your code to Heroku
"whitenoise" can solve "MIME type" error to load CSS successfully:
This is how you use "whitenoise":
First, install "whitenoise":
pip install whitenoise
Then, set it to "MIDDLEWARE" in "settings.py". That's it to load CSS successfully:
MIDDLEWARE = [
# ...
"django.middleware.security.SecurityMiddleware",
"whitenoise.middleware.WhiteNoiseMiddleware", # Here
# ...
]
make sure that DEBUG = False in settings.py
You need to run $ python manage.py collectstatic before pushing to Heroku.
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.
What are the differences of these three static url?
I am not sure if I am right, I am using the MEDIA_ROOT to store my uploaded photos (via models.ImageField())
However, I created a JS script to my admin and in admin.py. I defined the media as below:
....
class Media:
js = ('/admin/custom.js', )
and my settings.py:
....
STATIC_ROOT = "/home/user/project/django1/top/listing/static"
and I added the custom.js to STATIC_ROOT/admin/custom.js, but it is not working. Throwing 404 not found error.
And then I change the STATIC_ROOT to STATICFILES_DIRS, and it works!!
....
STATICFILES_DIRS = "/home/user/project/django1/top/listing/static"
So, I am not understand what is going on here. In fact, I just don't understand what is the difference between STATIC_ROOT and STATICFILES_DIRS.
Currently I am testing Django in my machine via virtualenv, not deployed yet, is it the reason STATIC_ROOT not working??
Development
STATIC_ROOT is useless during development, it's only required for deployment.
While in development, STATIC_ROOT does nothing. You don't even need to set it. Django looks for static files inside each app's directory (myProject/appName/static) and serves them automatically.
This is the magic done by manage.py runserver when DEBUG=True.
Deployment
When your project goes live, things differ. Most likely you will serve dynamic content using Django and static files will be served by Nginx. Why? Because Nginx is incredibly efficient and will reduce the workload off Django.
This is where STATIC_ROOT becomes handy, as Nginx doesn't know anything about your Django project and doesn't know where to find static files.
So you set STATIC_ROOT = '/some/folder/' and tell Nginx to look for static files in /some/folder/. Then you run manage.py collectstatic and Django will copy static files from all the apps you have to /some/folder/.
Extra directories for static files
STATICFILES_DIRS is used to include additional directories for collectstatic to look for. For example, by default, Django doesn't recognize /myProject/static/. So you can include it yourself.
Example
STATIC_URL = '/static/'
if not DEBUG:
STATIC_ROOT = '/home/django/www-data/example.com/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static/'),
]
You can find these settings in the Django documentation. Here are my own definitions and quotations from the documentation:
MEDIA_ROOT is the folder where files uploaded using FileField will go.
Absolute filesystem path to the directory that will hold user-uploaded files.
STATIC_ROOT is the folder where static files will be stored after using manage.py collectstatic
The absolute path to the directory where collectstatic will collect static files for deployment.
If the staticfiles contrib app is enabled (default) the collectstatic management command will collect static files into this directory. See the howto on managing static files for more details about usage.
STATICFILES_DIRS is the list of folders where Django will search for additional static files aside from the static folder of each app installed.
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.
In your settings, you should have:
MEDIA_ROOT = os.path.join(BASE_DIR, "media/")
STATIC_ROOT = os.path.join(BASE_DIR, "static/")
# Make a tuple of strings instead of a string
STATICFILES_DIRS = ("/home/user/project/django1/top/listing/static", )
...where:
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
as defined in the default Django settings.py now.
Difference between STATICFILES_DIRS and STATIC_ROOT
The STATICFILES_DIRS can contain other directories (not necessarily app directories) with static files and these static files will be collected into your STATIC_ROOT when you run collectstatic. These static files will then be served by your web server and they will be served from your STATIC_ROOT.
If you have files currently in your STATIC_ROOT that you wish to serve then you need to move these to a different directory and put that other directory in STATICFILES_DIRS. Your STATIC_ROOT directory should be empty and all static files should be collected into that directory.
MEDIA_ROOT where media files ,all uploaded files goes.
Example : Images, Files
class Media:
js = ('/admin/custom.js', )
but it is not working. Throwing 404 not found error.
The 404 error is in part because of the leading slash in the file path.