Starter project for a full-stack Django application.
Idea is to keep the frontend stuff away from the Django applications. Treat Django views as
Hypermedia APIs. Views can render either
pages
or components
.
Frontend project lives under the frontend
folder. Project structure is as follows:
\_ frontend
\_ public
\_ src
\_ components
\_ layouts
\_ pages
\_ styles
public
: For static assets like favicon.src
: Source code to be bundled.src/components
: Components are units of user interface (UI) code that can be used repeatedly.src/layouts
: Layouts are essentially design patterns for the UI shared among multiple pages.src/pages
: Pages are specific implementations of layouts, which are displayed through a view.src/styles
: Styles aren't obligatory. If they are located anywhere within the src/ directory, Parcel will manage and optimize them.
Frontend bundling is handled by Parcel. To spice it up a little, there are some popular javascript packages included, such as:
- Tailwind
- Alpinejs
- React
- HTMX
- Lit
Build Process
Build pipeline approach is simple. Let Parcel to bundle all source frontend files and generate static files ready for distribution. Django's collectstatic handles the rest.
+--------------+
| frontend/src |
+--------------+
|
| Parcel
v
+-----------------+
| frontend/dist |
+-----------------+
|
| Django's collectstatic
v
+-------------+
| static_root |
+-------------+
Backend setup
From the root directory
# within a python virtual environment
pip install pip-tools
pip-compile --generate-hashes requirements.in
pip-compile --generate-hashes dev-requirements.in
pip-sync requirements.txt dev-requirements.txt
python manage.py migrate
python manage.py runserver
Frontend setup
From the frontend
directory
npm install
npm run dev