Django 404 error loading CSS from static directory - css

I have a problem loading up CSS from the static directory:
settings.py
MEDIA_ROOT = '/he/sites/video1.hackedexistence.com/htdocs/media/'
MEDIA_URL = '/media/'
STATIC_ROOT = '/he/sites/video1.hackedexistence.com/htdocs/static/'
STATIC_URL = '/static/'
ADMIN_MEDIA_PREFIX = '/static/admin/'
STATICFILES_DIRS = ()
url.py
from django.conf.urls.defaults import patterns, include, url
from django.contrib import admin
admin.autodiscover()
urlpatterns = patterns('',
url(r'^admin/', include(admin.site.urls)),
r'^beers/$', 'beer.views.BeersAll'),
)
base.html loads up fine, css won't load
<link rel="stylesheet" type="text/css" href="/static/css/video1.css" />
the css href link leads to
Page not found (404)
'css/video1.css' could not be found
The full path to the css file:
/he/sites/video1.hackedexistence.com/htdocs/static/css/video1.css
I'm following a youtube django tutorial by Hacked Existence. and he seems to proceed without a problem with this setup. How can i correct this?

Hacked Existence probably has his web server (apache based on your last question) configured to serve his static files.
user1658078 is correct in that you need to serve the static files in some way, and in a development environment you can use django's built-in view django.contrib.staticfiles.views.serve(request, path) - all this view does is it looks at the path set in STATICFILES_DIRS and the static subdirectory inside each application (e.g. if your project is my called mysite and it has an application called blog, then it will look in mysite/blog/static/), and serves any files which match the portion of the URL after the value of settings.STATIC_URL.
Finally, it's worth pointing out that your settings won't work at all at the moment, because your MEDIA_ROOT and STATIC_ROOT directories are set to serve from subdirectories of /he/sites/video1.hackedexistence.com/htdocs/, and unless you've created this directory, it won't work at all.
To fix static files, templates, admin files & uploaded files, follow these instructions:
In your settings.py, replace the lines in your question with the following:
import os
PROJECT_DIR = os.path.dirname(__file__)
INSTALLED_APPS = (
'django.contrib.staticfiles',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.sites',
'django.contrib.messages',
'django.contrib.admin',
# 'django.contrib.admindocs',
'beer', # note - I'm guessing the name of your application is beer
)
# django.contrib.staticfiles app collects files here when we run the collectstatic command
# (depending on your web server config, you may want to change this to e.g. '/var/www/static/' when it comes to deployment)
STATIC_ROOT = os.path.join(PROJECT_DIR, 'static-serve').replace('\\', '/')
# this should be prepended to your urls for static resources
STATIC_URL = '/static/'
# you can put static files which apply to your entire project here
STATICFILES_DIRS = (
os.path.join(PROJECT_DIR, "static").replace('\\', '/'),
)
# the URL to where we have the admin media (static files) from a web browser's perspective (not needed if using Django 1.4 or greater)
ADMIN_MEDIA_PREFIX = STATIC_URL + 'admin/'
# should be different from static files dir - this is where uploaded stuff goes
# (depending on your web server config, you may want to change this to e.g. '/var/www/media/' when it comes to deployment)
MEDIA_ROOT = os.path.join(PROJECT_DIR, 'media').replace('\\', '/')
# if you need to serve the uploaded stuff again, you need to prefix your urls with this
MEDIA_URL = '/media/'
# you can put templates which apply to your entire project here
TEMPLATE_DIRS = (
os.path.join(PROJECT_DIR, "templates").replace('\\', '/'),
)
Also make sure DEBUG is set to True.
In your urls.py inside your django project (i.e. not inside your app directory of beer), add the following at the end:
from django.conf.urls.static import static
from django.contrib.staticfiles.urls import staticfiles_urlpatterns
# serving of uploaded media + static files while debug mode is on
if settings.DEBUG:
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) # uploaded media
urlpatterns += staticfiles_urlpatterns() # files in each app's static/ dir
Create the following directories inside your django project directory:
/media/ - this is where files uploaded by users go (e.g. via FileField or ImageField)
/static/ - this is where you can put static files which apply to your whole django project (e.g. your styles for the whole page). For example, with this configuration, if you are trying to access the css file video1.css at the url static/css/video1.css, then you make sure the file is at the following path: /static/css/video1.css
/templates/ - this is where you put templates which apply to your whole django project
/beer/static/ - this is where you put static files which apply only to one specific site. When build urls to files in here, you treat them just as if they're in the /static/ directory, so just prepend the value of STATIC_URL to the relative filename.
/beer/templates/ - when you need to start creating templates for your views, you put your templates in here (the TEMPLATE_LOADERS setting includes django.template.loaders.app_directories.Loader by default, which will find templates in this directory). Similar to the application specific static directory, just treat files in this directory as if they are in the normal /templates/ directory.
/static-serve/ - this isn't used during development (so don't worry too much for now), but when you eventually want to deploy your django application, you run ./manage.py collectstatic, which will cause django to copy all files from each application directory's static directory and put them in here, and then you configure your web server to serve your files from this directory when the url starts with the value of STATIC_URL (/static/ in this case).
Now your static files will be loaded properly, the admin will display properly, your user uploaded files will be able to be served properly, and your templates will be found properly when you need them.

