How to combine django and vue cli with webpack

B

bubaley2020-05-04 15:48:31

Django

bubaley, 2020-05-04 15:48:31

How to combine django and vue cli with webpack_loader?

Hello, installed VUE app with vue cli 4+ in django 3+ project folder.
Installed webpack_loader in djnago and webpack-bundle-tracker in js.
On the Internet, I found an installation example.
vue.config.js

const BundleTracker = require('webpack-bundle-tracker')
const DEPLOYMENT_PATH = '/static/dist/'

module.exports = {
    publicPath: process.env.NODE_ENV === 'production' ? DEPLOYMENT_PATH : 'http://localhost:8080/',
    outputDir: '../static/dist',

    devServer: {
        public: 'localhost:8080',
        headers: {
            'Access-Control-Allow-Origin': '*',
        },
    },
    configureWebpack: {
        plugins: [
            new BundleTracker({ path: __dirname, filename: 'webpack-stats.json' }),
        ],
    },
}

settings

STATIC_URL = '/static/'

WEBPACK_LOADER = {
    'DEFAULT': {
        'STATS_FILE': os.path.join(BASE_DIR, 'frontend', 'webpack-stats.json'),
    }
}

webpack-stats.json (generated)

{
  "status": "done",
  "chunks": {
    "app": [
      "js/chunk-vendors.ffb56bbc.js",
      "js/chunk-vendors.ffb56bbc.js.map",
      "css/app.e84542c5.css",
      "js/app.341d7984.js",
      "css/app.e84542c5.css.map",
      "js/app.341d7984.js.map"
    ]
  },
  "publicPath": "/static/dist/",
  "assets": {
    "img/logo.82b9c7a5.png": {
      "name": "img/logo.82b9c7a5.png",
      "path": "C:\\projects\\testProject\\myproject\\static\\dist\\img\\logo.82b9c7a5.png",
      "publicPath": "/static/dist/img/logo.82b9c7a5.png"
    },

...

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    {% load render_bundle from webpack_loader %}
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>Django Vue Integration</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons">
</head>
<body>
<noscript>
    <strong>We're sorry but frontend doesn't work properly without JavaScript enabled. Please enable it to
        continue.</strong>
</noscript>
    <div id="app">
        <app></app>
    </div>

{% render_bundle "app" %}
</body>
</html>

I get this error at the output and I can't figure out what's going on at all.

Tell me what could be the problem or who has a working example of Vue Cli 4+, Django 3+ and webpack_loader.

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

B

bubaley, 2020-05-04
@bubaley

I was able to overcome troubles, as it turned out in a simple way. The problem was dependencies.
With these examples, everything works fine with versions:
[email protected]
django-webpack-loader==0.7.0
If you have any questions, write, I will be happy to help
With these versions in index.html, in addition to app, you need to connect vendors
{% render_bundle 'chunk-vendors' %}
{% render_bundle 'app' %}

A

Andrey Sobolev, 2020-05-04
@Sobolev5

What is the idea behind such a solution?
Isn't it easier and more logical to run two containers, on one of which Vue will spin, on the other Django and they will be friends on Rest Api?