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
- On nodejs homepage
- Using nvm I recommend this way.
$ node -v
v20.9.0
$ npm -v
10.1.0
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",
}
- We add the above
frontend/build
toSTATICFILES_DIRS
so Django can find the static assets (img, font and others) - We add
MANIFEST_FILE
location to theWEBPACK_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' %}
</body>
</html>
- We
load webpack_loader
at the top of the template - We can still use
static
to import image from the frontend project. - We use
stylesheet_pack
andjavascript_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