CODEWITHSUNDEEP
djangoreactjswebpack
RayJ
RayJ

Reputation: 136

webpack not reflecting changes in js files with react and django

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:

But when run server

Upvotes: 6

Views: 2139

Answers (2)

poonam poonia
poonam poonia

Reputation: 131

To everyone having issues with the index.html, or other pages, not properly updating its content (like not showing "React App" or not updating), try using disable cookies or incognito on Chrome (or private browsing). I found that my browser was using previous instances of my website instead of the most recent version, no matter how many times I saved and runserver but finally disable cookies worked for me.

Upvotes: 3

RayJ
RayJ

Reputation: 136

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.

Upvotes: 2

Related Questions