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)

Solution 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",
},

Solution 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.

Comments

[ChesterL]

This project runs properly on my local computer. And I added these lines in my index.html file. Where is the publicPath to be set?

[sww314]

@ChesterL publicPath is set in webpack.config.js. On your local server you should see the bundles at: /static/bundles/[name]-[hash].js

[sww314]

Chester - seems like a proxy configuration error. maybe post those configs for more help.

[dlink]

This worked for me. It generated the wepback-bundle.json. However it also locked up and I eventually needed to break it with Cntrl/C. Then Django start working. Thanks.