[v1] What is the difference between using cli "quasar b" and "quasar d"



  • Can I know what is the difference between quasar b and quasar d?

    I been trying to do layout changes using my Macbook Pro and using “quasar d”, the changes which I made in the layout will not get reflected immediately …

    Example as below

    From

    <q-btn label="Submit" type="submit" color="primary"></q-btn>
    

    I change to as below

    <q-btn label="Submit" type="submit" color="primary" class="full-width q-mt-md"></q-btn>
    

    The above changes will not be reflected until I use quasar b in order for me to see the above changes.

    Is there something which I have done wrongly? Pls advice.

    Thanks.



  • Hot Module Replacement from Webpack (HMR) is only available in quasar dev (d) and it should work for layout changes.

    With the information provided any kind of troubleshooting is impossible.

    Scott



  • @chankl78 Are you saying HMR (Hot Module Replacement) is broken in your quasar dev?



  • Looks like it, @chankl78 post your quasar info logs.



  • Apologies. Did not post the info.

    /var/www/html/src-spa # quasar info
    
    Operating System - Linux(4.9.184-linuxkit) - linux/x64
    NodeJs - 10.16.0
    
    Global packages
      NPM - 6.9.0
      yarn - 1.16.0
      @quasar/cli - 1.0.0
      cordova - Not installed
    
    Important local packages
      quasar - 1.0.5 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
      @quasar/app - 1.0.4 -- Quasar Framework local CLI
      @quasar/extras - 1.2.0 -- Quasar Framework fonts, icons and animations
      vue - 2.6.10 -- Reactive, component-oriented view layer for modern web interfaces.
      vue-router - 3.0.7 -- Official router for Vue.js 2
      vuex - 3.1.1 -- state management for Vue.js
      electron - Not installed
      electron-packager - Not installed
      electron-builder - Not installed
      @babel/core - 7.5.5 -- Babel compiler core.
      webpack - 4.35.3 -- Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff.
      webpack-dev-server - 3.7.2 -- Serves a webpack app. Updates the browser on changes.
      workbox-webpack-plugin - 4.3.1 -- A plugin for your Webpack build process, helping you generate a manifest of local files that workbox-sw should precache.
      register-service-worker - 1.6.2 -- Script for registering service worker, with hooks
    
    Quasar App Extensions
      *None installed*
    
    Networking
      Host - 6ae11cba94bc
      eth0 - 172.17.0.5
    
    /var/www/html/src-spa # 
    
    

    Here is my quasar.config.js

    // Configuration for your app
    // https://quasar.dev/quasar-cli/quasar-conf-js
    
    module.exports = function (ctx) {
      return {
        // app boot file (/src/boot)
        // --> boot files are part of "main.js"
        boot: [
          'i18n',
          'axios'
        ],
    
        css: [
          'app.styl'
        ],
    
        extras: [
          'material-icons',
          'material-icons-outlined',
          'material-icons-round',
          'material-icons-sharp',
          'mdi-v3',
          'ionicons-v4',
          'eva-icons',
          'fontawesome-v5',
          'themify'
        ],
    
        framework: {
          // iconSet: 'ionicons-v4',
          // lang: 'de', // Quasar language
    
          // all: true, // --- includes everything; for dev only!
    
          components: [
            'QLayout',
            'QHeader',
            'QFooter',
            'QDrawer',
            'QPageContainer',
            'QPage',
            'QToolbar',
            'QToolbarTitle',
            'QBtn',
            'QIcon',
            'QList',
            'QItem',
            'QItemSection',
            'QItemLabel',
            'QForm',
            'QInput',
            'QBanner',
            'QAvatar'
          ],
    
          directives: [
            'Ripple'
          ],
    
          // Quasar plugins
          plugins: [
            'Notify'
          ],
    
          cssAddon: true
        },
    
        supportIE: true,
    
        build: {
          distDir: '../public',
          // htmlFilename: 'index.html',
          scopeHoisting: true,
          vueRouterMode: 'history',
          // vueCompiler: true,
          // gzip: true,
          // analyze: true,
          // extractCSS: false,
          extendWebpack (cfg) {
            cfg.module.rules.push({
              enforce: 'pre',
              test: /\.(js|vue)$/,
              loader: 'eslint-loader',
              exclude: /node_modules/,
              options: {
                formatter: require('eslint').CLIEngine.getFormatter('stylish')
              }
            })
          },
          env: {
            api: JSON.stringify(
              ctx.dev
                ? 'http://localhost/api' // local dev env
                : 'http://prod.tld/api' // production end-point
            )
          }
        },
    
        devServer: {
          https: false,
          port: 8881,
          open: false, // opens browser window automatically
          proxy: {
            '/api': { target: 'http://127.0.0.1:8881' }
          }
        },
    
        // animations: 'all', // --- includes all animations
        animations: [],
    
        ssr: {
          pwa: false
        },
    
        pwa: {
          // workboxPluginMode: 'InjectManifest',
          // workboxOptions: {}, // only for NON InjectManifest
          manifest: {
            name: 'SSASoft Backoffice',
            short_name: 'SSASoft App',
            description: 'SSASoft Backoffice for Singapore Soka Association',
            display: 'standalone',
            orientation: 'portrait',
            background_color: '#ffffff',
            theme_color: '#027be3',
            icons: [
              {
                'src': 'statics/icons/icon-128x128.png',
                'sizes': '128x128',
                'type': 'image/png'
              },
              {
                'src': 'statics/icons/icon-192x192.png',
                'sizes': '192x192',
                'type': 'image/png'
              },
              {
                'src': 'statics/icons/icon-256x256.png',
                'sizes': '256x256',
                'type': 'image/png'
              },
              {
                'src': 'statics/icons/icon-384x384.png',
                'sizes': '384x384',
                'type': 'image/png'
              },
              {
                'src': 'statics/icons/icon-512x512.png',
                'sizes': '512x512',
                'type': 'image/png'
              }
            ]
          }
        },
    
        cordova: {
          // id: 'org.cordova.quasar.app',
          // noIosLegacyBuildFlag: true, // uncomment only if you know what you are doing
        },
    
        electron: {
          // bundler: 'builder', // or 'packager'
    
          extendWebpack (cfg) {
            // do something with Electron main process Webpack cfg
            // chainWebpack also available besides this extendWebpack
          },
    
          packager: {
            // https://github.com/electron-userland/electron-packager/blob/master/docs/api.md#options
    
            // OS X / Mac App Store
            // appBundleId: '',
            // appCategoryType: '',
            // osxSign: '',
            // protocol: 'myapp://path',
    
            // Windows only
            // win32metadata: { ... }
          },
    
          builder: {
            // https://www.electron.build/configuration/configuration
    
            // appId: 'src-spa'
          }
        }
      }
    }
    


  • Anyone can help me to check with the above is ok?

    Thanks.



  • @chankl78 your quasar info logs looks fine, try upgrading your yarn and delete your node_modules folder and .lock files then do a yarn/ yarn install again.



  • Will do… I will try agin. Thanks.



  • It is not working for me. …


Log in to reply