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:

├── manage.py
└── example
    ├── __init__.py
    ├── asgi.py
    ├── settings.py
    ├── urls.py
    └── wsgi.py

Next, install package

$ pip install python-webpack-boilerplate

Add webpack_boilerplate to the INSTALLED_APPS in example/settings.py

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',

    'webpack_boilerplate',
]

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

$ python manage.py 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.

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

Frontend

Note

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
v16.13.1
$ npm -v
8.1.2

Now go to frontend

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

Note

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

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

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

Note

You can check Frontend Workflow to learn more about frontend stuff

Config Django

Add code below to Django settings example/settings.py

STATICFILES_DIRS = [
    BASE_DIR / "frontend/build",
]

WEBPACK_LOADER = {
    '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/urls.py

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
    path('admin/', admin.site.urls),
]
$ mkdir example/templates

├── frontend
├── manage.py
└── example
    ├── __init__.py
    ├── asgi.py
    ├── settings.py
    ├── templates
    ├── urls.py
    └── wsgi.py

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

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': ['example/templates'],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

Add index.html to the above example/templates

{% load webpack_loader static %}

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

<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"/>
    </div>

  </div>
</div>

{% javascript_pack 'app' 'app2' attrs='charset="UTF-8"' %}

</body>
</html>
  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 manage.py migrate
$ python manage.py runserver

Now check on http://127.0.0.1:8000/ 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