DJANGO + REACT + WEBPACK-DEV-SERVER

Question

I've big problem with a project I inherit without documentation. The project is build with Django and React.

This is the project structure (without not important stuffs):

myapp/
├── assets
│   ├── bundles
│   │   ├── bar.js
│   │   ├── bar.js.map
│   │   ├── login.js
│   │   ├── login.js.map
│   │   ├── main.js
│   │   ├── main.js.map
│   │   ├── messages
│   │   │   └── assets
│   │   │       └── js
│   │   │           ├── appbar.json
│   │   │           [...]
│   ├── css
│   │   ├── bootstrap.min.css
│   │   ├── [...]
│   ├── js
│   │   ├── appbar.js     <<<--- REACT COMPONENT!!!
│   │   ├── [...] <<<--- OTHER REACTS COMPONENTS!!
├── conf
│   ├── default_settings.py
│   ├── default_settings.pyc
│   ├── __init__.py
│   ├── __init__.pyc
│   ├── settings.py
│   ├── settings.pyc
│   ├── urls.py
│   ├── urls.pyc
│   └── wsgi.py
├── core
│   ├── admin.py
│   ├── admin.pyc
│   ├── apps.py
│   ├── color_palette.py
│   ├── color_palette.pyc
│   ├── constants.py
│   ├── constants.pyc
│   ├── decorators.py
│   ├── decorators.pyc
│   ├── __init__.py
│   ├── __init__.pyc
│   ├── models.py
│   ├── models.pyc
│   ├── tests.py
│   ├── urls.py
│   ├── urls.pyc
│   ├── utils.py
│   ├── utils.pyc
│   ├── views.py
│   └── views.pyc
├── manage.py
├── node_modules
│    ├ webpack-dev-server   <<<--- IS INSTALLED HERE WITH AL LOT OF OTHER STUFFS
│    [...]
├── package.json
├── templates
│   ├── index.html
│   └── login.html
├── webpack.config.js
└── webpack-stats.json

Im currently using apache2 to run the site with the following VirtualHost config:

WSGIScriptAlias /myapp /usr/local/myapp/conf/wsgi.py process-group=myapp-wsgi-daemon
WSGIDaemonProcess myapp-wsgi-daemon processes=2 threads=15 display-name=myapp-wsgi python-path=/usr/local/myapp:/usr/local/dash2-env/lib/python3.5/site-packages
WSGIProcessGroup  myapp-wsgi-daemon

I can access the app with the url: https://localhost/myapp/

It's very good but when I modify React Componen (see appbar.js in the tree above) I have to launch this command to see the results:

./node_modules/.bin/webpack --config webpack.config.js

That compile all the .js inside the directory to build assets/bundles.

The webpack.config.js is the following:

//require our dependencies
var path = require('path')
var webpack = require('webpack')
var BundleTracker = require('webpack-bundle-tracker')
var ReactIntlPlugin=require('react-intl-webpack-plugin')

module.exports = {
  //the base directory (absolute path) for resolving the entry option
  context: __dirname,

  //your current directory. You don't have to specify the extension now,
  //because you will specify extension later in the `resolve` section
  entry: {
    main: './assets/js/index.js',
    login: './assets/js/login.js'
  },

  output: {
    //where you want your compiled bundle to be stored
    path: path.resolve('./assets/bundles/'),
    //naming convention webpack should use in your files
    filename: '[name].js',
  },

  plugins: [
    //tells webpack where to store data about your bundles.
    new BundleTracker({filename: './webpack-stats.json'}),
    new ReactIntlPlugin()
  ],

  devtool: "source-map",

  module: {
    loaders: [
      //a regexp that tells webpack use the following loaders on all
      //.js and .jsx files
      {
        test: /\.jsx?$/,

        //we definetely don't want babel to transpile all the files in
        //node_modules. That would take a long time.
        exclude: /node_modules/,
        //use the babel loader
        loader: 'babel-loader',
        query: {
          //specify that we will be dealing with React code
          presets: ['react']
        }
      },
      //loaders for css stylesheets
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader' ]
      },
      //loader for font files (used by fontawesome, etc)
      {
          test: /\.(eot|svg|ttf|woff|woff2)$/,
          loader: 'url-loader?limit=30000&name=[name]-[hash].[ext]'
      },
      //babel loader for internationalization
      {
          test: /\.js?$/,
          loader: 'babel-loader',
          exclude: /node_modules/,
          query: {
              "cacheDirectory": true,
              "metadataSubscribers":[ReactIntlPlugin.metadataContextFunctionName],
              "plugins": ["transform-runtime",
                  ["react-intl", {
                      "enforceDescriptions": false,
                      //directory where intermediate files are stored for internationalization
                      "messagesDir": "./assets/bundles/messages/",
                  }]],
              "presets": ['react', "es2015", "stage-1"]
          }
      },
    ]
  },

  resolve: {
    //tells webpack where to look for modules
    modules: ['node_modules'],
    //extensions that should be used to resolve modules
    extensions: ['.js', '.jsxs']
  }
}

Searching on google and in this site, the only solution to HOT RELOAD the Reacts Component is installing webpack-dev-server.

I followed a lot of tutorial but the best things I get is a directory listing.

This is the command Im using to launch dev-server:

./node_modules/.bin/webpack-dev-server -d --hot --htt --config webpack.config.js

Im still not sure what content-base parameter I have to set in the launch command :(

Please, help me. Im out of ideas!

Thank you!!

Answer 1

Read this please. I wish it could be useful for you:

Using Webpack transparently with Django + hot reloading React components as a bonus

You should install some python libraries:

pip install django-webpack-loader

Above mentioned tutorial is good I think.