How to make Django and Vue play well together

Why

Django and Vue are both popular technologies but unlike some popular combinations (Ex: Rails-React or Laravel-Vue or .Net-Angular) there are no tutorials or guides for Django-Vue integration. This articles aims to relieve some pain points that could occur in setting up Django-Vue and also provide a few development tricks.

Webpack

Webpack is a module builder, it allows us to bundle our app together, helpful in deployment JS applications. It also

In Django-Vue (DV),  we use a Python package called django-webpack-loader and an npm package called webpack-bundle-tracker to bridge the connection in between Django and Vue.

Both of these packages read and write to a common file to communication with each other, the webpack-stats.json file.

Hot Reload

Hot Reload is a feature where in when the file changes the browser automatically refreshes the page and reflects the new changes in the user’s browser. Here too, DV uses webpack-stats.json file to indicate the file change, as soon as Django detects a file change in the JS app directory, Django writes it to the json file and on the front end, we use another library called webpack-dev-server, this library bundles our app again with the latest code and serves it from a proxy server. Now the browser picks up the new bundle app from the proxy server and refreshes the page thus reflecting the new changes. Having hot reload gives developers a good fluent REPL environment to work with.

Component Usage via Global registration

Using components in Django is obviously the ultimate goal. With the help of global registration we can solely focus on writing components and not worrying about any configurations. The global registration can be done in the app’s entry point, for ex: main.js or index.js. After global registration, simply putting the component name in Django template enables Vue to pick it up during run time on user’s browser and load the corresponding component.

Isolated Endpoint

Isolated endpoints give us the ability to test a component is complete isolation without any additional dependencies. We can achieve this using Django via a dedicated route. This route captures the component name via route params and can also capture props via query params. This is very handy when we are developing big container components which have many children components. Develop the children components in isolation and work your way towards completing the container component.

Test Runner

In this example I use Karma to run my tests but Jest is also equally good. Also running tests has nothing to do with Django but I thought it deserves a shout here. Using auto watch and polling options of Karma test runner we achieve hot reload and running of front end component tests when writing tests for a component.

Coverage

Coverage also gets a quick shout out here because of tests. Coverage for front end components (.Vue) files can be achieved using instanbul-coverage, a code coverage utility. This configuration can be done in webpack. Istanbul generates a nice html view of the lines covered using color codes.

GitHub Link

https://github.com/priyankcommits/articles/tree/master/django_vue

---