Quasar CLI partial builds

turigeza

Sometimes I would like to only include certain pages in my build and not all of them. Is this possible somehow ?

Has any of you out there done something like this before ?

I guess I am after two things here.

1 - An option to specify which quasar.conf.js to use when building. Something like this

quasar build -m electron -conf my_custom_quasar.conf.js

2 - Somehow specify the exact pages in the quasar.conf.js what to include in the build. Just like one can specify the the Quasar components under the framework section

framework: {
      components: [
                'QSpinner',
                'QSpinnerHourglass',
                'QSpinnerPuff',
                'QInnerLoading',
                'QSpinnerGears',
                'QLayout',
                // 'QLayoutHeader',

Something like

pages: {
      'page-a',
      'page-b',
      'page-c',
      ...
}

However as far as I know this is not possible. So do you know any workarounds ?

ADDITIONAL INFO:
I have I guess what people call a monorepo.
https://www.perforce.com/blog/vcs/what-monorepo#:~:text=A monorepo (mono repository) is,it easier to refactor code.

So when I start a new project I don’t normally create a new quasar project I just add a new modules/pages to my existing project.

This suits me really well. I don’t want to part with this idea. It’s great for me because I only have to maintain one codebase and every single project of mine is always up to date using the latest of my components. So some of these project share modules. Such as for example the users and groups module because I am not going to reinvent access control for every single project of mine. Others are a lot more esoteric such as the “Herb Repertory”.

Now so far so good. I use dynamic loading of components so components and pages only load the necessary code vuex modules. However sometimes I just want to compile a subset of my application. And maybe I would like to compile it with different icons and different name from the same codebase. This would enable me to white-label my app with a minimum amount of effort.

Now I have to copy the entire project change the quasar config change the logos before I can build. If I had the ability to use different quasar config files as per build command and explicitly set the pages I would like to include I would never have to do this.

In the past I have used this
https://github.com/ingydotnet/git-subrepo
To keep my shared code up to date within the projects. But it still involves a lot more work then my current setup.

beets

@turigeza Can you explain more what you want to accomplish, and why?

One possible solution would be to conditionally include certain routes in the routes.js file. You can do that based on an env variable, or many other conditions. If a page isn’t included in routes.js (or elsewhere in your codebase) then it shouldn’t be included in the bundle.

turigeza

@beets I have added some more info see if that helps ? Nice tip I explore that idea in detail. Thank you.

beets

@turigeza Yeah, it sounds like you’re 99% there. I do something like this in one of my projects. If you don’t require the pages you don’t want, they shouldn’t be processed by webpack / babel. You can even extend this further by always requiring a base route file, and extending it with site specific routes.

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

export default function () {

  let routes
  switch(process.env.SITE) {
  case 'SITE-A':
    routes = require('./routes-site-a').default
    break
  case 'SITE-B':
    routes = require('./routes-site-b').default
    break
  }

  const Router = new VueRouter({
    // ...
    routes,
  })

  return Router
}

Edit: since your case is a bit different than mine, double check with webpack analyzer that these aren’t getting built. I think webpack is smart enough to tree shake based on env variables like that, but maybe it doesn’t work with a switch and you need:

if(process.env.SITE === 'site-a') {
  routes = require('./routes-site-a').default
} else if(process.env.SITE === 'site-b') {
  routes = require('./routes-site-b').default
}

This should be easy to check by including a named chunk in (for example) routes-site-a.js and then building site-b, and checking if that named chunk was built in dist.

turigeza

@beets Thank you. It is exactly this sort of info I was after : ).

beets

@turigeza Great, report back if that works. If not, there’s other ways to accomplish this. You could in quasar.conf.js set up a webpack alias depending on the env var, something like:

      extendWebpack (cfg) {
        if(process.env.SITE === 'site-a') {
             cfg.resolve.alias['routes$'] = path.resolve(__dirname, 'src/router/routes-site-a.js')
        } else if(process.env.SITE === 'site-b') {
             cfg.resolve.alias['routes$'] = path.resolve(__dirname, 'src/router/routes-site-b.js')
        }
      }

Then just const routes = require('routes') in the router/index.js. This method would 100% not bundle other route files.

turigeza

@beets Super kind ! Thank you! I report back once I had a go at it.

metalsadman

@turigeza qenv should also help with this setup along with conditional imports, and just make scripts for build commands specific to whatever custom environment you’d want to built.

turigeza

@metalsadman Great suggestion ! Thank you! Nice to end up with choices : )

No More Posting New Topics!

Quasar CLI partial builds