Introduction
I'm excited to announce django-vite-boilerplate, a new open-source project that brings modern frontend development to Django.
If you've ever struggled with integrating modern frontend tooling into your Django projects, this boilerplate is for you.
The Problem: Frontend Development in Django
Django is fantastic for building robust backends, but when it comes to frontend development, it's lagging behind frameworks like Laravel and Rails.
The official Django documentation doesn't provide guidance on integrating modern frontend technologies, leaving developers to figure it out on their own.
As a result, many Django developers still resort to:
- Adding frontend libraries via CDN links in templates
- Missing out on modern tooling that could make their lives easier
- Spending time configuring build tools instead of building features (if someone want to use React/Vue on some specific pages instead of rewriting whole project)
My Solution: One Command to Bootstrap Everything
django-vite-boilerplate solves this problem by combining Django's power with Vite's lightning-fast frontend tooling.
With just one command, you can bootstrap a complete modern frontend setup:
$ python manage.py vite_initYou'll be prompted to choose your preferred stack:
[1/3] project_slug (frontend):
[2/3] Select style_solution
1 - tailwind
2 - daisy
3 - bootstrap
Choose from [1/2/3] (1):
[3/3] Select javascript_solution
1 - htmx_alpine
2 - valinajs
3 - hotwire
Choose from [1/2/3] (1):
That's it! Your frontend is ready to use, and you can happy coding.
Key Features
1. Multiple Style Solutions Out of the Box
Choose the CSS framework that fits your project:
- Tailwind CSS - Utility-first CSS framework
- DaisyUI - Beautiful components built on Tailwind
- Bootstrap - Classic, reliable framework
2. Flexible JavaScript Solutions
Pick the JavaScript approach that matches your development style:
- HTMX + Alpine.js - Minimal JavaScript for maximum interactivity
- Valina js - Lightweight and reactive
- Hotwire (Turbo) - Yet another modern approach from Rails
3. Auto-Reload in Development
No more manual page refreshing! The boilerplate automatically reloads your browser when you make changes to project files (js, html, py) during development, giving you a smooth, modern development experience.
Why This Matters
Unlike Laravel or Rails, Django has lacked an official, opinionated way to handle modern frontend development. This boilerplate fills that gap by:
- Best Practices: Pre-configured with sensible defaults
- Flexibility: Choose the stack that works for you
- Modern Tooling: Leverage Vite's speed and ecosystem
What's Next?
This is just the beginning. The boilerplate is designed to be extensible and community-driven. Future plans include:
- More framework options, React, Vue, Initia
- Frontend Code linting solution
- Enhanced documentation with examples
From python-webpack-boilerplate to django-vite-boilerplate
django-vite-boilerplate is the successor to python-webpack-boilerplate, both built by me.
As Vite has become increasingly popular and surpassed webpack in developer experience, this project embraces the modern toolchain. Vite offers instant server start, lightning-fast hot module replacement, and zero configuration for most use cases - making it the natural evolution for Django frontend development.
From my personal experience, using Vite makes me feel more smooth than Webpack, especially in the Tailwind project.
Thinking About Frontend Tooling
With this vite boilerplate, developers can work directly with frontend tools and technologies, and say good bye to:
- django-compressor
- django-libsass
- django-tailwind
- django-browser-reload
- ...
Conclusion
Modern frontend development shouldn't be painful, even in traditional Django projects. With django-vite-boilerplate, you get the best of both worlds: Django's powerful backend and Vite's modern frontend tooling - all configured and ready to go with a single command.
Give it a try and let me know what you think!
