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.

  ...
  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 ­čÖé

Advertisements

Creating a simple REST server

For testing purposes I needed a quick and dirty way to create a REST server to server data. I found a very basic and easy to use REST server that stores data inside a JSON file. It is called json-server. Any changes you make will be saved to the JSON file.

Getting it up and running is very easy.

Install json-server:

npm install -g json-server

Create a JSON file containing the data, e.g. db.json:

{
    "products": [{
        "id": 1, "name": "coat", "price": 100.00
    }, {
        "id": 2, "name": "hat", "price": 30.00 
    }, { 
        "id": 3, "name": "umbrella", "price": 10.00 
    }]
}

Start json-server:

json-server --watch db.json

Now go to http://localhost:3000/products/1 and you will get:

{ "id": 1, "name": "coat", "price": 100.00 }

Check out the json-server GitHub page for all the other cool stuff you can do.

Happy coding.

Finding out the size of directories in Linux

Do you want to know the size of a directory in Linux? Use the du command.

du -sh

Explanation

The du command estimates the space used by a directory.

The options -sh are (from man du):

  -s, --summarize
         display only a total for each argument

  -h, --human-readable
         print sizes in human readable format (e.g., 1K 234M 2G)

To check more than one directory and get the total size of those directories, use

du -sch *

What does the extra option mean?

  -c, --total
         produce a grand total

Include hidden files?

du -sch * .*

Want to know how much disk space has been used?

du -h .

Tradingview Pine Script syntax highlighting for Notepad++

I have been working with Tradingview Pine Scripts (TPS) and it was irritating me that when the scripts get lager and more complex they are hard to read. So I decided to create syntax highlighting for TPS for Notepad++ (NPP). NPP is the go to text editor for Windows. It provides an easy mechanism for adding custom syntax highlighting for languages using its User Defined Language (UDL) functionality.

You can find the the User Defined Language (UDL) file for syntax highlighting Tradingview Pine Scripts (TPS) files in Notepad++ (NPP) in this repository on GitHub.

Let me know what you think and if it is helpful.

Bash shell shortcuts

I have been irritated not having standard keyboard shortcuts, like Ctrl-arrow left (move word left) and┬áCtrl-arrow right (move word right), available on the bash command line. It turns out they are. If you know what the meta key is. Meta key? Yes, I didn’t know which key this was either.

It turns out that it is the Alt key. This is because historically, many Unix workstations had a key labeled Meta where PCs have a key labeled Alt.

So here is a little bash command line cheat sheet.

  • Ctrl-a: Move to the start of the current line.
  • Ctrl-e: Move to the end of the line.
  • Ctrl-f: Move forward a character.
  • Ctrl-b: Move back a character.
  • Meta-f: Move forward to the end of the next word. Words are composed of letters and digits.
  • Meta-b:┬áMove backward to the start of the next word. Words are composed of letters and digits.

Have fun.