Django & Vue-cli coupling ~ useful for Heroku ~

$README.md

Django & Vue-cli coupling ~ useful for Heroku ~

Allows to couple Django and Vue-cli easily, without any plugin or additional library.

• optional but recommended : clean webpack plugin.

Note : Hot Reload is active with this configuration.

Note : Don't forget to launch the Vuecli development server at the same time as the Django server, to activate the Hot Reload.

Note : you cannot dev on the webpack dev server directly after that. Instead, you can view your frontend from the django server.

.travis.yml

# OPTIONAL : Travis CI integration
# Note : Replace the values between brackets with your configuration

sudo: required
language: node_js
cache:
  directories:
    - <vue-cli folder>/node_modules
services:
  - postgresql
node_js: 12
env: SECRET_KEY=SOSECRET
  DB_NAME=example
  DB_USER=postgres
  DB_PASS=""
  DB_HOST=127.0.0.1
  DB_PORT=5432
jobs:
  include:
    - stage: Javascript unit tests
      script: cd <vue-cli folder> && npm install && npm run test:unit
    - stage: Python unit tests
      before_script: psql -c 'create database example;' -U postgres
      script: pip install pipenv && pipenv install --dev && pipenv run pytest <test folder>
    - stage: Deploy on Heroku
      script: cd <vue-cli folder> && npm install && npm run build && cd ..
      deploy:
        provider: heroku
        skip_cleanup: true
        api_key:
          secure: <your_secured_key>
        app: <your_app>

settings.py

"""Link Django to the Vue-CLI template/static files.

Note : replace "<vue-cli folder>" with your vue-cli path.
"""

# ...

VUE_DIST = os.path.join(BASE_DIR, "<vue-cli folder>", "dist")  # vue-cli path - django2 style
VUE_DIST = BASE_DIR / "<vue-cli folder>" / "dist"  # vue-cli path - Django3 style

# ...


TEMPLATES = [
    {
        # ...
        "DIRS": [VUE_DIST], # get "index.html" in vue-cli dist
        # ...
    }
]

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/2.2/howto/static-files/

STATIC_URL = "/static/"  # check the default value
STATICFILES_DIRS = [VUE_DIST]  # link to the vue-cli dist folder
STATIC_ROOT = os.path.join(BASE_DIR, "staticfiles")  # check the default value

# ...

urls.py

"""Django urls.py.

Serve the Vue-CLI template.
"""

# ...

from django.views.generic import TemplateView


urlpatterns = [
    # ...
    path("", TemplateView.as_view(template_name="index.html")),
]

vue.config.js

/* Vue-cli configuration. Webpack dev server redirection and others tricks. */

const { CleanWebpackPlugin } = require("clean-webpack-plugin");  // Optional requirement

module.exports = {
    publicPath: "static/",  // link with the generation of Django statics
    configureWebpack: {
        devServer: {
            writeToDisk: true // Redirect the dev server generation to the dist folder.
        }
    },
    plugins: [new CleanWebpackPlugin()]  // Optional requirement : clean the dist folder.
}