DEV Community

Cover image for Boost your productivity by creating your own CLI command with typescript and OCLIF (Part 2) 🚀
Raphael MANSUY
Raphael MANSUY

Posted on • Edited on • Originally published at elitizon.com

Boost your productivity by creating your own CLI command with typescript and OCLIF (Part 2) 🚀

#node #npm #typescript #devops

Context

OCLIF is a wonderful framework that makes it easy to develop a professional CLI command. Let's see how we can create a CLI command that will delight your end-user in less than 3 minutes.

The final project is published on https://github.com/raphaelmansuy/matcha-stock

Add a 🌟 on the project if you have enjoyed this tutorial ❤️

$ matcha-stock -symbol=MSFT
Enter fullscreen mode Exit fullscreen mode

Lets go ! 🚀

Create a new command with OCLIF (30 seconds ⏰) 

npx oclif single matcha-stock
cd matcha-stock
./bin.run
Enter fullscreen mode Exit fullscreen mode

Result:

OCLIF generates a starting project for my command.

❯ npx oclif single matcha-stock

     _-----_     ╭──────────────────────────╮
    |       |    │      Time to build a     │
    |--(o)--|    │  single-command CLI with │
   `---------´   │  oclif! Version: 1.16.1  │
    ( _´U`_ )    ╰──────────────────────────╯
    /___A___\   /
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y `

 npm package name matcha-stock
? command bin name the CLI will export matcha-stock
? description A command to get stocks information
? author Raphael MANSUY @raphaelmansuy
? version 0.0.1
? license MIT
? Who is the GitHub owner of repository (https://github.com/OWNER/repo) raphaelmansuy
? What is the GitHub name of repository (https://github.com/owner/REPO) matcha-stock
? Select a package manager yarn
? TypeScript Yes
? Use eslint (linter for JavaScript and Typescript) Yes
? Use mocha (testing framework) Yes
Enter fullscreen mode Exit fullscreen mode

Code created by OCLIF

├── README.md
├── bin
│   ├── run
│   └── run.cmd
├── package.json
├── src
│   └── index.ts
├── test
│   ├── index.test.ts
│   ├── mocha.opts
│   └── tsconfig.json
├── tsconfig.json
└── yarn.lock
Enter fullscreen mode Exit fullscreen mode

Content of src/index.ts

import { Command, flags } from "@oclif/command"

class MatchaStock extends Command {
  static description = "describe the command here"

  static flags = {
    // add --version flag to show CLI version
    version: flags.version({ char: "v" }),
    help: flags.help({ char: "h" }),
    // flag with a value (-n, --name=VALUE)
    name: flags.string({ char: "n", description: "name to print" }),
    // flag with no value (-f, --force)
    force: flags.boolean({ char: "f" })
  }

  static args = [{ name: "file" }]

  async run() {
    const { args, flags } = this.parse(MatchaStock)

    const name = flags.name ?? "world"
    this.log(`hello ${name} from ./src/index.ts`)
    if (args.file && flags.force) {
      this.log(`you input --force and --file: ${args.file}`)
    }
  }
}

export = MatchaStock
Enter fullscreen mode Exit fullscreen mode

✅ OCLIF has created a template class that represents the skeleton of my command.

Starting from the generated code I can:

  • 💪 add flags such as --symbol
  • 🏗 modify the implementation of the run() method

Add the support of the flag --symbol (40 seconds ⏰) 

import { Command, flags } from "@oclif/command"

class MatchaStock extends Command {
  static description =
    "A simple command to retrieve stock information from Yahoo Finance"

  static flags = {
    // add --version flag to show CLI version
    version: flags.version({ char: "v" }),
    help: flags.help({ char: "h" }),
    // Add Support of of -symbol flag
    // flag with a value (-s, --symbol=VALUE)
    symbol: flags.string({
      char: "s", // Alias for my flag
      description: "stock symbol to retrieve", // A description of the symbol flag
      required: true, // The flag symbol is required 👉 The command will abort of the flag is not provide
      helpValue: "MSFT" // An example of flag value (MSFT is the symbol for Microsoft)
    })
  }

  async run() {
    const { args, flags } = this.parse(MatchaStock)

    this.log(`Get Symbol=${flags.symbol} from ./src/index.ts`)
  }
}

export = MatchaStock
Enter fullscreen mode Exit fullscreen mode

I can now test my command

✅ With no flag

./bin
Enter fullscreen mode Exit fullscreen mode

result:

 ›   Error: Missing required flag:
 ›    -s, --symbol SYMBOL  stock symbol to retrieve
 ›   See more help with --help
Enter fullscreen mode Exit fullscreen mode

✅ With flag -help

./bin -help
Enter fullscreen mode Exit fullscreen mode

result:

❯ ./bin/run -help
A simple command to retrieve stock information from Yahoo Finance

USAGE
\$ matcha-stock

OPTIONS
-h, --help show CLI help
-s, --symbol=MSFT (required) stock symbol to retrieve
-v, --version show CLI version
Enter fullscreen mode Exit fullscreen mode

✅ With flag --symbol

./bin --symbol GOOG
Enter fullscreen mode Exit fullscreen mode

result:

❯ ./bin/run  -symbol=GOOG
Get Symbol=ymbol=GOOG from ./src/index.ts
Enter fullscreen mode Exit fullscreen mode

Add the business logic (60 seconds ⏰)

👉 Add axios as our http library.

yarn add axios
Enter fullscreen mode Exit fullscreen mode

👉 Add the file ./src/getStock.ts

import axios from "axios"

export const getSingleStockInfo = async (stock: string) => {
  if (!stock) {
    throw new Error("Stock symbol argument required")
  }

  if (typeof stock !== "string") {
    throw new Error(
      `Invalid argument type for stock argument. Required: string. Found: ${typeof stock}`
    )
  }

  const url = `https://query1.finance.yahoo.com/v7/finance/quote?symbols=${stock}`

  const res = await axios.get(url)

  const { data } = res
  if (
    !data ||
    !data.quoteResponse ||
    !data.quoteResponse.result ||
    data.quoteResponse.result.length === 0
  ) {
    throw new Error(`Error retrieving info for symbol ${stock}`)
  }

  const quoteResponse = data.quoteResponse.result[0]

  return quoteResponse
}
Enter fullscreen mode Exit fullscreen mode

