I have an odd case where I'm trying to serve a static index.html file that holds a javascript bundle from webpack in it for vue.js files, but it is sending the incorrect javascript file contents.
I've tried both sending the html file as a template view and simply reading the file contents and sending it as an html response. It sends the html file itself correctly, but instead of sending the contents of the javascript file it just copies the index.html content into the javascript file.
I checked to make sure that I wasn't accidentally overwriting the javascript file with html content and that's not the case, the javascript is in correct form, but when it is sent to the browser this is what is seen:
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>testprojsimple</title>
</head>
<body>
<div id="app"></div>
<script src="js/myvuejs.bundle.js"></script>
</body>`
</html>
myvuejs.bundle.js:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>testprojsimple</title>
</head>
<body>
<div id="app"></div>
<script src="js/myvuejs.bundle.js"></script>
</body>`
</html>
Any ideas on why it would be re-sending the index.html content as the javascript file as well?
Edit:
I'm in development mode currently, serving by simply saying in views:
def indexView(request):
return HttpResponse(open("file/to/static/html/file/index.html").read())
Settings.py:
STATIC_ROOT = os.path.join(BASE_DIR,'static/')
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
urls.py:
urlpatterns = [
url(r'^', indexView),
]
My goal is to avoid serverside rendering, using client-side frameworks to reach into a django backend that serves data content, like json, etc...
The regex ^ matches every single URL; it just means "any string that starts", which of course is every string. You should terminate the pattern as well: ^$, so that it only captures the empty string.
Related
I am new to Django, I am working in python 3.5, I linked CSS using Jinja but I am not able to see the CSS style within my HTML file, even thought I am getting 200 status in my network and the CSS file is loaded but the style is not working. Can you help me.
here is my html file
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>home</title>
<link rel="stylesheet" type="text/css" href="{%static
'posts/customstyle.css'%}">
</head>
<body>
<div class="container">
<h1>This is the HTML file</h1>
</div>
</body>
and my CSS file is also within 'static' folder within my project folder. I have tried changing the name but nothing is happening.
All I get in the console is:
Resource interpreted as Stylesheet but transferred with MIME type application/x-CSS.
While my network is pretty healthy and I am getting my files uploaded properly.
Here is what I am getting in console:
file uploads sucessfully
style showing but not working
I have an angular 2 front-end with already written links between html js, css and other files such as images, that I would like to serve using Django.
The structure from Angular 2 looks like following:
-->index.html
-->test.js
-->test.css
HTML file:
<!doctype html>
<html lang="en">
<head>
<link href="test.css" rel="stylesheet"/>
</head>
<body>
<script type="text/javascript" src="test.js">
</body>
I wouldn't like to change the given paths from the angular 2 app, instead I would like to know the workaround to serve this files in django without using "/static/< appname>/" or "/static/" prefix or template tags in every link.
Update
Trying to avoid
<!doctype html>
<html lang="en">
<head>
<link href="/static/test.css" rel="stylesheet"/>
</head>
<body>
<script type="text/javascript" src="/static/test.js">
</body>
and avoiding this:
{% load static %} <link href="{% static "example.jpg" %}" rel="stylesheet"/>
In other words, trying to adapt django builtin webserver to serve angular files without adapting ("static" prefix or tag) them to django.
Thank you in advance!
You say you want to "serve your files" from Django, but I think you really want to serve them from something like Nginx. For example,
location = /js/test.js {
root /path/to/js/;
}
in your nginx file. For the purposes of Angular2 URLs, you can pretend that Django doesn't exist.
So I want to use the console of Mozilla in my computer to see what errors have the page that is normally executed by Pepper robot in his tablet, because console.log() is not displayed on Choregraphe log.
I have tried to call the robot qimessaging.js library from computer but it throws an error:
SyntaxError: The URI is malformed. qimessaging.js:12
The html is there:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Video</title>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type = "text/javascript" src="http://nao:nao#192.168.1.238/libs/qimessaging/1.0/qimessaging.js"></script>
<script type="text/javascript" src="js/video.js"></script>
</head>
<body>
<canvas width = "320px" height = "240px"></canvas>
<p id="log">log</p>
</body>
</html>
Is there a way to call the qimessaging.js without errors to test the web in my computer?
Instead of console.log() you can use alert().
Also you can connect with your PC browser with this link robot_ip/apps/your_app_name/index.html', but your index.html must be in sub folder named html.
You can also test from your computer if you import the script from the robot directly:
<script src="http://12.34.56.78/libs/qi/2/qi.js"></script>
Then when you open a session, add the robot url as a third argument of the QiSession:
QiSession( onSuccess, onError, "12.34.56.78:80" );
Then your browser will connect to your remote robot.
When I use the url(r'^consultar/$', 'rcb.core.views.consultar'), in browser http://localhost:8000/consultar the consultar.html file find the jquery-1.11.2.min.js file, appearing the following information:
Remote Address:127.0.0.1:8000
Request URL:http://localhost:8000/static/js/jquery-1.11.2.min.js
Request Method:GET
Status Code:200 OK
But when I use the url(r'^proposta/consultar/$', 'rcb.core.views.consultar'), in browser http://localhost:8000/proposta/consultar/ the consultar.html file not find the jquery-1.11.2.min file.js. Appearing the following error:
Remote Address:127.0.0.1:8000
Request URL:http://localhost:8000/proposta/static/js/jquery-1.11.2.min.js
Request Method:GET
Status Code:404 NOT FOUND
Could someone help me fix the code to run the url http://localhost:8000/proposta/consultar/
Below is the code and the structure of files and directories:
consultar.html
{% extends 'base.html' %}
....
base.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../static/js/jquery-1.11.2.min.js" type="text/javascript"></script>
</head>
<body>
{% block corpo %}{% endblock %}
</body>
</html>
views.py
def consultar(request):
propostas_salvas=search()
return render_to_response('consultar.html', { 'propostas_salvas' : propostas_salvas}, context_instance=RequestContext(request))
My structure of files and directories is:
rcb (Project)
core (is the App)
static
js
jquery-1.11.2.min.js
template
base.html
consultar.html
views.py
...
...
...
You should use path to javascript relative to your domain, not to document you're requesting, because for each document relative path to javascript would be different. So change that line:
<script src="../static/js/jquery-1.11.2.min.js" type="text/javascript"></script>
into:
<script src="/static/js/jquery-1.11.2.min.js" type="text/javascript"></script>
Or even better, load static in your template and use static file management built into django:
<script src="{% static "js/jquery-1.11.2.min.js" %}" type="text/javascript"></script>
That way you can change later your STATIC_URL in settings and django will correct path to your static files. Even if they are on different domain (some CDN or no-cookie domain just for your static files).
I thought I had properly done my Django to Heroku deployment, but I'm stuck in an infinite loop of HTTP redirect and I can't figure out the way out.
Here is my settings.py
STATIC_ROOT = ''
STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(PROJECT_PATH, '../static/'),
)
I have my stacic files stored in project_root/static.
When I ask for my CSS file through a HTTP request, I have get it right (http://heroku-app-name/static/styles/base.css will render my CSS).
But when I request my main page, I have no CSS in my Safari browser ... but everything is right in a Firefox browser.
In my index page code (in browser):
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="/static/styles/base.css" media="all" />
In my Safari's developer box I see some strange redirections:
http://myapp.herokuapp.com/static/styles/contracts/contracts/contracts/
[Error] Failed to load resource: too many HTTP redirections (contracts, line 0)
Where do you think my Djando is flawed?