Package: django-js-routes
Django-js-routesis a Django application allowing to expose and perform reverse lookups of
Django named URL patterns on the client side.Table of ContentsMain requirementsInstallationUsageSettingsAdvanced featuresInserting only the serialized URLs in Django templatesDumping the Javascript routes resolverLicenseMain requirementsPython 3.6+, Django 3.2+.InstallationTo install Django-js-routes, please use thepipcommand as follows:$pipinstalldjango-js-routesOnce the package is installed, you’ll have to add the application toINSTALLED_APPSin your
project’s settings module:INSTALLED_APPS=(# all other apps...'js_routes',)You can then define which URL patterns or URL namespaces you want to expose to the client side by
setting theJS_ROUTES_INCLUSION_LISTsetting. This setting allows to define which URLs should be
serialized and made available to the client side through the generated and / or exported Javascript
helper. This list should contain only URL pattern names or namespaces. Here is an example:JS_ROUTES_INCLUSION_LIST=['home','catalog:product_list','catalog:product_detail',]Note that if a namespace is included in this list, all the underlying URLs will be made available to
the client side through the generated Javascript helper. Django-js-routes is safe by design in the
sense thatonlythe URLs that you configure in this inclusion list will be publicly exposed on the
client side.Once the list of URLs to expose is configured, you can add the{% js_routes %}tag to your base
template in order to ensure that the Javascript helper is available to you when you need it:{% load js_routes_tags %}<html><head></head><body><!-- At the bottom of the document's body... -->{% js_routes %}</body></html>UsageThe URL patterns you configured through theJS_ROUTES_INCLUSION_LISTsetting can then be
reversed using the generatedwindow.reverseUrlfunction, which can be used pretty much the
“same” way you’d usereverseon
the Django side:window.reverseUrl('home');window.reverseUrl('catalog:product_list');window.reverseUrl('catalog:product_detail',productId);window.reverseUrl('catalog:product_detail',{pk:productId});SettingsJS_ROUTES_INCLUSION_LISTDefault:[]TheJS_ROUTES_INCLUSION_LISTsetting allows to define the URL patterns and URL namespaces that
should be exposed to the client side through the generated Javascript helper.Advanced featuresInserting only the serialized URLs in Django templatesBy default, the{% js_routes %}template tag only allows to trigger the generation of the
serialized URLs (which are stored in a Javascript object on thewindowobject) and to include a
Javascript URL resolver function in your HTML using the Django’sstatictemplate tag.
Actually, a standard use of the{% js_routes %}statement is equivalent to:{% js_routes routes_only=True %}<scriptsrc="{% static 'js/routes/resolver.js' %}"></script>Theroutes_onlyoption allows to only include the serialized URLs in the output of{% js_routes %}. It gives you the ability to include the Javascript URL resolver that comes with
Django-js-routes using anotherstaticstatement. This also allows you to cache the output of the{% js_routes routes_only=True %}statement if you want (so that serialized URLs are not
generated for every request).Dumping the Javascript routes resolverAs explained earlier, the{% js_routes %}template tag triggers the generation of the serialized
URLs and includes a client-side URL resolver in the final HTML. One downside of this behaviour is
that the serialized URLs need to be generated every time your HTML template is rendered.Instead it is possible to just dump the whole list of serialized URLs AND the URL resolver function
into a single Javascript module file. This can be achieved using thedump_routes_resolvercommand, which can be used as follows:$pythonmanage.pydump_routes_resolver--format=default--output=my_exported_resolver.jsThe--outputoption allows to specify to which file the serialized routes and resolver function
should be saved while the--formatoption allows to specify the Javascript format to use.--formataccepts the following values:defaultincludes the routes as an object that is associated to thewindowobject while the
URL resolver is available through thewindow.reverseUrlfunction (this corresponds to the
behaviour provided by a standard use of the{% js_routes %}template tag)es6allows to save the routes and the URL resolver as an ES6 module where thereverseUrlfunction is the default exportLicenseMIT. SeeLICENSEfor more details.