Summary

Serving in

Steps

ref

  1. Install Babel, Transpiler
npm install --save-dev @babel/core
# install presets and plugins for react
npm install --save-dev @babel/preset-env @babel/preset-react
  1. Create .babelrc file in the react root dir To use the installed presets and plugins
# automatic is added to avoid react not found error

  "presets": [
    "@babel/preset-env",
    ["@babel/preset-react",  "runtime": "automatic"]
  ]

  1. install, Webpack Note: while following the tutorial webpack-bundle-tracker version 1.0.0 worked not the one mentioned the tutorial.
npm install --save-dev webpack webpack-cli webpack-bundle-tracker@1.0.0 babel-loader css-loader style-loader clean-webpack-plugin

a. webpack is… well, Webpack b. webpack-cli allows you to run Webpack commands from the command line c. webpack-bundle-tracker is a plugin that writes some stats about the bundle(s) to a JSON file. d. babel-loader is a loader that tells Webpack to run Babel on the file before adding it to the bundle. e. css-loader and style-loader are loaders that allow you to import .css files into your JavaScript f. clean-webpack-plugin is a plugin that deletes old bundles from Webpack’s output directory every time a new bundle is created.

  1. add webpack.config.js frontend app, ui, is in root of the repo at the same level as that of Django app.

    const path = require('path')
    const BundleTracker = require('webpack-bundle-tracker')
    const  CleanWebpackPlugin  = require('clean-webpack-plugin')
    
    module.exports =
      entry:
        ui: './src/index.js',
      ,
      output:
        path: path.resolve('../ksaflyer/app/static/frontend/'),
        // filename: '[name]-[hash].js',
        filename: '[name].js', // bundle will be created with ""ui"" name
        publicPath: 'static/frontend/',
        // publicPath: "auto"
    
      ,
      plugins: [
        new CleanWebpackPlugin(),
        new BundleTracker(
          path: __dirname,
          filename: '../ksaflyer/ksaflyer/webpack-stats.json',
        ),
      ],
      module:
        rules: [
    
            test: /\.js$/,
            exclude: /node_modules/,
            use: ['babel-loader'],
          ,
    
            test: /\.css$/,
            use: ['style-loader', 'css-loader'],
          ,
        ],
      ,
    
    
    
  2. Add scrips in the package.json

    "scripts":
      ...,
      "dev": "webpack --config webpack.config.js --watch --mode development",
      "build": "webpack --config webpack.config.js --mode production"
    
    
  3. Install “django-webpack-loader” and configure

import os

...

INSTALLED_APPS = [
    'webpack_loader',
    ...
]

...

WEBPACK_LOADER =
    'DEFAULT':
        'BUNDLE_DIR_NAME': 'frontend/',
        'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.json')


  1. add “index.html” webpack loader
% extends 'common/base.html' %
% load static %
% load render_bundle from webpack_loader %

% block content %
<div class="container">
  <div id="root"></div>
</div>
% render_bundle 'ui' % # ui is input entry name in webpack.config.js
% endblock content %


</html>