We Keep Coding

How to call a js folder inside Django static folder from an html file inside its own folder

I have a question using django 3.2.10. I can't download my js file which is inside js folder, also inside static folder. Additionally, I have a folder called views where there are my html files, they are organized by webapp name. I am calling a js file (perbd.js) from perbd.html. This is the structure of my project.
This is the line in my perbd.html:
<script type="text/javascript" src="{% static 'js/perbd.js '%}" ></script>
And I have these lines in my Settings.py:
STATIC_URL = '/static/'
STATICFILES_DIRS = (os.path.join(BASE_DIR, "static"), )
The point is that It doesn't work my js. I have the snapshot from the firework inspector:
The files which have %20 in the end, they are not working. I don't know what does it mean? Also I attach the image from the firefox console:
I'm thinking that it could be the folders organization because perbd.html is inside persona folder. I really appreciate all your help. Thanks in advance.

Second static files directory in Django

I'm trying to create something like a photo gallery in Django. So far I'm working with the local Django copy and included web server and DB.
I'm done with most of the app logic but need to solve the static files problem. I need to have two locations - one for "media" which will be images and I expect to have them stored outside of the Django in future - now it's placed within Django root /files directory. So far I was able to make it working with the following:
settings.py
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
STATICFILES_DIRS = (os.path.join(BASE_DIR, 'files'),)
STATIC_URL = "/photos/"
index.html
{% load static from staticfiles %}
Photo
This works pretty well - when I click that link I can see picture stored at /files//picture.jpg being displayed as http://localhost:8000/photos/picture.jpg
But now I need to add some CSS and JS into that page and have no idea how to do that (besides placing them directly to /files directory which I need to avoid)
Thanks

You can fix this problem like this. Сhange this place of code
{% load static from staticfiles %}
Photo
And write like this
{% load staticfiles %}
And you can add css in static dir and include css in template
<link rel="stylesheet" href="{% static 'css/style.css' %}">

To answer to your question follow the steps
Static
Create static files :
We create the static files to link the html files with this 3 files :
1/ CSS files
2/ JS files
3/ IMAGES files
..
How to create the static files ?
1/ Go to the project files and create a folder name it static.
static / CSS-JS-Images
2/ Go To the settings file and search for static after the STATIC_URL.
add this Two line:
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATICFILESDIRS = [ os.path.join(BASE_DIR, 'here you type the direction of the static file') ]
Make sur that you're import the OS library
3/ finally you should collect static, to do that go on the terminal and add this code :
python manage.py collectstatic
here you find how to load static on the html file.
add this code on the top of the page :
{% load static %}
add this code To link CSS file with Html.
<link reel = 'stylesheet' href = " {% static 'dir of css file.css' %} "
May that help you.

Is there a way to load file that is under templates folder on Django HTML?

I could load css file on Django html like this
{% load staticfiles %}
<link rel="stylesheet" href="{% static "css/style.css" %}">
I wonder why I can't load css file that is under templates folder.
<link rel="stylesheet" href="css/style.css">
Is there a way to load file that is under templates folder on Django HTML?
Why does Django wants me to put {% static "css/style.css" %} this format on all static files? Is it because much faster to load?
What If I load file that is under templates folder? Is it slow to load?

Templates and static assets are two differents types of assets that need to be managed differently for security purposes.
All js, css and images files need to be provided to clients in order for your website to be working. They are handled from the client side so they need to be available. So static asset folder is made to be available, if you check view source and follow the link of these assets you'll see they can be opened directly in your broswer.
Templates however are used by django itself to generate the output that is set via your views. When a user opens a page, he doesn't access the template itself but the rendering made by django. So the template folder isn't accessible to end user by design, including the files that are in it. So the only things a user can access from a django application are the responses given by the views, that are based on urls patterns and the templates, and assets that are in static folder. So you can't, and shouldn't, link to static assets from anywhere else but your static folder.

