|
1 | 1 | # VTEX CLI Plugin Template |
2 | 2 |
|
3 | | -Extend the `vtex` toolbelt! |
| 3 | +This repository is a template containing all the essential boilerplates to help you create new Toolbelt plugins. With this template, you'll be able to develop and locally test your new plugin commands on any VTEX IO app. |
4 | 4 |
|
5 | | -## Developing |
| 5 | +> ℹ️ *[Toolbelt](https://developers.vtex.com/vtex-developer-docs/docs/vtex-io-documentation-toolbelt) is a command-line interface that provides all the necessary features to start developing apps with VTEX IO. To see which commands the Toolbelt natively includes, check [our docs](https://developers.vtex.com/vtex-developer-docs/docs/vtex-io-documentation-vtex-io-cli-installation-and-command-reference) or run `vtex` in your terminal.* |
6 | 6 |
|
7 | | -1. Clone `vtex/toolbelt` and follow the steps on the Contributing section. |
8 | | -2. Clone/Create a plugin with this template. |
9 | | -3. Change the template name under this project's `package.json`. |
10 | | -2. Run `yarn link` on this project. |
11 | | -3. Now run `vtex link @vtex/cli-plugin-template` (or the new name) on the `vtex/toolbelt` project. |
12 | | -4. Run `yarn watch` on the `vtex/toolbelt` |
13 | | -5. Test the command on a VTEX IO app with `vtex-test hello` |
| 7 | +In the following sections, you'll learn how to make better use of this template and all the necessary steps to create any Toolbelt plugin you want. |
14 | 8 |
|
15 | | -For more information, read [Ocliff Docs](https://oclif.io/docs/introduction). |
| 9 | +## Prerequisites |
16 | 10 |
|
17 | | -[](https://oclif.io) |
18 | | - |
| 11 | +Before proceeding any further, we recommend you to: |
19 | 12 |
|
20 | | -<!-- toc --> |
21 | | -* [VTEX CLI Plugin Template](#vtex-cli-plugin-template) |
22 | | -* [Usage](#usage) |
23 | | -* [Commands](#commands) |
24 | | -<!-- tocstop --> |
25 | | -# Usage |
| 13 | +1. Clone the [Toolbelt repository](https://github.com/vtex/toolbelt) into your local files. |
| 14 | + |
| 15 | +2. Check if you have the Toolbelt correctly installed in your machine. |
| 16 | + |
| 17 | +>⚠️ *We highly recommend that you install the Toolbelt using `yarn`. Follow [these instructions](https://github.com/vtex/toolbelt/#getting-started-installing-the-vtex-toolbelt) for more information on why.* |
| 18 | +
|
| 19 | +3. Install the [`releasy`](https://github.com/vtex/releasy) package by running `yarn global add releasy`. |
| 20 | + |
| 21 | +4. Check our [Toolbelt design guidelines](https://github.com/vtex/ux-writing/blob/new-content/docs/text-patterns/toolbelt-cli.md) for keeping up with the **best practices** when developing your plugin. |
| 22 | + |
| 23 | +5. Check [oclif](https://oclif.io/) basic concepts. |
| 24 | + |
| 25 | +>ℹ️ Toolbelt is built with [oclif](https://oclif.io/docs/introduction), a framework for building extensible CLIs in Node. |
| 26 | +
|
| 27 | +### Setting up the local development environment |
| 28 | + |
| 29 | +To locally test your plugins as you code, you'll need to use the `yarn watch` command, which is responsible for creating a [symlink](https://en.wikipedia.org/wiki/Symbolic_link) named `vtex-test`. |
| 30 | + |
| 31 | +To use the `yarn watch` command, you must add `$HOME/.vtex/dev/bin` to your `PATH` environment variable. Take the following steps: |
| 32 | + |
| 33 | +>⚠️ ***Keep in mind:** these steps may vary depending on your operating system.* |
| 34 | +
|
| 35 | +1. Open the `~/.bashrc` file (or the corresponding shell configuration file). |
| 36 | +2. At the end of this file, add the line: `export PATH=$PATH:$HOME/.vtex/dev/bin`. |
| 37 | +3. Save it. |
| 38 | +4. Run the command `source ~/.bashrc` (or corresponding file). |
| 39 | + |
| 40 | +## Creating a new plugin |
| 41 | + |
| 42 | +### Step 1: Creating and organizing your repository |
| 43 | + |
| 44 | +1. [Create a new repository from this template](https://docs.github.com/en/free-pro-team@latest/github/creating-cloning-and-archiving-repositories/creating-a-repository-from-a-template) inside the [`vtex` organization.](https://github.com/vtex) |
| 45 | +2. Open the `package.json` and update the `name` and `description` fields, according to your scenario. |
| 46 | + |
| 47 | +>⚠️ *Please keep the standard `@vtex/cli-plugin-{name}` when naming your plugin.* |
| 48 | +
|
| 49 | +3. Check if `vtex` under `devdependecies` in the `package.json` file is referring to the [last version of the Toolbelt](https://github.com/vtex/toolbelt/releases) and update it if necessary. |
| 50 | + |
| 51 | +4. Open the `readme.md` file and update it, ensuring that you replace `template` with the name of your plugin and removing any unnecessary content. |
| 52 | + |
| 53 | +>⚠️ *You don't need to worry about updating the [usage](#usage) and [command](#command) references, since these sections will be automatically updated.* |
| 54 | +
|
| 55 | +### Step 2: Developing your plugin |
| 56 | + |
| 57 | +Develop your plugin commands inside the `/src/commands/` folder, referring to the [oclif API reference](https://oclif.io/docs/commands) and `/src/commands/hello.ts` example file. |
| 58 | + |
| 59 | +Also, if necessary, feel free to create libraries, clients, and [modules](https://oclif.io/docs/running_programmatically#sharing-code-with-modules) inside your `src` folder. |
| 60 | + |
| 61 | +>ℹ️ *Please refer to our [Toolbelt design guidelines](https://github.com/vtex/ux-writing/blob/new-content/docs/text-patterns/toolbelt-cli.md) for keeping up with the **best practices** when developing your plugin.* |
| 62 | +
|
| 63 | +### Step 3: Testing your plugin |
| 64 | + |
| 65 | +1. Run `yarn link` in your plugin project. |
| 66 | +2. Now, in the **cloned** Toolbelt directory, run `yarn link @vtex/cli-plugin-{name}`. |
| 67 | +3. Run `yarn watch` in both the cloned `vtex/toolbelt` and in the `plugin repo`. |
| 68 | + |
| 69 | +A symlink named `vtex-test` will be created and you'll be able to locally test your plugin as you develop it. That means, for example, that you can test your plugin commands on any VTEX IO app by locally running `vtex-test {command-name}`. |
| 70 | + |
| 71 | +### Step 4: Standardizing and deploying your plugin |
| 72 | + |
| 73 | +If you're satisfied with the tests performed and the developed plugin: |
| 74 | + |
| 75 | +1. Access your profile on [npm](https://www.npmjs.com/). As a part of the `vtex` organization, you'll have access to [generate a new **publish** token.](https://docs.npmjs.com/creating-and-viewing-access-tokens) |
| 76 | +2. Copy the generated token. |
| 77 | +3. Open your plugin repository on GitHub. |
| 78 | +4. Go to *Settings > Secrets* and [create a new repository secret](https://docs.github.com/en/free-pro-team@latest/actions/reference/encrypted-secrets#creating-encrypted-secrets-for-a-repository) with the name `NPM_TOKEN` and paste the value of the previously generated token. |
| 79 | + |
| 80 | +>⚠️ *Please use capital letters for `NPM_TOKEN`.* |
| 81 | +
|
| 82 | +5. Now, go to *Settings > Manage access* and include the [IO DevTools](https://github.com/orgs/vtex/teams/io-devtools) and [IO Framework](https://github.com/orgs/vtex/teams/io-framework) teams as admins. |
| 83 | + |
| 84 | +>⚠️ *If you're already part of one of those teams, please consider removing your single access.* |
| 85 | +
|
| 86 | +6. In the *Settings > Branches* section, [add a new rule](https://docs.github.com/en/free-pro-team@latest/github/administering-a-repository/configuring-protected-branches) to the master branch, making sure you check the following options: |
| 87 | + |
| 88 | +- Require pull request reviews before merging (Required approving reviews: 1). |
| 89 | +- Require status checks to pass before merging. |
| 90 | + - Require branches to be up to date before merging. |
| 91 | + |
| 92 | +7. Open a pull request containing the changes in your plugin repository. |
| 93 | +8. Wait for comments from reviewers, discuss and fix any related issues. Once you receive an LGTM, deploy your plugin using the [releasy](https://github.com/vtex/releasy#usage) package. |
| 94 | + |
| 95 | +Once the CI tests are completed, your package will be automatically available on [`npm`](https://www.npmjs.com/) as part of the `vtex` organization. |
| 96 | + |
| 97 | +### [OPTIONAL] Step 5: Adding your new plugin to the Toolbelt |
| 98 | + |
| 99 | +The [Toolbelt](https://github.com/vtex/toolbelt) project adheres to a strict pull request review workflow. |
| 100 | + |
| 101 | +To request including your plugin in the Toolbelt, update the [Toolbelt `dependencies`](https://github.com/vtex/toolbelt/blob/master/package.json#L52) and the [`CHANGELOG.md`](https://github.com/vtex/toolbelt/blob/master/CHANGELOG.md) file. Open a pull request, explaining what your plugin does, wait for comments from reviewers, discuss and fix any related issues. Once you receive an LGTM, you'll be able to merge it to the master branch. |
| 102 | + |
| 103 | +>⚠️ ***Keep in mind:** If your plugin is not accepted in the [Toolbelt](https://github.com/vtex/toolbelt) project, you can still use it **locally**. For that, you need to go inside de cloned toolbelt repo and fire the command `yarn add PLUGIN_NAME`, then add plugin name in `package.json` in `oclif:plugins` section - [example](https://github.com/vtex/toolbelt/blob/2e8924bddb95d7f308d448584ac63ec8b121f877/package.json#L170) -. Run `yarn watch` and use `vtex-test` to use it. In these cases, however, VTEX does not support, neither takes any responsibility for any damages caused by the developed plugin.* |
| 104 | +
|
| 105 | +# README.md plugin template |
| 106 | + |
| 107 | +Please refer to the following sections as a template for your plugin README.md file. |
| 108 | + |
| 109 | +## Usage |
26 | 110 | <!-- usage --> |
27 | 111 | ```sh-session |
28 | 112 | $ npm install -g @vtex/cli-plugin-template |
29 | 113 | $ vtex COMMAND |
30 | 114 | running command... |
31 | 115 | $ vtex (-v|--version|version) |
32 | | -@vtex/cli-plugin-template/0.0.0 linux-x64 node-v12.20.0 |
| 116 | +@vtex/cli-plugin-template/0.0.0 linux-x64 node-v12.21.0 |
33 | 117 | $ vtex --help [COMMAND] |
34 | 118 | USAGE |
35 | 119 | $ vtex COMMAND |
36 | 120 | ... |
37 | 121 | ``` |
38 | 122 | <!-- usagestop --> |
39 | | -# Commands |
| 123 | +## Commands |
40 | 124 | <!-- commands --> |
41 | 125 | * [`vtex hello [FILE]`](#vtex-hello-file) |
42 | 126 |
|
|
0 commit comments