Quasar CLI with Vite + Django | Quasar SPA - Django

Question

How to integrate Quasar SPA app with Django?

Using:

Quasar CLI with Vite

Django

Expected to have Django serving 'Index.html' and other static files build by 'quasar build' command.

Which resides in "application/dist" and "application/dist/assets" directories.

Answer 1

This is an answer for those who comes here looking for a solution.

================================================================

This one specific to Django serving 'Index.html' and static files of your Quasar app.

---

In order to integrate your Quasar SPA app you need to configure your 'quasar.config.js' as following.

build: {
  publicPath: "/<your-django-app>", // <-- e.g. https://your-domain.com/django-app/dist-dir
  distDir: "dist", // <-- depends on your setup, you can leave it to 
                   //     default, but then you have to configure your 
                   //     paths below according to this path.

  extendViteConf(viteConf) {
    viteConf.base = "/static/your-django-app/dist/";
    viteConf.build.polyfillModulePreload = true; // <-- suggested by *https://v2.vitejs.dev/config/#build-polyfillmodulepreload*
    viteConf.build.outDir = "dist"; //<-- default value
    viteConf.build.assetsDir = "assets"; // <-- default value
  }
}

Django static files setup 'settings.py'

STATIC_URL = "/static/"
STATIC_ROOT = os.path.join(BASE_DIR, "static")
STATICFILES_DIRS = [
    os.path.join("static"),
    os.path.join("static/<your-django-app>/dist/assets"),
]