I am trying to add external JS file to my Django project. Unfortunately it doesn't work while I am trying to add it in many ways:
In my template.html I have specified direct path:
{% load static %}
< script> src="{% static 'commerce/static/js/test.js' %}" < /script>
it doesn't work.
My settings.py file:
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(file)))
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static'),
]
my layout.hmtl:
{% load static %}
<script src="{% static 'js/test.js' %}"></script>
Depending on sources combination, I receive various output in terminal regarding status of loaded files:
"GET / HTTP/1.1" 200 5167
"GET /static/js/test.js HTTP/1.1" 304 0
"GET / HTTP/1.1" 200 5167
"GET /static/js/test.js HTTP/1.1" 200 0
"GET / HTTP/1.1" 200 5167
"GET /static/js/test.js HTTP/1.1" 404 0
Even if my 'test.js' is loaded correctly (HTTP status 200 or sometimes no information regarding test.js load status), my javascript functions doesn't work.
In order to check if other static files are loaded I even tried to remove my CSS file from static folder and surprisingly (or not), after re-running my app it is still formatted. Although I left source for CSS unchanged in my layout.html:
{% load static %}
<link href="{% static 'css/styles.css' %}" rel="stylesheet">
Summarizing:
I cannot manage to add external *.js file to my Django app,
Even if source of *.js file is correct and Django loads it, javascript functions doesn't work
While I remove my *.css file from the source path, my Django app is still correctly formatted (?!)
I keep one more copy of the same app on my disk but in separate directory
Can you please point where am I mistaken? I am running out of ideas now.
Related
The code below tries to read in my leaflet.js and leaflet.css files which are stored in static/leaflet/package/dist/
The static folder is in the same directory as my flask app.py code. Templates are in a templates folder. The below code is from my home.html template.
For some reason if I use a url source for my leaflet.js and leaflet.css codes, the map works perfectly. Once I try to source my scripts from a directory, my map breaks. I think it is because I am not properly integrating my url_for. It may be also further messed up because I am using template inheritance.
Thanks in advance for any help!!
{% extends "base.html" %}
{% block header %}
<link rel="stylesheet" href="{{url_for('static', filename='leaflet/package/dist/leaflet.css')}}">
<script src="{{url_for('static', filename='leafleat/package/dist/leaflet.js')}}"></script>
<style>
#map{ width: 100%; height: 100%; }
</style>
{% endblock %}
edit:
These are the HTTP status codes I get back from my server. Which make it look like the only thing not being obtained is my leaflet.js script.
127.0.0.1 - - [04/Oct/2019 16:17:01] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [04/Oct/2019 16:17:01] "GET /static/leaflet/package/dist/leaflet.css HTTP/1.1" 200 -
127.0.0.1 - - [04/Oct/2019 16:17:01] "GET /static/leafleat/package/dist/leaflet.js HTTP/1.1" 404 -
127.0.0.1 - - [04/Oct/2019 16:17:01] "GET /static/favicon.ico HTTP/1.1" 200 -
Fixed it. I misspelled leaflet in the leaflet.js line. Leaving this up in case anyone needs help with leaflet and flask at any point.
I'm building a basic website that works with a python backend in Flask and an Angularjs frontend. I'm currently running into 404 issues when the index template is loading js files and css files
My directory structure is as follows:
-console/
---lib/
---css/
---bootstrap.css
---app.module.js
---index.html
-src/
---_init_.py
---api.py
My code for server api.py is as follows:
from flask import (Flask, jsonify, request, abort, render_template)
app = Flask(__name__, template_folder='../console')
#app.route('/', methods=['GET'])
def index():
return render_template('index.html')
This locates the index file with no issues, but when the index file tries to load the necessary css and js files, it fails to locate them. My current code for the basic index page is as follows:
<!DOCTYPE html>
<html ng-app="championsLeague" lang="en-US">
<head>
<title>Champions League</title>
<link rel="stylesheet" href="lib/css/bootstrap.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="app.module.js"></script>
</head>
<body>
<div ng-view>
<p>test</p>
</div>
</body>
</html>
When I start my server and navigate to my localhost, these errors appear in the console:
127.0.0.1/:7 GET http://127.0.0.1:5000/lib/css/bootstrap.css net::ERR_ABORTED 404 (NOT FOUND)
2127.0.0.1/:9 GET http://127.0.0.1:5000/app.module.js net::ERR_ABORTED 404 (NOT FOUND)
angular.js:88 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.6.9/$injector/modulerr?p0=championsLeague&p1=Error%3A%20%5B%24injector%3Anomod%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.6.9%2F%24injector%2Fnomod%3Fp0%3DchampionsLeague%0A%20%20%20%20at%20https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A7%3A76%0A%20%20%20%20at%20https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A26%3A408%0A%20%20%20%20at%20b%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A25%3A439)%0A%20%20%20%20at%20https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A26%3A182%0A%20%20%20%20at%20https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A42%3A332%0A%20%20%20%20at%20r%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A8%3A7)%0A%20%20%20%20at%20g%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A42%3A180)%0A%20%20%20%20at%20gb%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A46%3A250)%0A%20%20%20%20at%20c%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A22%3A19)%0A%20%20%20%20at%20Uc%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A22%3A332)
at angular.js:88
at angular.js:5023
at r (angular.js:408)
at g (angular.js:4983)
at gb (angular.js:4900)
at c (angular.js:1955)
at Uc (angular.js:1976)
at we (angular.js:1861)
at angular.js:34354
at HTMLDocument.b (angular.js:3488)
I'm assuming the angular error is being caused by the app.module.js file not being found. Any ideas on what the issue could be? It's a requirement that I use flask as my server for this task, so other servers aren't an option.
Your js files are not templates, but static resources. Try this:
app = Flask(__name__,
template_folder='../console',
static_url_path='../console')
Another problem could be that your Flask app is in a subdirectory. It should be a the root of your application files.
More info: How to serve static files in Flask
Side note: personally I would use a slightly different structure. There are some conventions on how to structure a Flask app, as explained here:
http://flask.pocoo.org/docs/1.0/tutorial/layout/
http://flask.pocoo.org/docs/1.0/patterns/packages/
This was really helpful to me.
i'm trying to test the code mentionned in this page :
dynamic-formset.js
and i added :
<script src="{% static 'js/dynamic-formset.js' %}"></script>
<script src="{% static 'js/jquery-3.3.1.js' %}"></script>
in order to load static files that contains js.
howerver the js doesn't work and i'm getting in the console the following lines :
"GET /static/js/dynamic-formset.js HTTP/1.1" 404 1777
"GET /static/js/jquery-3.3.1.js HTTP/1.1" 404 1768
when i replace the second ligne that imports jquery with the https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js , i dont get :
"GET /static/js/jquery-3.3.1.js HTTP/1.1" 404 1768
i only get "GET /static/js/dynamic-formset.js HTTP/1.1" 404 1777
do you have any idea why it doesn't work ? i guess that the static files are not loading.
Any help please ? Thank You
If you are using django 2.x.x make sure your static files are in a sub folder inside the static folder that corresponds to your app name.
See Other question
I am new to NodeJs and WebStorm. I have created a new "Node.Js Express App" using ejs template. I have created a Scripts folder inside my app root directory and trying load those files on my index.ejs file inside views folder.
When I run page in Chrome, it gives the following 404 error. For example, in my index.ejs body tag file, if I say:
<script type="text/javascript" src="Scripts/jquery.min.js"></script>
It will give following error:
"Failed to load resource: the server responded with a status of 404 (Not Found)"
I works fine in public folder by why it doesn't work if scripts and files are outside the public folder?
I'm having a really weird problem with Rails 3.2. None of the edits I make to 'app/assets/javascripts' has any effect on my app. I even completely removed all files from this directory and the scripts (which should have disappeared) continue to function like before.
Here are the server logs when I've removed all js files have been removed from 'app/assets/javascripts'
Started GET "/article/4" for 127.0.0.1 at 2013-05-23 15:37:55 +0900
Processing by ArticleController#show as HTML
Parameters: {"id"=>"4"}
Article Load (0.1ms) SELECT "articles".* FROM "articles" WHERE "articles"."id" = ? LIMIT 1 [["id", "4"]]
VocabularyWord Load (0.2ms) SELECT "vocabulary_words".* FROM "vocabulary_words" WHERE "vocabulary_words"."article_id" = 4 ORDER BY word
CultureNote Load (0.1ms) SELECT "culture_notes".* FROM "culture_notes" WHERE "culture_notes"."article_id" = 4 ORDER BY title
Rendered article/show.html.erb within layouts/article (1.2ms)
Rendered layouts/_footer.html.erb (0.7ms)
Completed 200 OK in 15ms (Views: 11.9ms | ActiveRecord: 0.4ms)
Started GET "/assets/normalize-2.1.1.css?body=1" for 127.0.0.1 at 2013-05-23 15:37:55 +0900
Served asset /normalize-2.1.1.css - 304 Not Modified (0ms)
Started GET "/assets/sez_core.css?body=1" for 127.0.0.1 at 2013-05-23 15:37:55 +0900
Served asset /sez_core.css - 304 Not Modified (0ms)
Started GET "/assets/article.css?body=1" for 127.0.0.1 at 2013-05-23 15:37:55 +0900
Served asset /article.css - 304 Not Modified (0ms)
Started GET "/assets/Acknowledgement-webfont.woff" for 127.0.0.1 at 2013-05-23 15:37:55 +0900
Served asset /Acknowledgement-webfont.woff - 304 Not Modified (0ms)
As you can see, the javascript assets are not being served and yet they continue to function in the app. What's going on???
I tried emptying my browser cache but that doesn't help.
One more thing. The javascript animation I want to edit kind of looks like it's working twice when the file is present. When I completely remove it appears to animate just once.
You might have the assets precompiled and in development it loads twice, once from root/app/assets, and the second from root/public/assets
but let's say you want to have the ability to precompile assets (to test if they will be compiled before deploy them to server) and don't want to bother deleting them each time you do precompile you can rename the prefix of the precompiled assets folder with:
config.assets.prefix = "/assets_dev"
place this in your development.rb and you can run assets_precompile but they won't load in application.
Urls for assets will show <link href="/assets_dev/bootstrap.... and will not look into assets folder.