Configurable base directory

[dmke]

Hi,

I'm currently green-fielding a Ruby-on-Rails web application (API-only) with a Quasar frontend, using the Quasar CLI flavour. I'm trying to separate the Rails backend and the Vue frontend as much as possible, so I've made the decision to abstain from integrations like vite_ruby (hence no @quasar/vite-plugin).¹

I'm also planning to keep a mono repo for both the Rails and Quasar app, so that managing a developer environment becomes easy with a Procfile. Ideally, the directory structure would be familiar for other Rails developers, meaning the frontend code should live in app/javascript,² but this is where I've hit a snag, as Quasar seem to have its directory paths hard-coded relative to the quasar.config.js file (e.g. ./src).

For the Quasar app to work properly in app/javascript, I would also need to move the package.json, tsconfig.json, node_modules/, etc. into that directory, breaking a lot of assumptions by our existing tooling (e.g. node_modules/ and tsconfig.json are expected to be in the repo root directory).

I would like to propose an entry for the Quasar CLI in the package.json, so that the CLI can changes the directory prefix:

// package.json
{
  "dependencies": { /* omitted */ },
  "devDependencies": { /* omitted */ },
  "quasar": {
    // where to locate src/, src-*/, public/, index.html, boot/, etc.
    "appDir": "./app/javascript", // defaults to "."
  }
}

so that the directory structure becomes:

./
+-- app/                            # Rails application
|   +-- controllers/                # Rails controllers
|   +-- jobs/                       # Rails background jobs
|   +-- javascript/
|   |   +-- public/                 # Pure static assets (directly copied)
|   |   +-- index.html              # Template for index.html
|   |   +-- src/
|   |   |   +-- App.vue             # Root Vue component of your App
|   |   |   +-- ...
|   |   +-- src-ssr/                # SSR specific code (like production Node webserver)
|   |   +-- src-pwa/                # PWA specific code (like Service Worker)
|   |   +-- src-capacitor/          # Capacitor generated folder used to create Mobile Apps
|   |   +-- src-cordova/            # Cordova generated folder used to create Mobile Apps
|   |   +-- src-electron/           # Electron specific code (like "main" thread)
|   |   +-- src-bex/                # BEX (browser extension) specific code (like "main" thread)
|   |   +-- dist/                   # Where production builds go (for Rails, this should be reconfigured to ../../public)
|   |       +-- spa/                # Example when building SPA
|   |       +-- ssr/                # Example when building SSR
|   |       +-- electron/           # Example when building Electron
|   |       +-- ...
|   +-- mailers/                    # Rails mailers
|   +-- models/                     # Rails models
|   +-- views/                      # Rails views
+-- ...                             # more Rails stuff omitted
+-- node_modules/
+-- quasar.config.js                # Quasar App Config file
+-- .gitignore                      # GIT ignore paths
+-- .editorconfig                   # EditorConfig file
+-- .eslintignore                   # ESLint ignore paths
+-- .eslintrc.cjs                   # ESLint config
+-- postcss.config.cjs              # PostCSS config
+-- jsconfig.json                   # Editor config (if not using TypeScript)
+-- tsconfig.json                   # TypeScript config
+-- package.json                    # npm scripts and dependencies
+-- README.md                       # Readme for your website/App

This would also be useful in other projects, e.g. Go services, where embedding the dist/ directory as a whole is trivial.

Footnotes

1. In the past, major upgrades were often a pain due to the tight interaction between back- and frontend, interdependent code, etc. I'm also hoping that by using the recommended tooling (as per Pick a Quasar Flavour), keeping Quasar and its dependencies up-to-date won't become a full work day... ↩

2. Rails is strong on conventions, and the frontend source are expected somewhere under app/. ↩