Not use Django static files - javascript

I am quite new to Django, and I hope my question is not too silly. I am currently running my project locally, and each time I do an API call with the browser, I see the server log something similar:
my_table | [08/Jan/2023 20:20:42] "GET /static/rest_framework/css/default.css HTTP/1.1" 404 179
my_table | [08/Jan/2023 20:20:42] "GET /static/rest_framework/js/bootstrap.min.js HTTP/1.1" 404 179
my_table | [08/Jan/2023 20:20:42] "GET /static/rest_framework/js/jquery-3.5.1.min.js HTTP/1.1" 404 179
my_table | [08/Jan/2023 20:20:42] "GET /static/rest_framework/js/csrf.js HTTP/1.1" 404 179
my_table | [08/Jan/2023 20:20:42] "GET /static/rest_framework/js/ajax-form.js HTTP/1.1" 404 179
my_table | [08/Jan/2023 20:20:42] "GET /static/rest_framework/js/default.js HTTP/1.1" 404 179
my_table | [08/Jan/2023 20:20:42] "GET /static/rest_framework/js/prettify-min.js HTTP/1.1" 404 179
There are a tons of static files that are served via the API. If I do the same with Postman or similar, here is the log:
my_table | [08/Jan/2023 20:25:12] "GET /api/v1/category/ HTTP/1.1" 200 2
It looks like it only sends the response I wanted, via JSON or whatever. I was wandering if there is a way to prevent Django from serving static files at all, since I will only use the Rest Framework, or maybe gRPC in the future, but never static files. I tried to delete the static file constant from settings, and then nothing worked anymore, so I was wandering if there is something I need to do in order to achieve this goal. Thank you for your help

It is pretty simple. You go to the installed APPS,and you will find something like:
BASE_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
]
Delete the one with django.contrib.staticfiles, and then you can delete also the static files root variables

Related

Leaflet map not appearing when sourcing leaflet.js and leaflet.css from directory with Flask

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.

How to Deploy Angular 7 Project to Google Cloud

