I'm struggling with a conversion of a html file into a django template. It seems like the main.js file is not working but debug console doesn't throw any errors.
I have just copied the files from my local filesystem onto my webserver and changed the url of the static files. There are no 404 errors.
This is how my html document looks like on the local file system:
This is how the templated version on the web server looks like:
This my include order of the javascript files:
<script src="{% static "js/jquery.js" %}" ></script>
[...]
<script src="{% static "js/main.js" %}" ></script>
The problem was caused by the css file. I had an old file from another template with the same name in my static path.
Deleting style.css and rerunning
python manage.py collectstatic solved the problem.
I am trying to add a link to a folder in the npm_modules folder located in the root of my Django project to one of my templates. However, when attempting to do so, the path typed in is simply appended to the current url and is treated as a link. Since my folder is not there, it is not loaded and my javascript crashes.
Since it is best practice to keep the npm_modules folder in root, how do I go about referencing folders within it inside my templates?
<script src="\node_modules\angular-file-upload\dist\angular-file-
upload.min.js" type="text/javascript"></script>
You need to keep your npm package file in static folder. Then in template
{% load staticfiles %}
...
<script src="{% static node_modules\angular-file-upload\dist\angular-file-
upload.min.js %}" type="text/javascript"></script>
Assume you save your angular-file-upload.min.js in folder static/node_modules/angular-file-upload/dist
In settings.py
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static'),
]
Short brief:
I have some “non-django html apps” (a folder with a index.html, some .js files and a .css file) and I want to execute them in a django website without touching their code. How can I do it?
How can I make work inside django a non-django app (a folder with an index.html, some .js and .css) withou touching the code of the app?
Details:
I'm building a website with Django where i want to host some Construct3 games (it allows you to create HTML5 through a GUI).
When you export a Construct3 game to HTML it creates the following structure:
C3App
|_ appmanifest.json
|_ c2runtime.js
|_ data.js
|_ index.html
|_ offline.js
|_ offlineClient.js
|_ register-sw.js
|_ start.js
|_ style.css
|_ sw.js
|_ icons
| |_ icon1.png
|_ images
|_ image1.png
That is what I have tried:
1.- In my Django website I dropped the C3App in my template folder and created a view and called index.html. As a result i got a blank page with not found errors (404) for: appmanifest.json, icon1.png, style.css, c2runtime.js, start.js and register-sw.js. That is the external files called in index.html.
2.- As that dindn't work, I moved C3App to my static folder and I created a template with the same content of index.html but changing the references.
So I changed this lines:
<link rel="manifest" href="appmanifest.json" />
<link rel="icon" type="image/png" href="icons/icon-512.png" />
<link rel="stylesheet" href="style.css"/>
<script src="c2runtime.js"></script>
<script src="start.js"></script>
<script src="register-sw.js"></script>
To this others:
{% load static %}
<link rel="manifest" href="{% static 'games/C3App/appmanifest.json' %}" />
<link rel="icon" type="image/png" href="{% static 'games/C3App/icons/icon-512.png' %}" />
<link rel="stylesheet" href="{% static 'games/C3App/style.css' %}"/>
<script src="{% static 'games/C3App/c2runtime.js' %}"></script>
<script src="{% static 'games/C3App/start.js' %}"></script>
<script src="{% static 'games/C3App/register-sw.js' %}"></script>
After the changes I got 2 not found errors for: data.js and offlineClient.js. Two files called several times in c2runtime.js.
So c2runtime.js needs to be touched too. And this starts to become too dirty, I'm modifying more than one file, in more than one place. So every time I will want to make an update for a game I will need to modify all that files again. Sounds like stupid work and an easy way to introduce bugs.
The perfect scenario would be drag the folder (exported game) and work. Is there a way to do that posible? Any idea?
How can I make work inside django a non-django app (a folder with an index.html, some .js and .css) withou touching the code of the app?
I have some “non-django html apps” (a folder with a index.html, some
.js files and a .css file) and I want to execute them in a django
website without touching their code. How can I do it?
There a lot's of ways in which you can, but you shouldn't
How can I make work inside django a non-django app (a folder with an index.html, some .js and .css) withou touching the code of the app?
As above, if this is a static non django app (or even a dynamic one). Don't mix it with django. It should be the responsibility of the webserver (Nginx, Apache) etc to route the django app related urls to your WSGI server. And to route the non django app urls to whatever that hosts it.
ps:
You should not run the dev server in production as it's unsafe. The nature of your question gives the impression that you maybe doing so.
In my project there is folder named mine with 2 subfolders (static folder & templates folder) and 1 app.py file init.
I have put my jQuery script file inside the static folder and shop.html file is in the templates folder. I want to link that html file to that js file.
I put this inside the html file:
<script type=text/javascript src="{{url_for('static', filename='/static/hide.js') }}"></script>
But it does not work? What is the problem?
You have a duplicate 'static' in there:
url_for('static', filename='hide.js')
The first 'static' will automatically populate with the URL which points to the static folder, therefore putting 'static' in the filename field is redundant.
url_for('static', filename='static/hide.js')
# '/static/static/hide.js'
url_for('static', filename='hide.js')
# '/static/hide.js'
I know this has been asked before, but I'm having a hard time setting up JS on my Django web app, even though I'm reading the documentation.
I'm running the Django dev server. My file structure looks like this:
mysite/
__init__.py
MySiteDB
manage.py
settings.py
urls.py
myapp/
__init__.py
admin.py
models.py
test.py
views.py
templates/
index.html
Where do I want to put the Javascript and CSS? I've tried it in a bunch of places, including myapp/, templates/ and mysite/, but none seem to work.
From index.html:
<head>
<title>Degree Planner</title>
<script type="text/javascript" src="/scripts/JQuery.js"></script>
<script type="text/javascript" src="/media/scripts/sprintf.js"></script>
<script type="text/javascript" src="/media/scripts/clientside.js"></script>
</head>
From urls.py:
(r'^admin/', include(admin.site.urls)),
(r'^media/(?P<path>.*)$', 'django.views.static.serve', {'document_root': 'media'})
(r'^.*', 'mysite.myapp.views.index'),
I suspect that the serve() line is the cause of errors like:
TypeError at /admin/auth/
'tuple' object is not callable
Just to round off the rampant flailing, I changed these settings in settings.py:
MEDIA_ROOT = '/media/'
MEDIA_URL = 'http://127.0.0.1:8000/media'
UPDATE: I made some changes, but it's still not working:
settings.py:
ROOT_PATH = os.path.normpath(os.path.dirname(__file__))
urls.py:
(r'^media/(?P<path>.*)$', 'django.views.static.serve', {'document_root': os.path.join(settings.ROOT_PATH, 'site_media')}),
index.html:
<script type="text/javascript" src="/media/JQuery.js"></script>
<script type="text/javascript" src="/media/sprintf.js"></script>
<script type="text/javascript" src="/media/clientside.js"></script>
Filesystem:
mysite/
site_media/
JQuery.js
sprintf.js
clientside.js
__init__.py
settings.py
manage.py
-- etc
myapp/
-- app files, etc
When I go to a url like http://127.0.0.1:8000/media/sprintf.js, I get:
Page not found: /media/sprintf.js
But does that /media/ global directory exist? And have you placed in there a scripts subdirectories with the scripts you want to serve from there? What about the /scripts/... url from which you want to serve JQuery.js -- that doesn't seem to be served anywhere from your urls.py. If you (for whatever reason) want to serve scripts (or any other statically served file) from several different URL paths, all of those URL paths need to be matched in urls.py with the static-serving -- or else, do the normal things and serve them all from the /media/... root URL, and map that media root to the dir where you actually keep these files (in their respective subdirs, typically).
Django's docs about static serving (for development only, since it's documented as
Using this method is inefficient and
insecure. Do not use this in a
production setting. Use this only for
development.
so beware!-) seems pretty clear to me.
You may want to use absolute path for 'document_root' in urls.py if you want to use the development server to serve static files. MEDIA_ROOT and MEDIA_URL don't play any role here.
Here are my settings for your reference. I put all static media files under site_media/
mysite/
site_media/
css/
js/
images/
...
in settings.py:
ROOT_PATH = os.path.normpath(os.path.dirname(__file__))
in urls.py:
url(r'^media/(?P<path>.*)$', "django.views.static.serve", {'document_root':
os.path.join(settings.ROOT_PATH, 'site_media')})
You can move static files else where, just need to point 'document_root' to the correct path. Make sure comment out this url line for production deployment.
Actually, you can put your Javascript files (and all your static content) anywhere you want. I mean, Django does not impose a standard on where to place them, after all they won't be handled by Django, they'll be served by the webserver.
Said that, It's a good idea to keep them somewhere close to the project's files. I'd recommend to keep them in a sibling folder to your Django code. Same with MEDIA_ROOT.
It is a good idea to decouple your static files from python files because now you can put them in totally separate folders in a production environment and easily give different access to static files and python code (say FTP access, or permissions).
Something to keep in mind is that the settings' MEDIA_ROOT is the place where user's media files (that is uploaded content) will be placed, these are not your static project files, these are whatever files your Django app uploads (avatars, attachments, etc).
Proposed folder structure:
mysite.com/
media/ - User media, this goes in settings.MEDIA_ROOT
static/ - This is your static content folder
css/
js/
images/
templates/
project/ - This is your Django project folder
__init__.py
manage.py
settings.py
myapp/
__init__.py
...files..py
See the other responses recommendation on using Django's serve() function for development enviroment. Just make sure you add that url() to your urlpatterns under a settings.DEBUG is True conditional.
As for your templates, it's a good idea to use a context processor to send your static file's path to all your templates.
I serve javascript via static. So I have something in my urls.py like
(r'^static/(?P<path>.*)$', 'django.views.static.serve', {'document_root': os.getenv('STATIC_DIR')})
So JS urls look like /static/js/blah.js, CSS urls look like /static/css/blah.css, etc. I have Apache handle the static directory when running in production to avoid any issues with Django's static serving mechanism.
For my development work, I use Django's built-in server, but I read the media files from the same directory as they would be in production (/srv/nginx/sitename/media/). So I clone the exact directory structure of my production server on my computer at home, letting me seamlessly push changes to production without having to change anything.
I keep two different settings.py files, though. My home settings.py file has my local database settings, a different MEDIA_URL setting, and DEBUG set to True. I use this in my URLs file to enable the server view for local media (since I don't run nginx on my home computer).
In urls.py:
if settings.DEBUG:
urlpatterns += patterns('',
(r'^media/(?P<path>.*)$', 'django.views.static.serve',
{'document_root': settings.MEDIA_ROOT}),
)
From settings.py (note, MEDIA_ROOT must be an absolute path):
# Absolute path to the directory that holds media.
# Example: "/home/media/media.lawrence.com/"
MEDIA_ROOT = '/srv/nginx/<sitename>/media/'
# URL that handles the media served from MEDIA_ROOT. Make sure to use a
# trailing slash if there is a path component (optional in other cases).
# Examples: "http://media.lawrence.com", "http://example.com/media/"
MEDIA_URL = 'http://127.0.0.1:8000/media/'
TEMPLATE_CONTEXT_PROCESSORS = (
# I've taken out my other processors for this example
"django.core.context_processors.media",
)
In a template:
<link rel="stylesheet" href="{{ MEDIA_URL }}css/form.css" />{% endblock %}
Filesystems:
/srv/nginx/<sitename>
/media <-- MEDIA_ROOT/MEDIA_URL points to here
/css
base.css
form.css
/img
/js
Oh, also: if that's a direct copy from your urls.py file, you forgot a comma after your serve view, that's causing your TypeError ;)
The error 404 occurs because MEDIA_ROOT requires absolute path, not relative. The server is trying to access /media in your filesystem, which is obviously not what you want.
Try this instead:
import os
PROJECT_PATH = os.path.realpath(os.path.dirname(__file__))
MEDIA_ROOT = os.path.join(PROJECT_PATH, 'site_media')
MEDIA_URL = '/media/'
This is a structure I use in a project separated into multiple apps. It's a good practice to adapt this structure right at the start -- you don't want global rearrangement when you need to add another app to your project.
/media
favicon.ico
robots.txt
/upload # user uploaded files
/js # global js files like jQuery
/main_app
/js
/css
/img
/other_app
/js
/css
/img
Then I use excellent StaticMiddleware from django-annoying to serve files. settings.py:
import os
import annoying
MEDIA_ROOT = os.path.join(os.path.dirname(__file__), "media")
MIDDLEWARE_CLASSES = (
'annoying.middlewares.StaticServe',
#...
)
I just remove the '^',
"r'static/" instead of "r'^static/".
It's works for me ,good luck.
url(r'static/(?P<path>.*)$', 'django.views.static.serve',
{ 'document_root': the_path }),