Django with Vue

Also Dokku…

If you want to serve your Django app, your Django app’s static files, and the files constituting your vue app, all from your Django process, using whitenoise, this seems to work.

Note: this doesn’t work as well locally; see end.

Set up Django to gather static files from dist

In settings:

STATICFILES_DIRS = [
    ...
    os.path.join(BASE_DIR, 'dist'),
    ...
]

Configure whitenoise

Do the basic Django configuration, but add a few things:

WHITENOISE_INDEX_FILE = True
WHITENOISE_ROOT = os.path.join(STATIC_ROOT, 'vue')

WHITENOISE_INDEX_FILE tells whitenoise to serve index.html for / when it seems appropriate.

WHITENOISE_ROOT tells whitenoise to serve files at the root URL if it finds them in WHITENOISE_ROOT. E.g. if a request comes in for /app.js and there’s a file <WHITENOISE_ROOT>/app.js, then Whitenoise will handle the request and return that file.

At deploy

Build your vue app for production and have the resulting files put under dist/vue:

mkdir -p dist/vue
yarn run build --dest=dist/vue

(that runs vue-cli-service build).

Run collectstatic. It’ll gather the files from dist along with other static files:

python manage.py collectstatic --noinput

Now ‘runserver’ or whatever.

Running locally

This prebuilds the Vue stuff, so if you’re doing development and would like things to rebuild when you edit files, this won’t do that.