I'm trying to build an app with React Frontend and Django Rest Framework backend. I use webpack_loader and followed instructions online to set it up. I serve the static files from Amazon CDN, but my local changes on the js files are not reflected when I test locally by python manage.py run server
webpack.config.js
var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path = require('path');
var BundleTracker = require('webpack-bundle-tracker');
module.exports = {
context: path.join(__dirname, "src"),
devtool: debug ? "inline-sourcemap" : null,
entry: {
index: ["./js/index.js"],
explore: ["./js/explore.js"],
post: ["./js/post.js"]
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-0'],
plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'],
}
}
]
},
output: {
path: __dirname + "/src/bundle",
filename: "[name].min.js",
publicPath: "/src/bundle/",
},
plugins: [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js'),
new BundleTracker({filename: './webpack-stats.json'}),
],
};
What I ran
node_modules/.bin/webpack --config webpack.config.js
python manage.py collectstatic --noinput -i node_modules
which collects the static files onto the CDN. I double checked that both vendors.js and index.min.js are correct on the CDN and doesn't contain the old url that I had changed. Now I'm really confused why it's still able to render the old stuff.
"Header.js" locally:
<img className="logo"src="https://d3h7hz7pb749sg.cloudfront.net/static/src/binary/icon/logo.png" alt="Pique Logo" draggable="false" />
But when run on the server:
Okay I found out why. It's because the CDN caches the js files, and because I didn't change the name of the files, it thought the file was not updated and kept using the cache. The solution was to add the hash every time the js files are modified, so the CDN renders the new files.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With