Menu
I have built a fairly simple web app in Vuejs, which was running with its default npm run dev command with webpack. Vue app was utilizing the api from Django that I have built using django-rest-framework. And whenever there was a change in Vue app it will automatically hot reload, which is pretty awesome.
Now I would like run the Vue app using django instead of webpack. What I mean is that Django will respond with an html template file, and Vuejs app will run on that html file for a single page application.
What I am doing now is first run this command:
npm run build
Then I copy the dist/static/ folder files into the django static folder. And finally load it into the template:
index.html
{% load static %}
<!DOCTYPE html>
<html>
<head>
...
...
<link href="{% static "css/app.e446b60204fec1f9f5510c711523ffca.css" %}" rel=stylesheet>
</head>
<body>
<div id="app"></div>
<script src="{% static "js/manifest.88376ea5d07804f39ff7.js" %}"></script>
<script src="{% static "js/vendor.e0e5105739e9947a23e7.js" %}"></script>
<script src="{% static "js/app.571e9140518a5bae898c.js" %}"></script>
</body>
</html>
Now later on, if I need to change the Vue app, I have to build it again, copy the files and load it inside the template, which seems pretty lengthy.
So, I am hoping there is better and short way to mix up both Django and Vuejs.
204
Introduction. Django is a Python-based backend framework used to create native applications or APIs using the Django rest framework package. We can also combine it with Vue. js, a JavaScript-based front-end framework, in building applications.
Js and Python work together. To get started with Vue. Js, first you need to make sure you have Node. js installed.
There is a great article here explaining how to go about running a Vue app within a django template.
https://ariera.github.io/2017/09/26/django-webpack-vue-js-setting-up-a-new-project-that-s-easy-to-develop-and-deploy-part-1.html
It pretty much explains how to run everything, using the latest Vue app template provided with vue-cli. Additional packages used are django-webpack-loader to render the js packages in the template, and the webpack-bundle-tracker to allow Hot Module Replacement within the django app.
You can play around with the webpack / django static files set up to run the vue app from any location and build the static files to whatever location suits your purpose.
One additional step I took was to write a custom template tag to wrap the render_bundle function in django-webpack-loader. To serve the app after a production build with webpack you need to include:
{% render_bundle 'manifest' %}
{% render_bundle 'vendor' %}
{% render_bundle 'app' %}
This will throw an error when serving the app from the webpack dev server. Catching that exception will allow it to fail silently and you can develop away with all the benefits of the dev server. Eg.
from webpack_loader import utils
from webpack_loader.exceptions import WebpackBundleLookupError
from django.utils.safestring import mark_safe
@register.simple_tag
def render_bundle(bundle_name, extension=None, config='DEFAULT', attrs=''):
try:
tags = utils.get_as_tags(bundle_name, extension=extension, config=config, attrs=attrs)
except WebpackBundleLookupError as e:
return''
return mark_safe('\n'.join(tags))
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
