Bringing npmjs.com to the terminal
Tags: cli, npm, terminal, productivity
Published: 2020-10-10 11:16:09

In this post I want to introduce a new CLI, I have built called [npmx](https://github.com/terminal-junkies/npmx) which is an advanced CLI interface for [npm](npmjs.com). 

The inspiration comes from [TUI](https://en.wikipedia.org/wiki/Text-based_user_interface)(Terminal User Interface) or text-based user interface apps like [Midnight Commander](https://midnight-commander.org/) and the [Vim](https://www.vim.org) editor.

Most of these TUI apps are built using the [ncurses](https://invisible-island.net/ncurses/) library based on the C language, but we have a JavaScript library called [blessed](https://github.com/chjj/blessed) with which you can build such cool and awesome CLIs in JavaScript.

This tool is meant to be a complete replacement for `npm` so that you can all the things with npm in one place, that is the terminal. With npmx you can search packages from the terminal, run your project tasks, install a selected package with one keystroke and much more.

You also have mnemonic key-bindings for installing packages such `i` for installing and saving the package in your package.json, `d` for installing it as a dev dependency and `l` for installing it as a global package. 

So when you press `i` after selecting a package, it's like running
```
npm install --save <your-package>
```



## Installation
You can install the CLI using normal npm install and it is recommended to install globally so that you can use them anywhere.

```
npm install --global @terminal-junkies/npmx
```

## Usage
Invoking the CLI is just a simple command like `npmx` and you get a nice terminal user interface with a lot of goodies.

```
npmx
```

## Walkthrough

[![asciicast](https://asciinema.org/a/7ajz46JAVDVR9nV5ZMwhLLzAT.svg)](https://asciinema.org/a/7ajz46JAVDVR9nV5ZMwhLLzAT)

### Home
![home page](https://raw.githubusercontent.com/rajasegar/npmx/master/screenshots/home.png)

The home screen have information like the Node.js version and `npm` version you are currently using, the list of scripts from your `package.json` which you can navigate with up and down arrows and pressing Enter will run the task by opening a new terminal inside the same screen.

![project task](https://raw.githubusercontent.com/rajasegar/npmx/master/screenshots/project-task.png)

### Search
![search page](https://raw.githubusercontent.com/rajasegar/npmx/master/screenshots/search.png)

The biggest advantage is searching for packages within the terminal. You might already have the `npm search` command but it will not list the entire information about your package like the package readme, author information which is shown in the npm website.

Just press '/' [forward slash] to move the cursor to the search box, enter search keywords and press Enter you will get a list of search results, choose one by pressing enter and you will be taken to the package screen.

### Package
![package page](https://raw.githubusercontent.com/rajasegar/npmx/master/screenshots/package.png)

Once you enter the package screen, you can find all the relevant information about your package, like it is shown in the [website](https://npmjs.com). The only thing is you don't have to leave your terminal window to do such a simple task. And it does avoid a lot of inconveniences that comes with context switching.

If you are stuck or something I have put together a small [FAQS](https://github.com/terminal-junkies/npmx#faqs) section in the project [README](https://github.com/terminal-junkies/npmx) to guide users about how to quit the app, scroll the package readme and so on.

Please feel free to raise any issues you are facing with the tool in the project [issues](https://github.com/terminal-junkies/npmx/issues).