I have the following structure in my Django project. As you can see, there is one app called "blog" as well as the main app that is eponymous with the project itself.
The problem I am having has to do with serving static files from the static directory of the main project. The blog app has its own static directory and those files are served properly (when the pertinent URL routes are traversed).
Could someone tell me what I am doing wrong? Also, what is the best practice of serving static files when dealing with multiple apps? Is it prudent to dump all styles and scripts into a common static directory in the root of the project or is it better to keep things entirely separated from app to app?
settings.py
import os
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
STATIC_ROOT = os.path.join(BASE_DIR, "..", "django_by_example_blog", "static")
STATIC_URL = '/static/'
urls.py
urlpatterns = [
url(r'^$', TemplateView.as_view(template_name="base.html")),
url(r'^admin/', include(admin.site.urls)),
url(r'^blog/', include('blog.urls', namespace='blog', app_name='blog')),
]
base.html
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Home | Triangle</title>
<link href="{% static "css/bootstrap.min.css" %}" rel="stylesheet">
<link href="{% static "css/font-awesome.min.css" %}" rel="stylesheet">
<link href="{% static "css/animate.min.css" %}" rel="stylesheet">
<link href="{% static "css/lightbox.css" %}" rel="stylesheet">
<link href="{% static "css/main.css" %}" rel="stylesheet">
<link href="{% static "css/responsive.css" %}" rel="stylesheet">
<!--[if lt IE 9]>
<script src="{% static "js/html5shiv.js" %}></script>
<script src="{% static "js/respond.min.js" %}"></script>
<![endif]-->
<link rel="shortcut icon" href="{% static "images/ico/favicon.ico" %}">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="{% static "images/ico/apple-touch-icon-144-precomposed.png" %}">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="{% static "images/ico/apple-touch-icon-114-precomposed.png" %}">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="{% static "images/ico/apple-touch-icon-72-precomposed.png" %}">
<link rel="apple-touch-icon-precomposed" href="{% static "images/ico/apple-touch-icon-57-precomposed.png" %}">
</head><!--/head-->
<body>
STATIC_ROOT specifies the folder into which all static files will be dumped when you run the collectstatic command
python manage.py collectstatic
You seem to have specified one of your app's static folder as the static_root.
It would be preferable to give another folder for holding all your static files.
STATIC_ROOT = os.path.join(BASE_DIR, "static")
when you run the collectstatic command it would collect all your static files and place them into the STATIC_ROOT folder.
Although, while running in DEBUG=True you needn't worry about any of this.
Django will serve all the static content (including from within individual apps), but in a production environment this is not recommended and it would be the job of the web server to serve static content.
EDIT:
You also need to specify in your base urls.py
from django.conf.urls.static import static
from django.conf import settings
if settings.DEBUG:
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
"Dumping all styles and scripts into a common static directory" is exactly what the collectstatic command does. You should run that, and configure your server to serve the files from there.
First though you should set your STATIC_ROOT setting to point to that common directory, rather than inside your app.
Related
My project name resume
I wanted to add bootstrap to my project
first I copy the assets files to my project sub folder called resume => static assests files
- resume->resume/static
Then I add following settings in setting .py
STATIC_DIR = BASE_DIR / 'resume/static'
STATIC_ROOT = BASE_DIR / 'static'
STATIC_URL = '/static/'
STATICFILES_DIRS = [
STATIC_DIR,
]
after that I tired python manage.py collectstatic
and got a new directory
new static directory
after that I tired to add tag {% load static %} and alter the paths into {% static 'path' %}
<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>MyResume Bootstrap Template - Index</title>
<meta content="" name="description">
<meta content="" name="keywords">
<!-- Favicons -->
<link href="{% static 'img/favicon.png' %}" rel="icon">
<link href="{% static 'img/apple-touch-icon.png' %}" rel="apple-touch-icon">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
<!-- Vendor CSS Files -->
<link href="{% static 'vendor/aos/aos.css' %}" rel="stylesheet">
<link href="{% static 'vendor/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
<link href="{% static 'vendor/bootstrap-icons/bootstrap-icons.css' %}" rel="stylesheet">
<link href="{% static 'vendor/boxicons/css/boxicons.min.css' %}" rel="stylesheet">
<link href="{% static 'vendor/glightbox/css/glightbox.min.css' %}" rel="stylesheet">
<link href="{% static 'vendor/swiper/swiper-bundle.min.css' %}" rel="stylesheet">
<!-- Template Main CSS File -->
<link href="{% static 'css/style.css' %}" rel="stylesheet">
indext.html
still my website is not showing up
website image
please help
browser Console error
main.js:2 Uncaught TypeError: Cannot set property 'innerHTML' of null
at main.js:2
DevTools failed to load SourceMap: Could not load content for http://127.0.0.1:8000/static/vendor/swiper/swiper-bundle.min.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
You have to put {% load static %} at the first line.
ok the problem was with Chrome browser. there was no error in the code.
When I open the server with mozilla firefox there were no errors and website running fine
problem was with chrom devtool settings.
I have created a django project and tried to use an HTML template; however, I get an error while accessing files in static folder.
Here is my configuration:
#BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
STATIC_URL = '/static/'
STATICFILES_DIR = [
os.path.join(BASE_DIR,'static'),
]
STATIC_ROOT = os.path.join(BASE_DIR,'assets')
I have added static variable at the top of the HTML file as:
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Travello</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Travello template project">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="{% static 'styles/bootstrap4/bootstrap.min.css' %}">
<link href="{% static 'plugins/font-awesome-4.7.0/css/font-awesome.min.css' %}" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="{% static 'plugins/OwlCarousel2-2.2.1/owl.carousel.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'plugins/OwlCarousel2-2.2.1/owl.theme.default.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'plugins/OwlCarousel2-2.2.1/animate.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'styles/main_styles.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'styles/responsive.css' %}">
.....(cont'd)
The following is my folder configuration:
-my_project
--assets
--my_project
--static
--templates
--travello
My problem is that:
I cannot access images in static folder from browser, that is, when I type http://127.0.0.1:8000/static/images/about_1.jpg, I get an error like Page not found (404)
When I type http://127.0.0.1:8000 in order to see the index.html main page, I get the page with lots of errors saying Failed to load resource: the server responded with a status of 404 (Not Found)
Could you please help me in order to solve this issue. I will be glad to here your answers, thanks.
First of all, run python manage.py collectstatic, to copy all project's static files to your STATIC_ROOT dir - this should solve your second issue.
The first one is caused by incorrect URL address. You have set STATIC_ROOT to 'assets' dir, but you try to get access to the image entering /static/images/about_1.jpg. Just try /static/assets/about_1.jpg or /static/assets/images/about_1.jpg if images dir actually exists
I'm having django-puppeteer-pdf installed on my project. Page loads with css and PDF generation works great. But css files on STATIC_ROOT does not work on pdf. Any idea how to get this work?
In html template I'm having static files loaded:
{% load staticfiles %}
...
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<link href="{% static 'css/pdf-reports.min.css' %}" rel="stylesheet" />
</head>
and settings.py file:
STATIC_ROOT = os.path.join(BASE_DIR, "static_files")
I'm new to Django, and facing issues rendering bootstrap on a django page.
This is my base html,
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Dropbox Web App Prototype</title>
<!-- Bootstrap -->
<link href="{% static 'bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>This is a template showcasing the optional theme stylesheet included in Bootstrap. Use it as a starting point to create something more unique by building on or modifying it.</p>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
</body>
</html>
The static file is at the same level as the project directory and has the following structure,
I've also added the following line, to my settings.py file
STATICFILES_DIRS = (os.path.join(BASE_DIR, "static"),)
The CSS is not rendering on the home page. Any help appreciated.
You are using an older syntax that's probably doesn't match your version of Django.
In your html file change:
{% load staticfiles %}
to
{% load static %}
Also, replace the single quote with a double quote :
"{% static 'bootstrap/css/bootstrap.min.css' %}"
to:
"{% static "bootstrap/css/bootstrap.min.css" %}"
you can see the exact syntax of dealing with static files here
BASE_DIR is defined by default to:
BASE_DIR = os.path.dirname(os.path.dirname(__file__))
Here __file__ is actually settings.py, so BASE_DIR is on the parent directory, the one that contains manage.py.
It seems your static folder is on another level, so just move it to the same level as manage.py and it should work.
CDN:
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
Static
In urls for django runserver:
if settings.DEBUG:
urlpatterns += [url(r'^static/(?P<path>.*)$', views.serve),]
When running from the webserver, you need to config an alias. Nginx example:
location /static {
alias /home/username/mysite/static;}
settings.py:
STATIC_URL = '/static/'
STATICFILES_DIRS = (os.path.join(BASE_DIR, "static"),)
In the html
replace this
<link href="{% static 'bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
with this
<link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
and check this is in the settings.
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),
]
just define additioaly static url in your settings as follow somewhere on the bottom:
STATIC_URL = '/static/'
and check again if your bootstrap is served
can you paste your BASE_DIR ? Can you set it to: BASE_DIR to BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
I currently have this template
index.html
<!DOCTYPE html>
{% load staticfiles %} <!-- New line -->
<html>
<head>
<title>GingerBites</title>
<link href='//fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'/>
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Dancing+Script" />
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}css/styles.css"/>
</head>
<body>
</body>
</html>
settings.py
ACTUAL_DIR = os.path.dirname(__file__)
STATIC_PATH = os.path.join(ACTUAL_DIR, 'static')
STATIC_URL = '/static/'
STATICFILES_DIRS = (
STATIC_PATH,
)
For some reason when running my app locally my css is served correctly, but on page refresh my css remains the same after I save changes and refresh my page. I think something is caching my css. Although when I remove the link to my css, all my css styling disappears. Does anyone know how I can change this?
Or why this might be happening?
Ok, turns out the issue is that static files should be called like so:
{% static /path/to/static %}
So in your case:
<link rel="stylesheet" type="text/css" href="{% static css/styles.css %}"/>
Django documents it here.