Adding hot reload to featherjs

Feathers is a very cool framework to quickly and easily setup API’s. Version 3 comes with a very cool CLI that generates all the scafolding code for you and makes it extremely easy to add services, hooks, etc. One thing that is missing is hot reloading to simplify the development proces. This is were nodemon comes to the rescue.

nodemon is a tool that helps developing node.js based applications by automatically restarting the node application when file changes in the directory are detected.

Setting nodemon up with Feather and Webpack si a simple two step proces.

  1. Install nodemon
    npm install --save-dev nodemon
  2. Add one line to the scripts section of Webpacks package.json file
    ...
      },
      "scripts": {
        "test": "npm run eslint && npm run mocha",
        "dev": "node ./node_modules/nodemon/bin/nodemon.js src/",
        "eslint": "eslint src/. test/. --config .eslintrc.json",
        "start": "node src/",
        "mocha": "mocha test/ --recursive"
      }
    ...

Now start Feathers using the following command.

npm run dev

That’s it, simple right?

Advertisements

Add Webpack alias using Quasar framework

Trying out Quasar Framework (QF) I ran into a minor challenge setting up the Webpack @ alias like Vue provides out of the box for imports.

import firebaseCfg from '@/firebase/config'

QF uses quasar.conf.js to simplify working with Webpack. So there is no Webpack config file that the alias can be added to directly.

Example of the Webpack resolve alias configuration that VUE provides out of the box.

  ...
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },
  ...

After some Googeling I found the solution. Add the following to quasar.conf.js file to get the @ alias to work.

At the top of the file.

let path = require('path')

To the build section.

  ...
  build: {
    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|quasar)/
      })
      // Create aliases for importing
      cfg.resolve.alias = {
        ...cfg.resolve.alias,
        '@': path.resolve(__dirname, 'src')
      }
    }
  },
  ...

Pretty straight forward ones you know how 🙂