👉 Modify the src/index.ts file such as:

import { Command, flags } from "@oclif/command"
import { getSingleStockInfo } from "./getStocks"
class MatchaStock extends Command {
  static description = `A simple command to retrieve stock information from Yahoo Finance.\nA simple command to retrieve stock information from Yahoo Finance.\n\n Created with ❤️ by Elitizon (https://www.elitizon.com)`

  static flags = {
    // add --version flag to show CLI version
    version: flags.version({ char: "v" }),
    help: flags.help({ char: "h" }),
    // Add Support of of -symbol flag
    // flag with a value (-s, --symbol=VALUE)
    symbol: flags.string({
      char: "s", // Alias for my flag
      description: "stock symbol to retrieve", // A description of the symbol flag
      required: true, // The flag symbol is required 👉 The command will abort of the flag is not provide
      helpValue: "MSFT" // An example of flag value (MSFT is the symbol for Microsoft)
    })
  }

  async run() {
    const { flags } = this.parse(MatchaStock)
    const res = await getSingleStockInfo(flags.symbol)
    // Print the result as tabular
    console.table(res)
  }
}

export = MatchaStock
Enter fullscreen mode Exit fullscreen mode

👉 Test the command

❯ ./bin/run  -s=MSFT
┌───────────────────────────────────┬─────────────────────────┐
│              (index)              │         Values          │
├───────────────────────────────────┼─────────────────────────┤
│             language              │         'en-US'         │
│              region               │          'US'           │
│             quoteType             │        'EQUITY'         │
│          quoteSourceName          │     'Delayed Quote'     │
│            triggerable            │          true           │
│             currency              │          'USD'          │
│    firstTradeDateMilliseconds     │      511108200000       │
│             priceHint             │            2            │
│            marketState            │       'POSTPOST'        │
│      postMarketChangePercent      │       0.31417143        │
Enter fullscreen mode Exit fullscreen mode

Publish the command to NPM.org (30 seconds ⏰) 

npm publish
Enter fullscreen mode Exit fullscreen mode

✅ The package is now published on npm.org at https://www.npmjs.com/package/matcha-stock

  • 👉 You have to change the name of the package if the package is already registered on NPM.
  • 👉 The package version must be updated each time you publish

Test your command (10 seconds ⏰) 

npm install -g matcha-stock
matcha-stock -s=MSFT
Enter fullscreen mode Exit fullscreen mode

Conclusion

OCLIF is an impressive framework. With OCLIF it's easy to create:

  • Single-Command CLI
  • Multi-command CLI

Main features:

  • 🕺 Flag/Argument parsing
  • 🚀 Super Speed
  • 🏗 Include a CLI generator to speed the development of commands
    • Testing Helpers
    • Auto-Documentation
    • Plugins
    • Hooks

OCLIF is available on Github and maintained by Matt Graham, Paul Elliott and Chris Castle and funded by Heroku 🎉

Top comments (1)

Collapse
 
raphaelmansuy profile image
Raphael MANSUY •

The cover picture come from Unsplash thanks to Luca Florio unsplash.com/photos/QLmBiJ9GYpU

Read next

fajarhide profile image

Next.js vs React - Performance and Architecture Analysis In-Depth Comparison

Fajar Hidayat -

suzuki0430 profile image

Simplify Environment Variable Management with GitHub Environments

Atsushi Suzuki -

jimjunior profile image

Building a Kubernetes Operator | A Practical Guide

Beingana Jim Junior -

umarov profile image

Dynamic DNS sync with Cloudflare

Muzafar Umarov -