Static files not found with webpack and django

Question

The problem is that I can get access to the app on the browser but not static assets (js, jsx and images).

Technologies I am using:

django-webpack-loader 0.2.4
React 0.14
Django 1.8.5
Python 2.7

Part of Django settings for static files:

103 # Static files (CSS, JavaScript, Images)
104 # https://docs.djangoproject.com/en/1.8/howto/static-files/
105 
106 STATIC_URL = '/static/'
107 STATICFILES_DIRS = (
108     os.path.join(BASE_DIR, 'assets'),
109 )
110 
111 WEBPACK_LOADER = {
112     'DEFAULT': {
113         'BUNDLE_DIR_NAME': 'bundles/',
114         'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.json'),
115     }
116 }

The webpack.config.js file:

  4 // Dependencies
  5 var path = require('path')
  6 var webpack = require('webpack')
  7 var BundleTracker = require('webpack-bundle-tracker')
  8 
  9 module.exports = {
 10     // The base directory (absolute path) for resolving the entry option.
 11     context: __dirname,
 12 
 13     entry: './assets/js/index',
 14 
 15     output: {
 16         // Where the compiled bundle to be stored.
 17         path: path.resolve('./assets/bundles/'),
 18         // Naming convention webpack should use.
 19         filename: '[name]-[hash].js'
 20     },
 21 
 22     plugins: [
 23         // Where webpack stores data about bundles.
 24         new BundleTracker({filename: './webpack-stats.json'}),
 25         // Makes jQuery available in every module.
 26         new webpack.ProvidePlugin({
 27             $: 'jquery',
 28             jQuery: 'jquery',
 29             'window.jQuery': 'jquery'
 30         })
 31     ],
 32 
 33     module: {
 34         loaders: [
 35             // A regexp that tells webpack user the following loaders on all
 36             // .js and .jsx files.
 37             {test: /\.jsx?$/,
 38                 exclude: /ndoe_modules/,
 39                 loader: 'babel-loader',
 40                 query: {
 41                     presets: ['react']
 42                 }
 43             },
 44             // use ! to chain loaders
 45             { test: /\.less$/, loader: 'style-loader!css-loader!less-loader' },
 46             {test: /\.css$/, loader: 'style-loader!css-loader'},
 47             // Inline base64 URLs for <=8k images, direct URLs for the rest.
 48             {test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
 49         ]
 50     },
 51 
 52     resolve: {
 53         // Where webpack looks for modules.
 54         modulesDirectories: ['node_modules'],
 55         // Extensions used to resolve modules.
 56         extensions: ['', '.js', '.jsx']
 57     }
 58 }

Part of Dockerfile:

  3 COPY start.sh /opt/start.sh
  4 
  5 ADD . /opt/
  6 
  7 RUN /opt/node_modules/webpack/bin/webpack.js --config /opt/webpack.config.js
  8 
  9 RUN chmod +x /opt/start.sh

Hierarchy of the Django project:

my_project/
├── Dockerfile
├── api
├── assets
├── my_project
├── db.sqlite3
├── manage.py
├── node_modules
├── package.json
├── requirements.txt
├── static
├── templates
├── webpack-stats.json
└── webpack.config.js

There are two servers running Nginx t01 and t02. t01 is for proxy and t02 is where the Django project resides. The proxy server looks fine because the url works on the browser, only the static files can't be found (404 errors).

I manually do the static files bundle on the server because there will be a webpack-stats.json files generated which contains the absolute path info.

However, this project runs properly on my local computer.

[EDIT]:

I found a solution, just to add this to my_project/urls.py at the end of urlpatterns

] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

Answer 1

In your HTML page did you load and render the bundle? This should be in your entry point Django template.

{% load render_bundle from webpack_loader %}
{% render_bundle 'app' %}

You also need the publicPath to match your static files setting in Django. Set it in webpack.config.js:

output: {
    path: path.resolve('assets/bundles/'),
    publicPath: '/static/bundles/',
    filename: "[name]-[hash].js",
},

Answer 2

If you run into this problem when running (Django) tests, make sure you have the webpack bundle built:

./node_modules/.bin/webpack --watch --progress --config webpack.config.js --colors

Then delete all .pyc file to clear op stale tests.

find -name "*.pyc" -delete

After this the tests should no longer complain about webpack not being able to find the bundle in question.

Answer 3

I've made certain changes and downgrading webpack-bundle-tracker from alpha to 0.4.3 You can find here webpack-bundle-tracker

or install using npm i [email protected]

create vue.config.js file in frontend.

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

module.exports = {
    publicPath: "http://0.0.0.0:8080",
    // output dir default buldle file ocation in dist
    outputDir: "./dist/",

    chainWebpack: config => {
        config.optimization.splitChunks(false)

        config.plugin('BundleTracker').use(BundleTracker, [
            {
                // filename: './webpack-stats.json'
                filename: './webpack-stats.json'
            }
        ])

        config.resolve.alias.set('__STATIC__', 'static')

        config.devServer
            .public('http://0.0.0.0:8080')
            .host('0.0.0.0')
            .port(8080)
            .hotOnly(true)
            .watchOptions({poll: 1000})
            .https(false)
            .headers({'Access-Control-Allow-Origin': ['\*']})
    }
};

And in django settings.py file

INSTALLED_APPS = [
    'webpack_loader',
]

TEMPLATES = [
{
'DIRS': [
            str(BASE_DIR.joinpath('templates'))
        ],
}
]

Add these configuration at the bottom of the settings.py file

WEBPACK_LOADER = {
    'DEFAULT': {
        'CACHE': not DEBUG,
        'BUNDLE_DIR_NAME': 'webpack_bundles/', # must end with slash
        'STATS_FILE': str(BASE_DIR.joinpath('frontend', 'webpack-stats.json')),
        'POLL_INTERVAL': 0.1,
        'TIMEOUT': None,
        'IGNORE': [r'.+\.hot-update.js', r'.+\.map'],        
    }
}

And index.html looks like this,

{% load render_bundle from webpack_loader %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>Django Vue-3X iNTEGRATION</title>
</head>
<body>
    <h1>HELLO FROM DJANGO</h1>

    <div id="app">
        <h1>HELLO FROM Vue</h1>
    </div>

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

These solved my problem. And I also want help for using latest version of webpack-bundle-tracker with vueCli