Alejandro Riera

Posted on Oct 8, 2017 • Originally published at ariera.github.io on Sep 26, 2017

Django + webpack + Vue.js: setting up a new project that’s easy to develop and deploy (part 1)

#django #vue #webpack #webdev

UPDATE: I recently created a working project at ariera/django-vue-template using the latest version of the vue-webpack template and bundling all the changes highlighted in this post in just this commit 8a5c552. You may also be interested in checking a vue project template that CharlesAracil created taking inspiration from this entry.

I recently started a new web project based on both Django and Vuejs. It took a good deal of reading half-related and/or outdated posts, tons of documentation, and a good deal of trial and error to get it right.

In this post we will cover the key points on setting up a nice and solid development environment that is consisten with production and hence easy to deploy. The specifics of how to deploy, final configuration touches and (automation) will be discussed in a future article.

This is the solution that I found, there may be better alternatives (which I’d be happy to read) and it is utimately written with the intention of helping others as well as my future-self :)

Continue reading at ariera.github.io

Top comments (13)

Vlad Mihalachi • Oct 26 '17

Hi Alejandro, I wanted to thank you for your post, it was indeed very useful.

When running in production I get this error: "webpackJsonp is not defined".
I assume that's normal since you posted only the first part.

Will you publish the second one?

Again, thank you!

Zack Whipkey • Oct 26 '17

Usually whenever I got that, it's because you are using multiple bundles/chunks that might not be imported in the correct order.

Vlad Mihalachi • Oct 27 '17 • Edited

Yep, adding something like that solved the problem :)
gist.github.com/vmihalachi/7bceb1a...

Alejandro Riera • Oct 29 '17

Hey Vlad,

yes, that's exactly the solution. In my case I ended up creating a context_processor called env, like this:

from django.conf import settings

def env(request):
    return {'env': settings.ENVIRONMENT}

That allows me to check agains the environment instead of DEBUG in my templates, ie:

{% if env == 'production' %}
  {% render_bundle 'manifest' %}
  {% render_bundle 'vendor' %}
{% endif %}
{% render_bundle 'app' %}

I'll treat this and a few more issue in the second part :)

Vlad Mihalachi • Nov 1 '17

Thanks man, you are great!

Zack Whipkey • Oct 19 '17 • Edited

Few more updates...

You can add dynamicPublicPath=true to your hotClient require, and you will no longer have to set the path hardcoded (allowing your hotClient to go straight off of your dev server configuration. dynamicPublicPath will prefix anything you have path set to.

In the end, I had dynamicPublicPath=true&path=__webpack_hmr, because I was ending up with double slashes in the bundle reference url...probably could get around that somehow.

Alejandro Riera • Oct 23 '17

Hey Zack! Thanks again for your feedback. I tested it and I had to add the path= __webpack_hmr part as well. I updated the post accordingly :)

Zack Whipkey • Oct 11 '17

Thank you for the walkthrough!

Few things I noticed (these will help less detail oriented developers).

For your hotclient, you have this at the end of the path..

&path=http://localhost:8080/__ webpack_hmr

notice the space in between __ and webpack? Copying and pasting it will result in 404s!

The 2nd is the BundleTracker require statement for webpack.base.conf.

const BundleTracker = require('webpack-bundle-tracker');

Again, not too hard to figure out , but sometimes better to be explicit!

Alejandro Riera • Oct 12 '17

Thank you for your feedback, I've updated the post with your fixes :)

GrijalvaMarco • Mar 3 '18

Thanks for your post! When the next? I'm really interested to deploy my django + vuejs app in a server like heroku or something like this but I don't know how... because the app need to listen 2 ports and how can I do that? . I'm confusing

I hope you can help me, thank you so much.

Vlad Mihalachi • Nov 17 '17

Hey bro, did you notice they changed the vue-cli template for webpack?
I just started a new project and saw that they deleted webpack-hot-middleware and other stuff.
What's the new approach? :(

Alejandro Riera • Nov 28 '17 • Edited

Fairly easy actually, you just need to add this to your build/webpack.dev.conf.js

devServer: {
  headers: {
    "Access-Control-Allow-Origin":"\*"
  },
  // ...
}

I updated the post with that and more info (check this repo github.com/ariera/django-vue-template) :)
I also decided to keep the whole content of the post on my blog and just add an excerpt and link it from my account on dev.to. The main reason is that it was becoming to confusing to maintain both posts. After receiving so much feedback I couldn't remember where I had changed what :-S