As I can see it, you have missed the concept of the templates and the static files in Django.
First of all, there are two independent mechanisms: loading a template file (your future HTML file) and loading your static files (css, js, images).
When loading a template Django uses TEMPLATE_LOADERS (docs), which are basically defined in your settings.py as:
TEMPLATE_LOADERS = (
# Loads templates from DIRS setting:
'django.template.loaders.filesystem.Loader',
# Loads templates from your installed apps:
'django.template.loaders.app_directories.Loader',
)
You can define a location of yout templates by setting DIRS (if you are using Django >= 1.8) or TEMPLATE_DIR (if Django < 1.8). There are several more steps in rendering your template such as: template context processors and so on, but it is all listed in the documentation.
Now about static files.
Static files are served by django.contrib.staticfiles app (docs) when DEBUG = True. In production it is done by Nginx, Apache or other Http-Servers.
When loading a static file Django uses STATICFILES_FINDERS. They are usially defined as:
STATICFILES_FINDERS = (
# Loads static files from STATICFILES_DIRS:
"django.contrib.staticfiles.finders.FileSystemFinder",
# Load static files from installed apps:
"django.contrib.staticfiles.finders.AppDirectoriesFinder"
)
There are two main settings to care about: STATIC_URL and STATICFILES_DIRS.
STATIC_URL is basically just a prefix, which is used to get your static files. It is almost always just '/static/'. And in STATICFILES_DIRS there are paths to your static files folders. It is sometimes extended to include node_modules, bower_components or things like that.
When dealing with static files in templates you need to append your STATIC_URL to your file's URL. The easiest way to do that is {% static %} tag.
A lot of confusion comes with STATIC_ROOT. It is just a path, where all your static files will be collected in production after running collectstatic management command.

How to link resources in a Django page

Let's suppose I have an HTML page (base.html) that must include one JavaScript file.
<script type="text/javascript" src="/js/main.js"></script>
It is my understanding that a Django project is not hosted in a public folder. Rather, requests are routed to views.py which generates a response.
Let's suppose my project directory looks like this
- project
- project_app
- views, models, ecc…
- templates
- base.html
- css
- main.css
- js
- main.js
How come base.html can reference main.css and main.js? If I access myserver.com/js/main.js this should not return anything (as the template folder is not public). Yet the browser need to access those file and I need to include them.
Do I need to write a specific URL rule to redirect requests to /js/main.js to the actual js file or what sort of magic can make a simple html include works?

The usual method is to keep your CSS, javascript, and similar files in a static folder and serve them to your html. General Django documentation can be found here.
In a nutshell, your directory will look like this:
- project
- project_app
- views, models, ecc…
- templates
- base.html
- static
- css
- main.css
- js
- main.js
Then, your base.html will reference the file using:
<script type="text/javascript" src="/static/js/main.js"></script>
The docs I referenced at the top show how to serve static files in production. Lots of people use a content delivery network (CDN) to serve their static files. Amazon's S3 service is an example of this. Then, you'll change the STATIC_URL setting in your settings.py to your S3 bucket (or similar network). You can then reference the STATIC_URL in your templates.
{% load static %}
...
<script type="text/javascript" src="{% static 'js/main.js' %}"></script>
...
You'll use commands like ./manage.py collectstatic to collect your static files and move them to your CDN at certain times. Basics of collectstatic can be found here.

You need to put all your static files in STATIC_ROOT folder by using command django-admin.py collectstatic and serve this folder. More details and explanation you can find here:
https://docs.djangoproject.com/en/dev/howto/static-files/#managing-static-files-css-images

Django CSS. I get the HTML page with no CSS

I have had this problem for a while now, I have been trying to move my CSS file all over the place and changing the settings, and even messing with the media url stuff, which I don't believe I should be now that I have read other questions.
My CSS file is in the /home/justin/test/static/ directory. My templates are in the /test/templates directory.
My settings are:
STATIC_ROOT = '/home/justin/test/static/'
STATIC_URL = '/static/'
STATICFILES_DIRS = (
'/home/justin/test/static/',
)
My urls are:
urlpatterns = patterns('',
url(r'^$', 'views.home'),
# Static Files
url(r'^static/(?P<path>.*)$','django.views.static.serve', {'document_root':settings.MEDIA_ROOT}),
)
I have all three in my main template.
<link rel="stylesheet" href="/static/style.css" />
<link rel="stylesheet" href="{{ STATIC_URL }}style.css" />
<link rel="stylesheet" href="{{ STATIC_URL }}/style.css" />
They come out:
<link href="/static/style.css" rel="stylesheet"></link>
<link href="style.css" rel="stylesheet"></link>
<link href="/style.css" rel="stylesheet"></link>
The first comes out to the correct file, but it doesn't work.
Any help is really appreciated. Thank you.
My views.py:
from django.shortcuts import render_to_response
def home(request):
return render_to_response('index.html',{})
My error from the terminal is:
[16/Aug/2013 21:00:21] "GET /static/style.css HTTP/1.1" 500 1729

