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

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

Comments

[Vlad Mihalachi]

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]

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]

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

[Alejandro Riera]

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]

Thanks man, you are great!

[Zack Whipkey]

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]

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]

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]

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

[GrijalvaMarco]

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]

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]

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

[Arun Purushothaman]

I just tried it. You dont have to worry about HMR atleast.