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 hashes)

Uploaded Source

Built Distribution

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

Uploaded Python 3

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