You need to pass request in RequestContext of your views
def home(request):
return render_to_response('index.html', locals(), context_instance = RequestContext(request))
Only then your session data will be passed to the template and {{ STATIC_URL }} will work.

Here are some tips to help you solve this problem.
First, anything to do with MEDIA_ is referring to files that are uploaded to the system by users; and STATIC_ refers to files that are part of your application.
STATIC_ROOT should point to the file system path where the collectstatic command will dump all the static files from all your applications. When you are deploying the application into a production environment, you run collectstatic (which will overwrite everything in the directory pointed to by STATIC_ROOT) and then copy the contents of this directory to a location that is mapped to the url that STATIC_URL points to.
In summary:
If your application needs any static files (images, javascript, css, etc.) create a directory called static in your application's directory (the same location where you have models.py) and add the files there.
STATIC_ROOT should point to a directory where all the images, css, javascript, etc. will be dumped by the collectstatic command. This is only used when you want to move your application to a production server. The collectstatic command will grab all the files in all the static directories in your applications that are listed in INSTALLED_APPS (including the ones from the django.contrib like the admin interface) and dump them in this directory. You would then take this directory and copy or move it to your web server.
STATICFILES_DIRS is a directory where any static files that are not part of any specific application should be stored. If this location is set, then django will also look here for static files.
STATIC_URL = the URL path that is configured in your web server to point to the location where all the files in STATIC_ROOT are located.
The {% static %} tag will always point to the STATIC_URL variable. In order to use this tag you must have {% load staticfiles %} at the top of any template that is using the tag; even if the template is inheriting from one that already as the load line in it.
You don't need anything fancy in your urls.py unless you are using django to serve your static files (which you should not do). Use the web server to handle static files. If you are running with DEBUG = True and using runserver, then django will take care of handling static files for you automatically as a courtesy during development.
For any user uploaded files which are controlled by the various MEDIA_* settings you need to handle these manually during development; and for this you can use the following snippet in your urs.py. Again, keep in mind this is only for development - do not use this in production:
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = patterns('',
# ... the rest of your URLconf goes here ...
)
if settings.DEBUG:
urlpatterns += static(settings.MEDIA_URL,
document_root=settings.MEDIA_ROOT)
Please read the static files section in the manual; from where I have summarized the above points.
Finally, you should use the render shortcut when using methods in your views. This makes sure that the proper request context is always sent.

you must use this tag ({% load static from staticfiles %}) in your template :
{% load static from staticfiles %}
<link rel="stylesheet" type="text/css" href="{% static 'style.css' %}" />

In your urls, you should serve from the STATIC_ROOT not the MEDIA_ROOT setting
url(r'^static/(?P<path>.*)$','django.views.static.serve', {'document_root':settings.STATIC_ROOT})
Also, you need to pass RequestContext on your views, like stated in other answers.

In development mode (which means DEBUG=True in settings.py), to serve static files
Simply put the following lines in urls.py
from django.contrib.staticfiles.urls import staticfiles_urlpatterns
# ... the rest of your URLconf here ...
urlpatterns += staticfiles_urlpatterns()
In production mode, you should use nginx/apache in front of django to serve static files.
Refs: https://docs.djangoproject.com/en/dev/ref/contrib/staticfiles/
There's a line in your question:
url(r'^static/(?P<path>.*)$','django.views.static.serve', {'document_root':settings.MEDIA_ROOT}),
Normally, settings.MEDIA_ROOT is for user uploaded files, which is a different folder from settings.STATIC_ROOT.