|
| 1 | +# oclif getting started tutorial |
| 2 | + |
| 3 | +This tutorial is a step-by-step guide to introduce you to oclif. If you have not developed anything in a command line before, this tutorial is a great place to get started. |
| 4 | + |
| 5 | +## Before you begin |
| 6 | + |
| 7 | +oclif is written in Node. You'll need Node as well as npm, which is a package manager for Javascript and a software registry. |
| 8 | + |
| 9 | +If you do not have them already, follow the instructions here to install npm and Node together: https://docs.npmjs.com/getting-started/installing-node |
| 10 | + |
| 11 | +Next, install [Yarn](https://yarnpkg.com/en/) for dependency management. |
| 12 | + |
| 13 | +You can check it's installed by running `$ yarn`. |
| 14 | + |
| 15 | +## CREATING YOUR FIRST CLI WITH OCLIF |
| 16 | + |
| 17 | +Now you're ready to create your first CLI with oclif. There are three stages: CLI creation, command development, and publishing to NPM. |
| 18 | + |
| 19 | +### CLI Creation |
| 20 | + |
| 21 | +Let's start with the single-command CLI as that is the simplest. You can call your CLI anything you like by replacing “mynewcli” with a word of your choice. The name of your CLI can be anything you like as long as it meets the [npm restrictions](https://docs.npmjs.com/files/package.json#name). |
| 22 | + |
| 23 | +`$ npx oclif single mynewcli` |
| 24 | + |
| 25 | +*npx is included in npm and automatically runs and installs the oclif generator. * |
| 26 | + |
| 27 | +An alternative way of doing this without npx and within an existing directory, is to create a new folder and run: |
| 28 | + |
| 29 | +``` |
| 30 | +$ npm install -g mynewcli |
| 31 | +$ mkdir `mynewcli |
| 32 | +$ cd mynewcli |
| 33 | +$ oclif single` |
| 34 | +``` |
| 35 | + |
| 36 | + |
| 37 | +You'll now see some questions asking you to describe various aspects of your CLI. Once you register your CLI with npm, these would feed into the listing for your CLI. For now, feel free to just leave these blanks and press “enter” for each one, which will set everything to default values. |
| 38 | + |
| 39 | +**? npm package name** *the name of the package as it will be listed on npm. * |
| 40 | +? **command bin name the CLI will export:** *the word the user will type to invoke the cli, e.g., “heroku” in the case of the Heroku command line interface. You may use any word here but be careful about using a word that may conflict with commonly used command line terms such as grep. In the case of conflict, the terminal will use what is loaded in the path sooner. * |
| 41 | +? **description** *this description is part of the npm package details. This description will stay local until you publish to npm* |
| 42 | +? **author: ***The author is l**isted when you register your CLI on NPM* |
| 43 | +? **version** *each time you publish a new version this number will automatically increment. * |
| 44 | +? **license** *MIT License is set as default * |
| 45 | +? **node version supported** *oclif may only support versions of Node greater than 8.0, which is the default set here* |
| 46 | +? **github owner of repository (https://github.com/OWNER/repo)** *owner of the Github repo* |
| 47 | +? **github name of repository (https://github.com/owner/REPO)** *name of the Github repo * |
| 48 | +? **optional components to include** |
| 49 | + |
| 50 | +Next you'll be asked if you want to use mocha, typescript or semantic release. In this tutorial I'm going to use mocha as that is the simplest Javascript framework. |
| 51 | + |
| 52 | +When your CLI is ready, you'll see a message ending with the following: |
| 53 | + |
| 54 | +`Created mynewcli in /Users/nsamsami/mynewcli` |
| 55 | + |
| 56 | +Your CLI has been created locally and the relevant code is in the mynewcli folder in your cur folder. You can go over there by running |
| 57 | + |
| 58 | +``` |
| 59 | +$ cd mynewcli |
| 60 | +``` |
| 61 | + |
| 62 | +For trying your cli locally, “./bin/run” is the equivalent of the command “mynewcli”. You'll see placeholder output. |
| 63 | + |
| 64 | +``` |
| 65 | +$ ./bin/run |
| 66 | +hello world from ./src/index.ts! |
| 67 | +``` |
| 68 | + |
| 69 | +To run mynewcli instead of ./bin/run you'll need to publish your CLI locally using npm. |
| 70 | + |
| 71 | +``` |
| 72 | +$ npm install -g . |
| 73 | +``` |
| 74 | + |
| 75 | +Now you can test your CLI by running mynewcli |
| 76 | + |
| 77 | +``` |
| 78 | +$ mynewcli |
| 79 | +hello world from /Users/nsamsami/mynewcli/src/index.ts |
| 80 | +``` |
| 81 | + |
| 82 | +### COMMAND DEVELOPMENT |
| 83 | + |
| 84 | +In this step you'll take control of the CLI command you have at your disposal. Open the ./src/index.ts fil in a text editor (such as Sublime or TextEdit) |
| 85 | + |
| 86 | +This index file is where the code for your commands lives. A basic command in js looks like this: |
| 87 | + |
| 88 | +``` |
| 89 | +import {Command} from '@oclif/command' |
| 90 | +export class MyCommand extends Command { |
| 91 | + static description = 'description of this example command' |
| 92 | + |
| 93 | + async run() { |
| 94 | + console.log('running my command') |
| 95 | + } |
| 96 | +} |
| 97 | +``` |
| 98 | + |
| 99 | +A basic flag in TypeScript looks like this: |
| 100 | + |
| 101 | +``` |
| 102 | +import {Command, flags} from '@oclif/command' |
| 103 | +export class MyCommand extends Command { |
| 104 | + static flags = { |
| 105 | + // add --version flag to show CLI version |
| 106 | + version: flags.version(), |
| 107 | + // add --help flag to show CLI version |
| 108 | + help: flags.help(), |
| 109 | + name: flags.string({char: 'n', description: 'name to print'}), |
| 110 | + location: flags.string({char: 'l', description: 'location to print'}), |
| 111 | + } |
| 112 | + async run() { |
| 113 | + console.log('running my command') |
| 114 | + } |
| 115 | +} |
| 116 | +``` |
| 117 | + |
| 118 | +You can add flags or arguments. |
| 119 | + |
| 120 | +For example, you can add a new flag that allows the user to set location. |
| 121 | + |
| 122 | + |
| 123 | +``` |
| 124 | +`const name =` flags.name || 'world'` |
| 125 | +const location = flags.location || 'location'` |
| 126 | +``` |
| 127 | + |
| 128 | +### PUBLISHING TO NPM |
| 129 | + |
| 130 | +To publish to npm, just run: |
| 131 | + |
| 132 | +``` |
| 133 | +$ yarn publish |
| 134 | +``` |
| 135 | + |
| 136 | +Then anyone can install your CLI with the following: |
| 137 | + |
| 138 | +``` |
| 139 | +$ npm install -g mynewcli |
| 140 | +$ mynewcli --help |
| 141 | +``` |
0 commit comments