I'm writing a Google app engine app and obviously the default web app framework is a subset of Django. As such I'm using it's templating engine.
My question is if I have say the following code:
template_values = {
'first':first,
'second':second,
}
path = os.path.join(os.path.dirname(__file__), 'index.html')
self.response.out.write(template.render(path, template_values))
And I want to reference the template value first in an externally included javascript file from index.html, do I just continue with the {{ first }} usage I'd go with in index.html itself or do I need to tell the framework about example.js somehow too so that it knows to replace the reference there?
Inserting the value into the javascript is probably a bad idea; wouldn't it make more sense for the script to be static and to have it grab the data either out of the DOM (assuming it's part of the HTML page you're rendering) or get the necessary data from the server using an AJAX call?
Disclaimer: my knowledge of app engine is limited so this answer may not serve your purpose.
In Django if you need to be able to pass variables from a view to a JS file you will have to ensure that the file is parsed by the template engine. In other words the file has to be served by Django. This means for e.g. that if you have a JS file in a media directory that is served by say, Nginx, you will not be able to use template variables in it.
I would expect the same to apply for app engine. But then see the disclaimer. I might be totally wrong :P
Related
I'm using gunicorn and nginx to serve a flask application, my website has a blogging feature where users can write blogs, once they do, their input is saved as an html file (I use tinyMCE to generate it) and a flask view is added to a views.py file. Now, in deployment, I just used
use_reloader=True
This ensured that every time a new file was added, it was detected, now in production, I don't know how to implement it, gunicorn has --reload option but the docs say that it's only for development. Can someone please provide an insight on how to implement this feature? Thanks!
You don't need a new view for every html file. You could use a generic view that renders the appropriate html according to the url requested.
I want to serve a react project with Flask.
I need the index HTML to be served as a flask template so I can pass in a variable from Flask,
and the other static files (css, js, favicons) as normal static files.
How can I achieve that?
Edit: I just had the html sent as a flask template and put the static files into a folder which I declared as the static dir in flask.
As far as I know, you can not do that. Flask uses template htmls that are rendered on the server. Now if you ask whether can you code a react renderer for server-side rendering with Python/flask?, might be possible, I guess. But people built big companies around this idea, for example Vercel. So better team up. What you can do though you can make flask and react communicate through different ports. i.e. code your Flask back-end as a rest-api and build the react front-end.
I am reading through the following tutorial:
http://v1k45.com/blog/modern-django-part-1-setting-up-django-and-react/
I can't quite grasp what the added value is of using something like django-webpack-loader to fully integrate react.js and django when you can completely decouple django from react, running a separate frontend which links to a DRF rest api.
I may be comparing apples to oranges here, but I am not sure. Any help ?
From the django-webpack-loader tutorial:
Now that we’ve handed off the build process webpack, only thing we need on the django side is to know which bundle to include in our html pages. This is where django-webpack-loader comes in. It’ll also raise exceptions when webpack fails to build a bundle and will show some useful information to help debug the problem. During development, webpack loader will also block requests while a new bundle is being generated so that only the latest bundles are loaded.
This is the core functionality of that loader. It tells django which are the current bundles to be served. It does not server side render your react app nor does it replace an API that the app needs to consume.
When developing a react app you usually use some kind of bundler that transpiles your javascript code to es5, uglyfies and minifies it. So every time your code changes a new bundle will be created containing your new javascript. A lot of people are using webpack for this task.
Now when a request arrives in django it needs to serve the basic html along with the css and js to be loaded by the client that contains the react app. So django needs to know the path to the files to link. But the path may constantly change when webpack rebuilds them. django-webpack-loader helps you to keep track of these changes and includes the correct paths to the current bundles for your react app to be fetched.
It is not a replacement for an API. Its sole task is to resolve the correct paths to your react app files.
EDIT
So the primary purpose of django-webpack-loader is to ensure that the paths to the most recent build are resolved correctly and in turn can be served. What is the reason these paths will change ?
Weppack appends a random hash to a new bundle like bundle.4j2a032fg.js. This way django can tell the client to cache the script so that it does not have to be re-request it every time. The client will only request a new bundle if the url/path changed. But this also requires that django knows the newest bundle with the correct hash.
does server side rendering occur with the use of Django templates ?
Server Side Rendering (SSR) in the context of react means that a nodejs server actually runs the react application once on the server to produce the initial markup of the app. This can then be statically served with the app. It reduces the perceived loading time for the user because the initial state of the app will immediately be shown and it allows for search engines to statically analyse the page which is good for SEO.
While django does render templates it is only the static html around the react app which it will render by default. Django does not render the react app itself. The react app still needs to initially render itself on the client. So to enable django do do true server side rendering you would have to run a nodejs process next to django that does the static rendering of the react app for django to serve.
In the tutorial they are using templates. Templates are loaded in the backend. So user gets fully rendered page.
With django rest framework you need to write seperate fronend. More about this: https://nickjanetakis.com/blog/server-side-templates-vs-rest-api-and-javascript-front-end
Is there a way to load a template from a source which is not hosted on the application itself? For example, in order to load a template on the application itself (hosted by the appengine app):
html = template.render("admin/my_template.html", params)
I would like to do something like:
html = template.render("http://www.otherhost.com/external_template.html", params)
Is there a mechanism to allow such a behavior?
Thanks
Ofcourse you can load templates from other apps. To load templates you have to fetch the templates.
But using an editor is also not very difficult. I use codemirror to edit a HTML textarea.
See this list of demos : http://codemirror.net/demo/
Editing a Jinja txt mail template example:
Templates are just strings. If you can get the text, you can parse it as a template.
In this case you would need to make a request for the file using urllib, get the response, and then use template.Template(content) to convert it to a template object.
However, I must say I still think keeping it in the datastore is a better bet. I'm not sure why you would need an editor for that - why not just cut and paste the content into a field in the GAE admin console, or using the remote API to set it?
When localising Django application the makemessages command simply parses all the TXT, HTML and PY files and generates PO files for them but when localising JS files, you need to run the djangojs command. I haven't delved into the Django source to figure out why this done differently. Could someone explain?
I've read that in production environments, Apache is used to serve the application files while a simple proxy like Nginx is used to serve static files as this greatly reduces the load on the application server. With this scenario, I guess it works like this: when rendering a template, Django checks the requested locale, loads the appropriate localisation file and serves the template but JS on the other hand being served as static media doesn't get parsed by Django. Is this it?
(Its my first foray in to the world of localisation with Django and I'm packed full of question, many of who's answers I can't seem to find and therefore this post.)
Thanks
The reason why it's handled differently is in the docs.
Adding translations to JavaScript poses some problems:
JavaScript code doesn't have access to a gettext implementation.
JavaScript code doesn't have access to .po or .mo files; they need to be delivered by the server.
The translation catalogs for JavaScript should be kept as small as possible.
So essentially, the internal Python translation is done on the server. But for JS, there's another file served by the server, which contains all the required translations for user's language. And the translation is done on the user's side. So as you can see, it's a completely different strategy. Django helps by adding similar interface for JS files, even though they're handled in a completely different way.
I guess it works like this: when rendering a template, Django checks
the requested locale, loads the appropriate localisation file and
serves the template but JS on the other hand being served as static
media doesn't get parsed by Django. Is this it?
You are right in the first part, about handling templates. Handling JS works as I've explained above.
Note that Django JS translation mechanism, doesn't treat JS translations as static files. It uses a Django view to generate the JS file everytime (javascript_catalog mentioned in the docs linked in the first line).
That is one of the problems I've encountered. Such files don't need to be generated on every request. There are some projects that actually let you pack those JS translations as static files and enable you to cache them properly (like django-mediagenerator).