ES6 modules are easy enough to leverage, however I am struggling with how to get them to work in both dev and prod. In dev, they're stored in Django's static folder, which means I can import them like this:
import { buildTable } from './customTable.js';
And in the html templates:
<script type="module">
import { buildTable } from '../../static/customTable.js'
example('hello world')
</script>
However, in prod, the static folder is on a different webserver, so these paths wont be the same. What is the best way to get these modules to load both in dev and prod?
The solution is to use Django template syntax to import the js modules:
import { example } from '{% static "test.js" %}'
Related
I'm running into issues with Flask caching my bundle.js file despite setting app.config['SEND_FILE_MAX_AGE_DEFAULT'] = 0 when I'm running webpack in watch mode, so I've decided to add a build version to my bundle.js in an effort to break the browser cache.
Presently, I have:
<script src="{{url_for('static', filename='bundle.js')}}"></script>
in my html file and I'll need to add a variable to it. The problem is I don't know what the version will be, so is there a way to grab the file name in flask, and send it in with my render_template? I imagine something like: <script src="{{url_for('static', filename='bundle{}.js'.format(version))}}"></script>
and then grabbing the version from app.py by looking in the static folder for a file that begins with bundle, has an integer, and ends with .js
In your app.py file:
app.jinja_env.globals['js_bundle_file'] = 'bundle-1.1.js'
In your template:
<script src="{{url_for('static', filename=js_bundle_file)}}"></script>
Instead of hardcoding your bundle file, you could also look for it using a slightly hacky list comprehension:
app.jinja_env.globals['js_bundle_file'] = [f for f in os.listdir('static') if f.endswith('.js') and f.startswith('bundle')][0]
or this cleaner looking glob:
import glob
app.jinja_env.globals['js_bundle_file'] = glob.glob('static/bundle*.js')[0]
I'm using Django 1.9, React and webpack, I used externals to load the django I18n functions such as gettext in my javascript files.
This is loaded like this from a view :
<script type="text/javascript" src="{% url 'django.views.i18n.javascript_catalog' %}/0"></script>
Here is my webpack config :
externals: {
// require("jquery") is external and available
// on the global var jQuery
"jquery": "jQuery",
"utils": "utils",
"gettext":"gettext",
"django":"django",//I18n functions are encapsulated in the django object
},
In my jsx files I load gettext like this :
import {gettext, interpolate, ngettext} from 'django'
render(){
var login_header_text = gettext("blablabla.");
....
Actually almost everything works, when I use django-admin makemessages -d djangojs -l it recovers many gettext, however some gettext are ignored by the script so sometime I have to put the gettext at the beginning of my render function and then it works..., I don't know why this is happening.
In the end with my technic I can make it work totally but maybe I did something wrong. Maybe I should generate mo file with grunt and load it dynamically with po loader with webpack because I will need soon to load them dyamically into the page.
Maybe you can guide me a bit ? Thanks
I want to display graphs offered by the bokeh library in my web application via django framework but I don't want to use the bokeh-server executable because it's not the good way. so is that possible? if yes how to do that?
Using the Embedding Bokeh Plots documentation example as suggested by Fabio Pliger, one can do this in Django:
in the views.py file, we put:
from django.shortcuts import render
from bokeh.plotting import figure
from bokeh.resources import CDN
from bokeh.embed import components
def simple_chart(request):
plot = figure()
plot.circle([1,2], [3,4])
script, div = components(plot, CDN)
return render(request, "simple_chart.html", {"the_script": script, "the_div": div})
in the urls.py file we can put :
from myapp.views import simple_chart
...
...
...
url(r'^simple_chart/$', simple_chart, name="simple_chart"),
...
...
in the template file simple_chart.html we'll have :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Experiment with Bokeh</title>
<script src="http://cdn.bokeh.org/bokeh/release/bokeh-0.8.1.min.js"></script>
<link rel="stylesheet" href="http://cdn.bokeh.org/bokeh/release/bokeh-0.8.1.min.css">
</head>
<body>
{{ the_div|safe }}
{{ the_script|safe }}
</body>
</html>
And it works.
You don't need to use bokeh-server to embed bokeh plots. It just means you'll not be using (and probably don't need) the extra features it provides.
In fact you can embed bokeh plots in many ways like generating standalone html, by generating bokeh standalone components that you can then embed in you django app when rendering templates or with the method we call "autoloading" which makes bokeh return a tag that will replace itself with a Bokeh plot. You'll find better details looking at the documentation.
Another good source of inspiration is the embed examples you can find in the repository.
It is also possible to have it work with AJAX requests. Let's say we have a page loaded and would like to show a plot on button click without reloading the whole page. From Django view we return Bokeh script and div in JSON:
from django.http import JsonResponse
from bokeh.plotting import figure
from bokeh.resources import CDN
from bokeh.embed import components
def simple_chart(request):
plot = figure()
plot.circle([1,2], [3,4])
script, div = components(plot, CDN)
return JsonResponse({"script": script, "div": div})
When we get AJAX response in JS (in this example Jquery is used) the div is first appended to the existing page and then the script is appended:
$("button").click(function(){
$.ajax({
url: "/simple_chart",
success: function(result){
var bokeh_data = JSON.parse(result);
$('#bokeh_graph').html(bokeh_data.div);
$("head").append(bokeh_data.script);
}});
});
It must put {{the_script|safe}} inside the head tag
Here's a flask app that uses jquery to interract with a bokeh plot. Check out the templates/ for javascript you can reuse. Also search for bokeh-demos on github.
I am using flask and trying to get the dygraph sample to work. Here is the sample code (2nd example from the tutorial page: http://dygraphs.com/tutorial.html):
<html>
<head>
<script type="text/javascript"
src="dygraph-combined.js"></script>
</head>
<body>
<div id="graphdiv2"
style="width:500px; height:300px;"></div>
<script type="text/javascript">
g2 = new Dygraph(
document.getElementById("graphdiv2"),
"temperatures.csv", // path to CSV file
{} // options
);
</script>
</body>
</html>
Here is my Flask code (I'm trying to use render_template()):
from flask import Flask, render_template
app = Flask(__name__)
#app.route('/')
def render_plot():
return render_template('sample.html')
if __name__ == '__main__':
app.run()
When I run this through python firebug gives me the error "Dygraph is not defined." from the line g2 = new Dygraph(
Sample.html works in my folder, but it does not work when I try to access it from my url after running my flask code from python. My folders look like this:
FlaskStuff/main.py
FlaskStuff/templates/sample.html
FlaskStuff/templates/dygraph-combined.js (To load sample.html in my folder).
FlaskStuff/js/dygraph-combined.js
I am new to Flask. Similar answers did not help me to solve this problem.
Where is dygraph-combined.js located? It needs to be somewhere it can be served. You will most likely what to place it inside your static folder. It's a fairly common practice to group like files inside static (e.g., css, js).
Using this structure
static/
js/
dygraph-combined.js
you'll want to update sample.html as follows
<script type="text/javascript" src="{{ url_for('static', filename='js/dygraph-combined.js') }}"></script>
This will allow the Flask development server to serve the file. You'll also want to add a rule to your HTTP server to serve content from /static directly.
You will also have to do a similar thing for the temperature.csv file. (I've placed it in the static folder)
"{{ url_for('static', filename='temperatures.csv') }}", // path to CSV file
I am trying to use url-names in my javascript/jquery files for AJAX requests and I have found several solutions that can solve this problem. The one that I am currently using is the following.
I define a url to serve javascript files:
urls.py
url(r'^js/([\w\.\-]+)/([\w\.\-]+)/$', 'views.get_javascript_file', name='get_javascript_file')
url(r'^getmoredicus/$', 'load_discussions', name="load-discus"),
Then I define the view that renders the javascript files.
views.py:
def get_javascript_file(request, app_name, js_file):
'''
Used to request and serve rendered javascript/jquery files.
'''
return render_to_response("%s/%s.js" % (app_name, js_file),
context_instance=RequestContext(request))
Now in the html files, we can use the get_javascript_file url to get the rendered javascript files.
html files:
<script type="text/javascript" src="{% url get_javascript_file 'myapp' 'jsfile' %}"></script>
Now in any javascript file, I can access the url-names through {% url url-name %}.
Questions:
1) Is there a better/faster way to use url-names in javascript files? I know that there are some apps already created to accomplish this but I want to get everyone's(django experts) opinion on the best way to accomplish this.
2) Can we cache the rendered javascript files after they have been rendered the first time so that in each subsequent request, we don't have to render them again? If yes, then how can we go about doing that.
3) In this method, we are rendering the script files from their apps folders. Is there a way to access the static files located in STATIC_ROOT from the get_javascript_file view? I am just thinking about how this would work in a production environment. Is it a good practice to access static files from their apps folders rather than putting them in STATIC_URL and accessing them from there?
NOTE
I know that there are already some questions on SO that answer some parts of this question, but I just wanted to get to the bottom of this once and for all for future django learners. What is the best way to use url-names in javascript or any script for that matter?
I'm not a fan of running external js through the view rendering. Especially if you're using something like django-compressor to compress and cache your js files.
I prefer to just include the variables in a script tag prior to including the external files.
<script>
my_var = "{{ MY_PROPERTY }}"
</script>
<script type="text/javascript" src="{{ STATIC_URL }}js/external_script.js"></script>
That solution is also not always ideal, but I'm open to other solutions.