I believe you need to serve the static files. Instructions on how to do this are described in the Django documentation.
https://docs.djangoproject.com/en/dev/howto/static-files/
Please note there are different instructions for development and for deployment.

Related

Django SASS processor does not update CSS files in production

I am using django-sass-processor (https://github.com/jrief/django-sass-processor) in order to generate .css from .scss files. The css wiles were generated on the fly in production, based on the modified date of the scss file (as I understand it from the documentation). However, this on-the-fly-generation of files suddenly stopped working. I have moved my static folder to a different location, so I suspect that is a problem, but my regular static operations (collectstatic) works just fine - it's just the css file generation.
Here are the relevant variables from my settings.py:
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'django.contrib.humanize',
'sass_processor',
....
]
STATIC_ROOT = '/mnt/hd5/static/'
STATIC_URL = '/static/'
SASS_PROCESSOR_ROOT = '/mnt/hd5/static/css/'
STATICFILES_FINDERS = [
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
'sass_processor.finders.CssFinder',
]
The following file is located in /mnt/hd5/static/css:
stylesheet.scss
If I look at the latest filedate it is indeed the latest version, being modified more recently than the .css files. When I run collectstatic (not even sure that is needed?), it doesn't pick up any modifications.
Is there a glaring problem that can be seen above? Or alternatively is there a way I can record/view any error that is generated in the process?
STATIC_ROOT is where Django stores collected static files to serve - it's not where Django (or django-sass-processor`) will look for source files.
Similarly SASS_PROCESSOR_ROOT is where the processor will store the generated CSS files - not where it will look for source SCSS files.
The file you want the processor to look for and process needs to be in one of the directories that the STATICFILES_FINDERS will look in.
So, if you have an app called myapp then your source files should be at myapp/static/css/stylesheet.scss - the processor will find it here and a generated CSS file will be stored in the directory set as SASS_PROCESSOR_ROOT (this is where the AppDirectoriesFinder looks).
Alternatively, if you prefer not to store the source files inside a specific app, the processor will also look in any directory you have added to the STATICFILES_DIRS setting (this is where the FileSystemFinder looks).

Compile SASS directory into multiple files

Q. How do I / is it possible to split my /SCSS directory into multiple output .css files?
I have a part of the application /admin that I don't want to serve to the standard user for performances reasons. Also, there are some standalone landing pages that are not part of the 'main' site, so could do with their own bundle.
Example SCSS structure:
/scss
- partials
- modules
Compile into:
main.css
admin.css
landing.css
Note: I'm using webpack

Setting my compiled .scss file to output to the root folder in config.rb

