This repo is intended as a proof-of-concept/base project for a hybrid Django/Vue app. This approach is fairly opinionated and based on experimentation by raisins.
Aside from the Vue integration, this is a standard dockerized Django 3/PostgreSQL project.
The common app within django_web consists of one TemplateView with some extra context for demonstration purposes.
Vue is managed by vue-cli, which is installed globally within the container.
Node modules and commands are managed by Yarn.
Django and Vue are linked by django-webpack-loader and webpack-bundle-tracker. See the common/index.html template for use of the {% render_bundle %} tag.
This project also uses tailwindcss as a PostCSS plugin, along with plugins for css imports and nested rules. Tailwind is managed through the postcss-cli.
The vue.config.js file does several important things:
- configures devServer to use the port defined in
docker-compose.yml - handles publicPath/outputDir options for serve/build on dev/production
- alters the Webpack configuration to not generate html files or handle preloading or prefetching output files, as these are handled by Django and webpack-loader
- defines how to chunk files
- Clone project
cp django_web/.env_example django_web/.envdocker-compose up- ssh into
djangovue_webcontainer (egdocker exec -it djangovue_web_1 /bin/bash) yarn installyarn serve- As configured via docker-compose.yml, project will be running at
localhost:8010/
Check out scripts defined in package.json
yarn servewill compile tailwindcss and start both Django's dev server and vue-cli's dev server, configured for hot reloading- Python packages are managed with Poetry. To use the Poetry cli within the container, you must first
source $HOME/.poetry/env.