DEV Community

loading...

Bringing npmjs.com to the terminal

Rajasegar Chandran
Javascript Toolsmith, Front-end developer
・3 min read

In this post I want to introduce a new CLI, I have built called npmx which is an advanced CLI interface for npm.

The inspiration comes from TUI(Terminal User Interface) or text-based user interface apps like Midnight Commander and the Vim editor.

Most of these TUI apps are built using the ncurses library based on the C language, but we have a JavaScript library called 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

Home

home page

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

Search

search page

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

Once you enter the package screen, you can find all the relevant information about your package, like it is shown in the website. 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 section in the project README 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.

Discussion (0)

Forem Open with the Forem app