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)

user_10411734 · Answer

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 webpack-bundle-tracker@0.4.3

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 %}



    
    
    
    
    Django Vue-3X iNTEGRATION


    HELLO FROM DJANGO

    
        HELLO FROM Vue
    

    {% render_bundle 'app' %}

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

Static files not found with webpack and django

3 Answers