I am trying to set my css output file from the config.rb file to the root level of my main directory and to be named "style.css". The issue I am having is I when I set all of the filepaths in the config.rb like the following it all works fine.
http_path = "/"
css_dir = "assets/css"
sass_dir = "assets/sass"
images_dir = "assets/images"
javascripts_dir = "assets/js"
fonts_dir = "assets/fonts"
output_style = :compressed
environment = :development
But I develop a lot of WordPress websites locally and need to have the css_dir = "assets/css" be set to the root of the main directory and to be named style.css. if I try things likecss_dir = "/" it breaks and doesn't output my style.css to the root.
Any suggestions please as to how I may do this so I don't have to stick with the current way of moving my output from assets/css/style.css to the root level manually upon deployment, (this has been my previous solution). This would not be ground breaking in my efficiency or my workflow, but it seems so simple and that it should be an option, so I have to ask the community.
I also tried Chris Coyier's suggestion here and that didn't seem to work either http://css-tricks.com/compass-compiling-and-wordpress-themes/
Maybe this will help:
When setting your http_path in config.rb, you are telling Compass what the path to the current directory is. It's only really used if you have absolute paths turned on and are using Compass URL helpers. Compass doesn't know what your "real" project root is (when it comes to PHP CMSes like WordPress or Drupal, for example).
Let's take the following document structure:
project_root
- foo
-- bar
--- baz
baz is going to be our theme folder.
Now when it comes to compiling your CSS, I'm not entirely sure what you're asking, whether it's that you want to change the CSS Directory for your production build only and keep it at assets/css for your development, or just change the directory. Either way, I've got you covered. For both of these, we're going to assume that the outside of Compass root directory we want the CSS generated in is project_root
Change CSS Directory Path for Production Build Only
Set css_dir = (environment == :development) ? 'assets/css' : '../../../' to compile your CSS into assets/css during development builds (compass compile/compass watch) and into project_root during production builds (compass compile -e production --force). The key here is that we're using Unix style directory changing to place the file outside of our theme directory.
Change CSS Directory Path for All Compiling
Set css_dir = "../../../" and simply runcompass watch/compass compile` as normal.
Either way, don't have Compass rewrite your file name. Name your Sass file style.scss

Why does my Django admin site not have styles / CSS loading?

I made a Django admin site using Django development version but it isn't being styled:
After setting up your STATIC_ROOT and STATIC_URL, you may have to run
python manage.py collectstatic
ADMIN_MEDIA_PREFIX is deprecated now, use STATIC_URL instead. Setting STATIC_URL = '/static/' in settings.py should do the job. Try:
import os.path
import sys
PROJECT_ROOT = os.path.normpath(os.path.dirname(__file__))
and then:
STATIC_ROOT = os.path.join(PROJECT_ROOT, 'static')
STATIC_URL = '/static/'
Works on Django 1.4 pre-alpha SVN-16920.
I broke my head over it for two days trying whatnot!
Finally, changed DEBUG in the settings.py file to:
DEBUG = True
and it worked.
P.S:
SECURITY WARNING: don't run with debug turned on in production!
Django does not serve static files on it's own. You have to tell it where the files are.
The ADMIN_MEDIA_PREFIX in the settings.py will point Django in the right location.
Since you're using the development version, you'll want the dev-specific document for static files how-to. Adam's link will lead you to the 1.2 version.
I read several other threads trying to fix this...resorted to an alias as in other threads.
This assumes that your own custom app is serving static files correctly, which would indicate that your STATIC_ROOT and STATIC_URL have proper settings.
STATIC_ROOT = ''
STATIC_URL = '/static/'
Then (from your static directory):
ubuntu#ip-1-2-3-4:/srv/www/mysite.com/app_folder/static$ sudo ln -s /usr/local/lib/python2.7/dist-packages/django/contrib/admin/static/admin/ admin
Hope this helps someone...there are a lot of threads on this topic.
I ran into this issue as well following the Django Book Tutorial.
In Chapter 5|Installing the model, the book states when referring to the default INSTALLED_APPS-
"Temporarily comment out all six of those strings by putting a hash character (#) in front of them."
http://www.djangobook.com/en/2.0/chapter05.html
Then, in Chapter 6, the Book tells the reader to uncomment 4 of those 6 lines-
"note that we commented out these four INSTALLED_APPS entries in Chapter 5. Uncomment them now."
But the statcifiles line is what is needed to restore CSS to the admin page, so uncomment that
'django.contrib.staticfiles',
In /project_name/project_name/settings.py you need to set STATIC_URL to tell your site what url to use for static files.
Then set STATIC_ROOT to be some folder on your filesystem that is not the same as any of your directories listed in STATICFILES_DIRS list.
Once STATICFILES_ROOT is set, you would run python manage.py collectstatic from the project directory.
This will copy all the admin static files and all files in any other folders listed in the STATICFILES_DIRS list. Basically this puts all your static files in one place so you you can move them to your CDN when deploying your site. If you are like me and don't have a CDN, then you have two options:
Add the folder you set as STATIC_ROOT to the STATICFILES_DIRS list. This will allow the staticfiles finders in django to locate all the static files.
Move the entire folder of static files somewhere else on your file system and direct STATICFILES_DIRS to include that new location.
I make no comments about security with this answer, it is just the way I have been able to develop with my web server for small projects. I expect that you will want a CDN as django suggest if you are doing anything larger scale.
UPDATE:
I just ran into this issue and this method didn't quite do what I think you want. What ended up working for me was after I ran collectstatic I just copied the admin static files that it put into STATICFILES_ROOT into the directory that I had used for my own static files. That solved the issue for me.
In addition to many of the other answers being useful, I had a problem that hasn't yet been noted. After upgrading from Django 1.3 to 1.6, my static files directory had a broken symbolic link to the django admin static files.
My settings.py was configured with:
STATICFILES_DIRS = (
'/var/www/static/my-dev',
)
According to this answer,
Django will now expect to find the admin static files under the URL
/admin/.
I had a symbolic link /var/www/static/my-dev/admin which was set to:
admin -> /usr/local/lib/python2.7/dist-packages/django/contrib/admin/media/
That location no longer exists in django 1.6, so I updated the link to:
admin -> /usr/local/lib/python2.7/dist-packages/django/contrib/admin/static/admin/
And now my admin site is working properly.
run: python manage.py collectstatic
Add this line to Vhost which located at : /etc/apache2/sites-available/000-default.conf
Alias /static/admin/ /var/www/html/example.com/static/admin
Here is entire Vhost setting for django setup
<VirtualHost *:80>
ServerName gautam.tech
ServerAlias www.gautam.tech
WSGIDaemonProcess gautam.tech python-path=/var/www/html/gautam.tech python-home=/var/www/html/gautam.tech/venv
WSGIProcessGroup gautam.tech
#Your static files location
Alias /static /var/www/html/gautam.tech/static
Alias /media/ /var/www/html/gautam.tech/media
Alias /static/admin/ /var/www/html/gautam.tech/static/admin
<Directory /var/www/html/gautam.tech/static>
Require all granted
</Directory>
<Directory /var/www/html/gautam.tech/media>
Require all granted
</Directory>
WSGIScriptAlias / /var/www/html/gautam.tech/myproject/wsgi.py
DocumentRoot /var/www/html/gautam.tech
<Directory /var/www/html/gautam.tech>
<Files wsgi.py>
Require all granted
</Files>
</Directory>
CustomLog /var/www/html/gautam.tech/access.log combined
ErrorLog /var/www/html/gautam.tech/error.log
</VirtualHost>
This will work for sure!
I see there are many answers but none of them worked for me, so I'm posting my own.
What solved it for me was adding a static files URL to the root URLs of the app. I needed to add this URL to my URLs list:
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
You will also need these two imports:
from django.conf import settings
from django.conf.urls.static import stati
More can be viewed in this article.
If you are using Apache server to host your django site, you need to make sure the static alias point to your /directory to site/site_media/static/. If your static files are in /directory to site/site/site_media/static/, the previous Apache alias configuration will not work.
While following the Django tutorial, I had a similar problem and in my case the issue was the mimetype used by the development server when serving css files.
The mimetype served was 'application/x-css' which led to following warning message in Chrome (in the 'Network' tab of the Developer tools):
Resource interpreted as Stylesheet but transferred with MIME type
application/x-css: "http://127.0.0.1:8000/static/admin/css/base.css"
The workaround that I've found: changing the mimetype to be served by adding following lines to the django webapp's manage.py file:
import mimetypes
mimetypes.init()
mimetypes.types_map['.css'] = 'text/css'
Note: worked for me with Django 1.7.4 on Python 2.7 and Chrome 40.0
Same sort of issue i encountered while developing a site in django-1.10.5 and python-2.7.13. But in my firefox-51 and chrome, the login page was able to get the css but still there was no styling. But weirdly it was working on IE-8..
I tried do every possible thing mentioned here and suitable to my set of sw versions. None worked.
But when i tried the same site on other system which had the python-2.7.8, it worked..
Just posted if it may help someone...
edited: later I found that in python-2.7.13, writing the following two lines in settings.py (plus clearing the cache of the browser) had done the trick
import mimetypes
mimetypes.add_type("text/css", ".css", True)
My issue was resolved by creating new Virtual Environment for the project, before that I was using general system level python interpreter.
$ mkvirtualenv myproject
Reference: https://docs.djangoproject.com/en/2.1/howto/windows/
In the issue is in a dev/test/prod server and using Nginx, please follow the below steps.
set the configs in settings.py as something below
STATIC_URL = '/static/'
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
Run the below command to create css and js files in static folder
$ python manage.py collectstatic
config in /etc/nginx/sites-enabled/example (Nginx) to serve static files
location /static/ {
alias /project/root/folder/static/;
}
this works fine and easily. I moved (manually) the folder. just you have to copy your static/admin from the directory of the main Project and paste it into public_html static/ if there is no static folder you have to run following command in terminal
python manage.py collectstatic
here you go with css working of Django admin
Ensure that 'django.contrib.staticfiles' is in your INSTALLED_APPS in your settings.py
Admin panel was working fine except css wasn't loaded. This worked for Lightsail Django with Apache
1.Define STATIC_ROOT and STATIC_URL in settings.py
STATIC_ROOT = '/opt/bitnami/projects/decisions/decision/'
STATIC_URL = '/static/'
2.Eject(copy) admin assets files to the project
run python manage.py collectstatic
this command creates /opt/bitnami/projects/decisions/decision/admin folder with css/ fonts/ img/ js/ subfolders
3.Make /static url accessible from apache
Paste this snippet in /opt/bitnami/apache2/conf/bitnami/bitnami.conf (If you have set up ssl then the file location will be /opt/bitnami/apache2/conf/bitnami/bitnami-ssl.conf)
Alias /static/ "/opt/bitnami/projects/decisions/decision/"
<Directory "/opt/bitnami/projects/decisions/decision/">
Order allow,deny
Options Indexes
Allow from all
IndexOptions FancyIndexing
</Directory>
4. Don't forget to restart apache
sudo /opt/bitnami/ctlscript.sh restart apache
Failing after trying 1000s of suggestions, I finally found a solution that helped. Here is what I tried and what I was using.
I am using django-1.11 and nginx web server.
Firstly, I made sure that my CSS/js files are not getting 404 in browser's console. After that, I could see a warning
Resource interpreted as Stylesheet but transferred with mime type text/plain
I found the base.html in admin templates and removed
type="text/css"
and now the lines looks like this:
<link rel="stylesheet" href="{% block stylesheet %}{% static "admin/css/base.css" %}{% endblock %}" />
This fixed the issue for me.
Check your settings.py file
STATIC_URL = '/static/'
there should be backslash ' / ' in both opening and closing side ..
If you have a value set in settings.py for STATICFILES_DIRS and the declared folder doesn't exist or is in the wrong location, it will cause the Admin to have no styling e.g. by defining:
STATICFILES_DIRS = ( os.path.join(BASE_DIR,"static"))
And the static folder doesn't exist .
Configuring static files
Make sure that django.contrib.staticfiles is included in your INSTALLED_APPS.
In your settings.py file, define STATIC_URL, for example:
STATIC_URL = '/static/'
For more details see
static filesĀ [django-docs]

Vendor/assets in Rails

Trying to connect a template in my application I have move all the files from the /assets to vendor/assets of my application and wrote in application.rb
config.assets.paths << Rails.root.join("template_folder")
but all the css&js worked only to the index page specified in the routes.rb
root to: "pages#index"
When I opening pages/index or pages/contact css & js don't work. how can I make them work with others controllers in my application?
You will have to mention the added files into application.css and application.js . Any new files added will have to mentioned in the application file , and also you will have to precompile the assets using rake:assets precompile if you are using assets .

Resources