Skip to content

Setup With Django

Install Package

$ pip install Django
$ django-admin startproject example
$ cd example

Now your Django projects would seem like this:

└── example

Next, install package

$ pip install python-webpack-boilerplate

Add webpack_boilerplate to the INSTALLED_APPS in example/



Let's run Django command to create frontend project from the templates

$ python webpack_init
# here we use the default frontend slug
project_slug [frontend]:

Now a new frontend directory is created which contains pre-defined files for our frontend project.

├── package-lock.json
├── package.json
├── postcss.config.js
├── src
├── vendors
└── webpack



If you have no nodejs installed, please install it first by using below links

  1. On nodejs homepage
  2. Using nvm I recommend this way.
$ node -v
$ npm -v

Now go to frontend

# install dependency packages
$ npm install
# run webpack in watch mode
$ npm run watch


run watch means webpack will watch source files and recompile whenever they change

The build files now can be found in frontend/build directory

├── css
├── js
├── manifest.json
└── vendors


You can check Frontend Workflow to learn more about frontend stuff

Config Django

Add code below to Django settings example/

    BASE_DIR / "frontend/build",

    'MANIFEST_FILE': BASE_DIR / "frontend/build/manifest.json",
  1. We add the above frontend/build to STATICFILES_DIRS so Django can find the static assets (img, font and others)
  2. We add MANIFEST_FILE location to the WEBPACK_LOADER so our custom loader can help us load JS and CSS.

Load the bundle files

Let's do a quick test on the home page.

Update example/

from django.contrib import admin
from django.urls import path
from django.views.generic import TemplateView

urlpatterns = [
    path('', TemplateView.as_view(template_name="index.html")),     # this is new
$ mkdir example/templates

├── frontend
└── example
    ├── templates

Update TEMPLATES in example/, so Django can know where to find the templates

        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': ['example/templates'],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [

Add index.html to the above example/templates

{% load webpack_loader static %}

<!DOCTYPE html>
  <meta charset="utf-8" />
  {% stylesheet_pack 'app' %}

<div class="jumbotron py-5">
  <div class="container">
    <h1 class="display-3">Hello, world!</h1>
    <p>This is a template for a simple marketing or informational website. It includes a large callout called a
      jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
    <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more »</a></p>

    <div class="d-flex justify-content-center">
      <img src="{% static 'vendors/images/webpack.png' %}" class="img-fluid"/>


{% javascript_pack 'app' %}

  1. We load webpack_loader at the top of the template
  2. We can still use static to import image from the frontend project.
  3. We use stylesheet_pack and javascript_pack to load CSS and JS bundle files to Django

Manual Test

$ python migrate
$ python runserver

Now check on and you should be able to see a welcome page.

The source code can also be found in the Examples

Live Reload

Live Reload Support