Developing and deploying Vuejs app with django

Question

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.

I think what I would do is change npm run build to put the files straight into your django static folder, since there's really no benefit to putting them in the dist/static folder and then transferring them. I'm not really sure why the generated filenames wouldn't always be the same, which would mean you shouldn't have to change your template at all. I'm rather new to Vue myself, but hope this helps! — Christopher Shroba
– Christopher Shroba, Commented Mar 17, 2017 at 17:16
In addition to @ChristopherShroba maybe django-webpack-builder might help you. — nik_m
– nik_m, Commented Mar 17, 2017 at 17:17
@ChristopherShroba Yes, I think that's one way to do it. How are you handling the naming of the bulid files though? — Robin
– Robin, Commented Mar 17, 2017 at 17:55

brianf · Accepted Answer · 2017-10-17 11:08:04Z

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))

Collectives™ on Stack Overflow

Developing and deploying Vuejs app with django

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related