I have built an Angular 7 application that works nicely when I do the ng serve command from my local mac or from a remote centos server.
This application is using php files that access MySQL data base both served on my google cloud.
Now after doing the gcloud app deploy the last thing I see on the screen is the message:
nebula#0.0.0 start /app
ng serve
sh: 1: ng: not found
and I am dead in the water.
I have tried so many different versions of app.yaml and cloudbuild.yaml file that I feel like i have not learned anything.
I have tried the same thing by starting with the very basic "Hero's" app and get the same issue.
i.e.
ng new xxx
cd xxx
npm install
ng serve
Then I see the default Heros screen in my browser.
I then create this app.yaml file
runtime: nodejs
env: flex
manual_scaling:
instances: 1
resources:
cpu: 1
memory_gb: 0.5
disk_size_gb: 10
service:
xxx
I then try to deploy using:
gcloud app deploy
When this finishes I get the message
Deployed service [xxx] to [https://xxx-dot-project.appspot.com]
When I go to that url, I get:
Error: Server Error
The server encountered an error and could not complete your request.
Please try again in 30 seconds.
The log file for this run is:
gcloud app logs tail -s xxx
Waiting for new log entries...
2019-05-04 15:27:35 xxx[20190504t102436] "GET / HTTP/1.1" 404
2019-05-04 15:27:35 xxx[20190504t102436] "GET /favicon.ico HTTP/1.1" 404
2019-05-04 15:28:56 xxx[20190504t102436] "GET / HTTP/1.1" 404
2019-05-04 15:32:45 xxx[prod] "GET / HTTP/1.1" 404
2019-05-04 15:32:50 xxx[prod] "GET / HTTP/1.1" 404
2019-05-04 15:33:06 xxx[prod] "GET / HTTP/1.1" 404
2019-05-04 15:33:10 xxx[prod] "GET /run HTTP/1.1" 404
2019-05-04 15:33:10 xxx[prod] "GET /favicon.ico HTTP/1.1" 404
2019-05-04 15:33:16 xxx[prod] "GET /run HTTP/1.1" 404
2019-05-04 15:33:16 xxx[prod] "GET / HTTP/1.1" 404
2019-05-04 15:33:19 xxx[prod] "GET /login HTTP/1.1" 404
2019-05-04 15:33:19 xxx[prod] "GET /favicon.ico HTTP/1.1" 404
2019-05-04 15:40:43 xxx[prod] "GET /login HTTP/1.1" 404
2019-05-04 15:40:46 xxx[prod] "GET /login HTTP/1.1" 404
2019-05-04 15:40:50 xxx[prod] "GET /login HTTP/1.1" 404
2019-05-04 15:40:50 xxx[prod] "GET / HTTP/1.1" 404
2019-05-04 15:40:53 xxx[prod] "GET / HTTP/1.1" 404
2019-05-04 16:01:50 xxx[20190504t105955] "GET / HTTP/1.1" 500
2019-05-04 16:01:51 xxx[20190504t105955] /bin/sh: 1: ng: not found
2019-05-04 16:06:19 xxx[20190504t105955] "GET / HTTP/1.1" 500
2019-05-04 16:06:20 xxx[20190504t105955] /bin/sh: 1: ng: not found
My question is can someone provide a trivial example of this process where the application runs in the google cloud?
After project is created publish your project on GitHub.
On GitHub Apps you have to install Google Cloud Build now, because it needs access to your repositories.
You also have to create a Google Cloud Project for your new application and enable Cloud Build and Cloud App Engine.
Please refer here for more details:-
https://medium.com/felixklauke/angular-google-cloud-build-app-engine-5e7c2038bdad
When deploying Ng7 application with PHP backend, I would rather advise you to use two different solutions:
Firebase Hosting optimized for SPAs with CDN to deploy the Ng app (change your environment.ts to direct it to the AE endpoints. You will build your application first using ng build and then deploy the artifacts, so there is even no need for the Angular tooling in the resulting package.
Use AppEngine to deploy your backend
Looks like the suggestion to go to firebase was the most useable option.
I am a lot closer to where I want to be and I now see a lot of useful extras.
You can deploy a SPA (like Angular) with an app.yaml similar to this:
runtime: nodejs10
env_variables:
NODE_ENV: production
handlers:
- url: /
static_files: dist/my-project/index.html
upload: dist/my-project/index.html
- url: /
static_dir: dist/my-project
You'd need to build locally your angular project beforehand with a ng build --prod, otherwise you need to set a predeploy command on your package.json, which will be called by gcloud app deploy (e.g. predeploy": "npm run lint && npm run build -- --prod --aot"). Also important, you need to make sure you ignore all files outside of dist folder with .gcloudignore file. This will prevent google cloud to upload those files.
# This file specifies files that are *not* uploaded to Google Cloud Platform
# using gcloud. It follows the same syntax as .gitignore, with the addition of
# "#!include" directives (which insert the entries of the given .gitignore-style
# file at that point).
#
# For more information, run:
# $ gcloud topic gcloudignore
#
.gcloudignore
# If you would like to upload your .git directory, .gitignore file or files
# from your .gitignore file, remove the corresponding line
# below:
.git
.gitignore
# Node.js dependencies:
node_modules/
webpack.config.js
src/
tsconfig.json
readme.md
ssl/
tslint.json
LICENSE
.editorconfig
.dockerignore
.gitignore
https://github.com/mrdulin/angular-apollo-starter includes all those files

Django : static files are not loaded

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

Why do browsers re-request scripts on non-200 response?

Save the following HTML as a local file. Something like /tmp/foo.html, then open that in Firefox (I'm on 49.0.2)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script src="http://localhost:1234/a.js"></script>
<script src="http://localhost:1234/b.js"></script>
<script src="http://localhost:1234/c.js"></script>
<script src="http://localhost:1234/d.js"></script>
<script src="http://localhost:1234/e.js"></script>
</body>
</html>
I don't have a server running on port 1234, so the requests don't even successfully connect.
The behavior I'd expect here is for all the requests to fail, and be done with it.
What actually happens in Firefox is all 5 .js files are requested in parallel, they fail to connect, then the last 4 get re-requested in serial. Like so:
Why?
If I boot a server on 1234 that always 404s, the behaviour is the same.
This particular example doesn't reproduce the same behavior in Chrome, but other similar examples is how I originally fell upon this behavior.
EDIT: Here's how I tested this happens when it 404's as well.
$ cd /tmp
$ mkdir empty
$ cd empty
$ python -m SimpleHTTPServer 1234
Then reloaded Firefox. It shows this:
The server actually sees all those requests too (the first 5 arrive out of order because they're requested in parallel, but the last 4 are always b, c, d, e, since they get re-requested in serial).
127.0.0.1 - - [02/Nov/2016 13:25:40] code 404, message File not found
127.0.0.1 - - [02/Nov/2016 13:25:40] "GET /d.js HTTP/1.1" 404 -
127.0.0.1 - - [02/Nov/2016 13:25:40] code 404, message File not found
127.0.0.1 - - [02/Nov/2016 13:25:40] "GET /c.js HTTP/1.1" 404 -
127.0.0.1 - - [02/Nov/2016 13:25:40] code 404, message File not found
127.0.0.1 - - [02/Nov/2016 13:25:40] "GET /b.js HTTP/1.1" 404 -
127.0.0.1 - - [02/Nov/2016 13:25:40] code 404, message File not found
127.0.0.1 - - [02/Nov/2016 13:25:40] "GET /a.js HTTP/1.1" 404 -
127.0.0.1 - - [02/Nov/2016 13:25:40] code 404, message File not found
127.0.0.1 - - [02/Nov/2016 13:25:40] "GET /e.js HTTP/1.1" 404 -
127.0.0.1 - - [02/Nov/2016 13:25:40] code 404, message File not found
127.0.0.1 - - [02/Nov/2016 13:25:40] "GET /b.js HTTP/1.1" 404 -
127.0.0.1 - - [02/Nov/2016 13:25:40] code 404, message File not found
127.0.0.1 - - [02/Nov/2016 13:25:40] "GET /c.js HTTP/1.1" 404 -
127.0.0.1 - - [02/Nov/2016 13:25:40] code 404, message File not found
127.0.0.1 - - [02/Nov/2016 13:25:40] "GET /d.js HTTP/1.1" 404 -
127.0.0.1 - - [02/Nov/2016 13:25:40] code 404, message File not found
127.0.0.1 - - [02/Nov/2016 13:25:40] "GET /e.js HTTP/1.1" 404 -
This has to do with edge-cases that could arise with parallel resource loading, where JavaScript is expected to block other resources from loading.
This behavior starts to get more-clear when you add a delay into the error responses. Here is a screenshot of the Firefox network panel with a 1-second delay added to each request.
As we can see, all 5 scripts were requested in parallel, as modern browser do, to reduce loading times.
However, except for the first one, those scripts that returned a 404 were re-requested, not in parallel but in series. This is almost-certainly to maintain backwards compatibility with some edge-cases with the legacy browser behavior.
Historically, a browser would load and execute one script at a time. Modern browser will load them in parallel, while still maintaining execution order.
So why might this matter?
Imagine if the first script request changed the application state, perhaps setting a cookie or something to authenticate further requests. With the new parallel loading, those scripts would be requested before this state was changed, and assuming the web application is well-enough designed, throw an error.
So the only way to ensure the other resources didn't error because the script did not have a chance to change the state before they were requested is to re-request the resources again.
In fact, this re-requesting behavior is not limited to just scripts, and can also be seen to effect images that error after a script tag that was loaded in parallel.
Potentially, because those images may have failed to load because a prior script did not execute first, they are all re-requested in parallel.
Interestingly, I can't find anything directly about this in the spec, but this section from The Living Standard suggests this behavior may actually violate the spec.
For classic scripts, if the async attribute is present, then the classic script will be fetched in parallel to parsing and evaluated as soon as it is available (potentially before parsing completes). If the async attribute is not present but the defer attribute is present, then the classic script will be fetched in parallel and evaluated when the page has finished parsing. If neither attribute is present, then the script is fetched and evaluated immediately, blocking parsing until these are both complete.
If parsing were actually blocked, then it would seem the following script tags and images should not have been read to be able to load. I suspect that the browsers reconcile this issue by not making the following tags available in the DOM until after execution.
Note:
The exact behavior you will see in these cases may vary a bit. Only those resources that were actually requested in parallel with a script will actually be reloaded. If an image afterwards errors, but it was not requested while a script was loading, then there is no need to re-request it. Additionally, it appears Chrome only triggers this behavior if the potentially-state-changing script does not error, however Firefox triggers this behavior even if it does error.

Migrating Django 1.3 to 1.10 Unwanted suffix added to admin urls

When I use any link on the admin page a "change/" suffix is added to my url's and they are not found. Things start out OK, but after jquery is loaded RelatedObjectLookups is loaded and subsequent urls have a "/change" appended. I've been looking at this problem for a few hours and have no idea where to go.
This is what my test server output looks like:
September 10, 2016 - 16:21:49
Django version 1.10.1, using settings 'adsync.settings'
Starting development server at http://192.168.56.101:8080/
Quit the server with CONTROL-C.
[10/Sep/2016 16:21:55] "GET /admin/ HTTP/1.1" 200 5558
[10/Sep/2016 16:22:05] "GET /admin/auth/user/ HTTP/1.1" 200 6876
[10/Sep/2016 16:22:05] "GET /admin/auth/user/static/admin/css/base.css/ HTTP/1.1" 302 0
[10/Sep/2016 16:22:05] "GET /admin/auth/user/static/admin/css/changelists.css/ HTTP/1.1" 302 0
[10/Sep/2016 16:22:05] "GET /admin/jsi18n/ HTTP/1.1" 200 3217
[10/Sep/2016 16:22:05] "GET /admin/auth/user/static/admin/js/core.js/ HTTP/1.1" 302 0
[10/Sep/2016 16:22:05] "GET /admin/auth/user/static/admin/js/vendor/jquery/jquery.js/ HTTP/1.1" 302 0
[10/Sep/2016 16:22:05] "GET /admin/auth/user/static/admin/js/jquery.init.js/ HTTP/1.1" 302 0
[10/Sep/2016 16:22:05] "GET /admin/auth/user/static/admin/js/admin/RelatedObjectLookups.js/ HTTP/1.1" 302 0
WARNING Not Found: /admin/auth/user/static/admin/css/base.css/change/
Not Found: /admin/auth/user/static/admin/css/base.css/change/
[10/Sep/2016 16:22:05] "GET /admin/auth/user/static/admin/css/base.css/change/ HTTP/1.1" 404 1870
WARNING Not Found: /admin/auth/user/static/admin/css/changelists.css/change/
Not Found: /admin/auth/user/static/admin/css/changelists.css/change/
[10/Sep/2016 16:22:05] "GET /admin/auth/user/static/admin/css/changelists.css/change/ HTTP/1.1" 404 1891
[10/Sep/2016 16:22:05] "GET /admin/auth/user/static/admin/js/actions.js/ HTTP/1.1" 302 0
[10/Sep/2016 16:22:05] "GET /admin/auth/user/static/admin/js/urlify.js/ HTTP/1.1" 302 0
[10/Sep/2016 16:22:05] "GET /admin/auth/user/static/admin/js/prepopulate.js/ HTTP/1.1" 302 0
[10/Sep/2016 16:22:05] "GET /admin/auth/user/static/admin/js/vendor/xregexp/xregexp.js/ HTTP/1.1" 302 0
WARNING Not Found: /admin/auth/user/static/admin/js/core.js/change/
Not Found: /admin/auth/user/static/admin/js/core.js/change/
[10/Sep/2016 16:22:05] "GET /admin/auth/user/static/admin/js/core.js/change/ HTTP/1.1" 404 1864
WARNING Not Found: /admin/auth/user/static/admin/js/vendor/jquery/jquery.js/change/
Not Found: /admin/auth/user/static/admin/js/vendor/jquery/jquery.js/change/
[10/Sep/2016 16:22:05] "GET /admin/auth/user/static/admin/js/vendor/jquery/jquery.js/change/ HTTP/1.1" 404 1912
WARNING Not Found: /admin/auth/user/static/admin/js/jquery.init.js/change/
Not Found: /admin/auth/user/static/admin/js/jquery.init.js/change/
[10/Sep/2016 16:22:05] "GET /admin/auth/user/static/admin/js/jquery.init.js/change/ HTTP/1.1" 404 1885
WARNING Not Found: /admin/auth/user/static/admin/js/admin/RelatedObjectLookups.js/change/
Not Found: /admin/auth/user/static/admin/js/admin/RelatedObjectLookups.js/change/
[10/Sep/2016 16:22:05] "GET /admin/auth/user/static/admin/js/admin/RelatedObjectLookups.js/change/ HTTP/1.1" 404 1930
WARNING Not Found: /admin/auth/user/static/admin/js/actions.js/change/
Not Found: /admin/auth/user/static/admin/js/actions.js/change/
[10/Sep/2016 16:22:05] "GET /admin/auth/user/static/admin/js/actions.js/change/ HTTP/1.1" 404 1873
WARNING Not Found: /admin/auth/user/static/admin/js/urlify.js/change/
Not Found: /admin/auth/user/static/admin/js/urlify.js/change/
[10/Sep/2016 16:22:05] "GET /admin/auth/user/static/admin/js/urlify.js/change/ HTTP/1.1" 404 1870
WARNING Not Found: /admin/auth/user/static/admin/js/prepopulate.js/change/
Not Found: /admin/auth/user/static/admin/js/prepopulate.js/change/
[10/Sep/2016 16:22:05] "GET /admin/auth/user/static/admin/js/prepopulate.js/change/ HTTP/1.1" 404 1885
WARNING Not Found: /admin/auth/user/static/admin/js/vendor/xregexp/xregexp.js/change/
Not Found: /admin/auth/user/static/admin/js/vendor/xregexp/xregexp.js/change/
[10/Sep/2016 16:22:05] "GET /admin/auth/user/static/admin/js/vendor/xregexp/xregexp.js/change/ HTTP/1.1" 404 1918
[10/Sep/2016 16:22:05] "GET /admin/auth/user/static/admin/img/search.svg/ HTTP/1.1" 302 0
[10/Sep/2016 16:22:05] "GET /admin/auth/user/static/admin/img/icon-yes.svg/ HTTP/1.1" 302 0
WARNING Not Found: /admin/auth/user/static/admin/img/search.svg/change/
Not Found: /admin/auth/user/static/admin/img/search.svg/change/
[10/Sep/2016 16:22:05] "GET /admin/auth/user/static/admin/img/search.svg/change/ HTTP/1.1" 404 1876
WARNING Not Found: /admin/auth/user/static/admin/img/icon-yes.svg/change/
Not Found: /admin/auth/user/static/admin/img/icon-yes.svg/change/
[10/Sep/2016 16:22:05] "GET /admin/auth/user/static/admin/img/icon-yes.svg/change/ HTTP/1.1" 404 1882
You can see the early on "../base.css" is loaded, but a subsequent url searches for "../base.css/change", and it is not found.
I'm relatively new to Django and javascript. I am good with Google searches and having no luck in finding relevant information.
Any help or suggestions would be appreciated.
This may not be the answer you want to hear, but I would recommend upgrading Django versions one at a time from 1.3 to 1.10, using each upgrade guide along the way.
Here's the relevant breaking changes of each release statement:
Django 1.4,
Django 1.5,
Django 1.6,
Django 1.7,
Django 1.8,
Django 1.9,
Django 1.10
It looks daunting, but chances are you're not using a lot of the features that changed in every release.
Very often with technical debt, it's tempting to take shortcuts, but that usually ends up putting you in even more technical debt, especially if you're not an expert with Django.

Categories

Resources