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).
Related
If I structure the first two lines of my HTML doc like this:
{% load static %}
<!DOCTYPE html>
It appears that none of the javascript or CSS run properly, and the webpage displays like this:
However, if I put any character after the {% load static %} expression,
For example, if I structure the first two lines of my HTML doc like this:
{% load static %}.
<!DOCTYPE html>
Then the scripts and CSS components run properly and the webpage displays as it should. Why is this?
Figured it out. For some reason, the content security policy that I had implemented was causing this issue. After removing the CSP, the static files began to behave in-line with expectations regardless of the presence/absence of a character after {% load static %}.
{% load static %}
<!DOCTYPE html>
You did it right but you have load the static files too like i did below.
<!-- js -->
<script type="text/javascript" src="{% static 'js/jquery.min.js' %}"></script>
<!-- js -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="{% static 'js/bootstrap.min.js' %}"></script>
<script src="{% static 'js/bootstrap-select.js' %}"></script>
You have to use this tag to load static files in template "{% static %}" this is the syntax for load static files.
#And give it the path in settings.py
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),
]
And store css and js in static folder in your project too.Than its gonna work.
Make sure that the STATIC_URL of your settings is correct.
It looks like a very basic question and I'm confused by the fact that I cannot find any sensible tutorial on that. I'm trying to setup Django + React production build. After running all kinds of transpilation, minification etc. I end up having .js and .css bundles, index.html and several other files like favicon, service-worker.js etc. Now I need to serve this with Django.
All of these files are static files and should probably be served as static files by the http server (nginx in my case). The variant I came up with was to modify index.html to make it a valid Django template: {% load static %} in the beginning, replace all hardcoded links with {% static 'filepath' %} and serve it using TemplateView, other files are served by nginx. This works fine, however, modifying build results looks like a bad idea. Generated bundles contain a unique hash for each build and I would need to replace that hash in the template after each build. I obviously can automate it but it looks weird. I would prefer not to touch build results at all, but how should I serve static files then? nginx is configured to serve static files under /static/ path and cannot serve files like service-worker.js as static files.
So the question is how do I configure Django + React for production so that I don't have to manually modify build results and can serve static files properly using nginx?
The main problem to combine React and Django is that Django wants to render the templates by itself, but React wants also to execute the render, since it has been created for that. That's why there a lot of approximations that use django just as as REST API when working with react.
But, if you want django to Render the templates to avoid having a Single Page Application (as react provides) and to use all the other tools from django, the main flow that we use in our company is:
You create your components, in js files. For example: component.js
You use babel to compile the JSX files to native Javascript, and babels creates, for example, component.build.js. Django will serve this compiled files, so react is going to be used only in develop tasks because all React code will be transformed to JS before moving to production. For django, all the react components will be just JS code already compiled.
You can use Webpack to automatically move component.build.js to a folder where django can serve them, for example your_project/static/your_app/component.buid.js
You create a django template base.html which will be used as the base template that all your templates will extend. Here you put the header and all your common scripts and styles. For example, bootstrap should be here if used. Remember to leave blocks in this base template to use them in the templates that are going to extend the base.html. Here is the base.html that we use:
{% with version="2.0" %}
<!DOCTYPE html>
{% load static %}
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="author" content="">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- base styles goes here -->
<!-- include here bootstrap or styles that are common to all your website -->
<link rel="shortcut icon" type="image/png" href="{% static 'favicon.ico' %}"/>
<!-- custom styles for each app go into this block-->
{% block app_styles %}
<!-- here will go the apps local styles -->
{% endblock %}
</head>
<body>
{% block app %}
<!-- This block will be used by the apps to load their react components -->
{% endblock %}
<!-- base js go here -->
<script src="{% static 'common/pluggins/jquery3.4.1.min.js' %}"></script>
</script>
<script src="{% static 'common/pluggins/fontawesome.js' %}"></script>
<script src="{% static 'common/scripts/base.js' %}?v={{version}}"></script> <!-- File for common utils -->
<!-- custom js for each app go here. You should define your Content() here -->
{% block local_scripts %}
<!-- here will go the app local scripts -->
{% endblock %}
</body>
</html>
{% endwith %}
Create the templates for each of your django apps, by extending the base.html. Remember to include here the <div> that is going to be used by react to render the content. Aslo, remember that this is the place to include the component.build.js compiled JS file that bable created before. Here there is an example that we use to build a dashboard.html in our website:
{% extends 'common/base.html' %}
{% load static %}
{% block app_styles %}
<link rel="stylesheet" href="{% static 'dashboard/styles/dashboard.css' %}?v={{version}}">
{% endblock %}
{% block app %}
<!-- Here is the div used by react -->
<div id="myreact-content"></div>
{% endblock %}
{% block local_scripts %}
<!-- IMPORTANT: Import here the compiled file -->
<script src="{% static 'component.build.js' %}"></script>
{% endblock %}
Set the correct urls.py in your projects and in your app
Set the correct configuration in setting.py to make accesible the static js/css files and the templates
Run your django server and You're done!
In this video you have a small guide on how to configure npm, babel and django. With a correct configuration, everything will be updated automatically when you change some code in your JSX (not compiled) files, so the develop tasks will be more friendly.
https://www.youtube.com/watch?v=Mx3ChaYA0Gw
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.
The top of my HTML template contains:
{% load inplace_edit %}
Header part contains:
{% inplace_static %}
Then in my body contents I am doing:
{% inplace_edit "action.action_state" %}
But it's not working. I have installed:
'bootstrap3',
'inplaceeditform_bootstrap', # it is very important that this app is placed before inplaceeditform and inplaceeditform_extra_fields
'inplaceeditform',
'inplaceeditform_extra_fields',
'bootstrap3_datetime',
I have tried 'django.template.loaders.eggs.Loader', both enabled and disabled.
It shows up as a clickable text, but when I click/double-click nothing happens. How do I get it to work?
Thanks,
Hec
After trying #Goin's suggestion I found that my JQuery files were not being correctly imported. had to move:
<script type="text/javascript" charset="utf-8" src="{% static 'srt/js/jquery-1.10.2.min.js' %}"></script>
<script type="text/javascript" charset="utf-8" src="{% static 'srt/js/jquery-ui.min.js' %}"></script>
to the top of my header block. Anyone working with Bootstrap, please make sure you import JQuery as the first thing in your templates.
Thanks
I want to print an image by using a img src tag in a Django template file "base.html":
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
<title>Foto</title>
</head>
<body>
<h1>My helpful timestamp site</h1>
<img src="google.png" / >
<hr>
<p>Made by ... </p>
</body>
</html>
In views.py I define:
def hello(request):
return render_to_response('base.html')
But the image does not show up in the browser. If I open it as a simple html file, it shows up in the browser.
In recent versions of django
<img src="{% static 'path/to/image.ext' %}"/>
That happens because Django does not know the path to this image.
Make a folder named static/, and then a folder named images/ in your project root(where your settings.py file resides).
my_project/
my_project/
settings.py
static/
images/
google.png
And then change it to:
<img src="{{STATIC_URL}}images/google.png" / >
More here.
You have got to add load static tag in the beginning of your Django template, best luck with below code.
{% load static %}
<img src="{% static 'path/to/image.ext' %}"/>