Skip to content
loading...

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

Alejandro Riera on September 26, 2017

UPDATE: I recently created a working project at ariera/django-vue-template using the latest version of the vue-webpack template and b... [Read Full]
markdown guide
 

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!

 

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

 

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

 

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.

 

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

 

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!

 

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

 

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.

 

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? :(

 

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

 

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

code of conduct - report abuse