Skip to main content

Use webpack with your multi-page, multi-lingual django webapp

Project description

django-webpack-pages

PyPI version Code style: black

Use webpack with your multi-page, multi-lingual django webapp.

This project is based on django-webpack-loader which handles the connection to webpack. Consider using webpack-critical-pages as well if you are interested in speedups.

Put the following in your settings file:

WEBPACK_PAGES = {
    "CRITICAL_CSS_ENABLED": True,
    "ROOT_PAGE_DIR": osp.join(BASE_DIR, "pages"),
    "STATICFILE_BUNDLES_BASE": "bundles/{locale}/",  # should end in /
}

STATICFILES_FINDERS = (
    "webpack_pages.pageassetfinder.PageAssetFinder",
    # ... and more of your choosing:
    "django.contrib.staticfiles.finders.FileSystemFinder",
    "django.contrib.staticfiles.finders.AppDirectoriesFinder",
)

# configure the loaded page directories and add the WebpackExtension
TEMPLATES = [
    {
        "BACKEND": "django_jinja.backend.Jinja2",
        "DIRS": [osp.join(BASE_DIR, "templates"), osp.join(BASE_DIR, "pages")]
        + [osp.join(BASE_DIR, app, "pages") for app in GRAZBALL_APPS]
        + [osp.join(BASE_DIR, app, "components") for app in GRAZBALL_APPS],
        "APP_DIRS": True,
        "OPTIONS": {
            # ...
            "extensions": [
                # ...
                "webpack_pages.jinja2ext.WebpackExtension",
            ],
        }
    }
]

Using webpack_loader.contrib.pages you can register entrypoints for corresponding pages in templates.

At the top of your individual page, do:

{% extends "layout.jinja" %}
{% do register_entrypoint("myapp/dashboard") %}

In the layout's (base template's) head, place the following:

<!DOCTYPE html>
{% do register_entrypoint("main") %}
<html lang="{{ LANGUAGE_CODE }}">
<head>
  ...
  {{ render_css() }}
</head>
<body>
  ...
  {{ render_js() }}
</body>

This will load the registered entrypoints in order (main, then myapp/dashboard) and automatically inject the webpack-generated css and js. It also supports critical css injection upon first request visits.

Project details


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

django_webpack_pages-0.1.6.tar.gz (5.2 kB view details)

Uploaded Source

Built Distribution

django_webpack_pages-0.1.6-py3-none-any.whl (6.3 kB view details)

Uploaded Python 3

File details

Details for the file django_webpack_pages-0.1.6.tar.gz.

File metadata

  • Download URL: django_webpack_pages-0.1.6.tar.gz
  • Upload date:
  • Size: 5.2 kB
  • Tags: Source
  • Uploaded using Trusted Publishing? No
  • Uploaded via: poetry/1.8.3 CPython/3.11.7 Linux/6.5.0-35-generic

File hashes

Hashes for django_webpack_pages-0.1.6.tar.gz
Algorithm Hash digest
SHA256 f74ec4e283147c5557b22f060a4c542f612fd89dcbfc502653c550708edc14ef
MD5 009dbb7ea45d79dc0efdf9e1edfbc79d
BLAKE2b-256 1500ce9efbe4df37e6665e8e77e92ff0f2c8365250f54233926aa9b58045fd68

See more details on using hashes here.

File details

Details for the file django_webpack_pages-0.1.6-py3-none-any.whl.

File metadata

File hashes

Hashes for django_webpack_pages-0.1.6-py3-none-any.whl
Algorithm Hash digest
SHA256 2c32bd6648bb263822f69bf2434f082c1844e619a1d0bda82302d555fc5d9e6f
MD5 afe03e17d5240b6380e85fa013b8160e
BLAKE2b-256 166c5758bf832014d769475129277e6e1b9c9e28aca2eb48d6d4a32e599e9be2

See more details on using hashes here.

Supported by

AWS AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page