DEV Community

Cover image for Build Your Own CLI App in 5 Minutes (ClackJS + Node + NPM Tutorial)
Jessica Wang
Jessica Wang

Posted on

Build Your Own CLI App in 5 Minutes (ClackJS + Node + NPM Tutorial)

Introduction

Today, I’m going to show you how to build your own command line application and deploy it as a NPM package. I will be using npm, Node.js, and Clack to build this.

You can even try it out for yourself right now by running:

npx cli-trivia-game

Here's a sneak peek of the trivia game (full .gif of play-through + answers at the bottom):

Image description

Getting Started

1) Navigate to your command line and run:

npm init -y

This is going to initialize a new project, and the -y flag automatically answers “yes” to all the prompts. This generates a package.json file that has all the default settings without having to manually provide details.

2) Next, you will run:

npm -install @clack/prompts

Once you do that, you’ll have a framework that lets you create things like spinners, multi-selection, and self-validated cancel logic all with just a few lines of code.

3) Let’s leverage Clack’s built-in setup logic. To create an intro, I’m going to call intro here and pass in this string that let’s the player know they’re about to play in a trivia quiz that tests their CLI knowledge.

Image description

4) Since this is a trivia quiz, let’s ask some questions. First, I’ll create a class called Question that requires a question string, an array of potential answers, and the index of the correct answer.

Image description

5) Then, I’m going to create 10 question objects using this class template.

Image description

6) Now that we’ve got our questions, how do we display them on the command line? We’re going to use Clack’s select component to do this. All I have to do is pass in the question, initial value, and options, and voila.

Image description

7) To make it feel a little more sophisticated, I’m going to add a spinner after the user answers just so they have time to process the UI and makes the program feel intelligent.

Image description

8) And then to tie up, I’m going to declare a global variable called totalCorrect which will increment when the player answers a question correctly.

Image description

9) At the end, I’ll add some logic to display different outros based on how many questions the player got correct.

Image description

And the best part - we’re going to publish this as an npm package so that every developer in the world can download on their machines if they choose to. It’s actually pretty easy.

1) Go to package.json and add “bin”:”./index.js”

2) Run npm login

3) Run npm publish

4) Then run npx cli-trivia-game

3 Min Youtube version (if you prefer that) 👇

Done! But before you start this project for yourself, take into consideration that Clack is really lacking in the documentation. Anything fairly complex, you won’t benefit from the pre-made components of clack/prompts. Here's a list of other CLI frameworks you can use instead.

Check out the full code for the project here:
https://github.com/theRubberDuckiee/cli-trivia-game

Conclusion

Just like that, you have made and published your first CLI application! Congrats :)

And, if you'd like to know the answers to all 10 questions in my trivia game, here you go:

Image description

Top comments (13)

Collapse
 
therubberduckiee profile image
Jessica Wang

Random question to seed conversation since comment section is lonely:

What's a topic you feel like you should know about but you don't?

Collapse
 
fyodorio profile image
Fyodor

I actually like the topic of building node CLIs 👍 something more sophisticated would be interesting, like generating some code, or processing file system data — kinda dev tools and utilities — we all need some custom stuff from time to time

Collapse
 
therubberduckiee profile image
Jessica Wang • Edited

Hey! Yeah I've been wanting to do more complicated stuff. I'm been looking more into creating art on the command line though, more so than what you mentioned. We'll see where my ADHD brain takes me though - stay posted.

Collapse
 
schemetastic profile image
Schemetastic (Rodrigo)

Typescript, hahaha, I'd been using JavaScript for years.

Collapse
 
therubberduckiee profile image
Jessica Wang

Worked in Typescript for a few years as webdev at Microsoft and DoorDash - it was pretty easy for me to learn and a very useful tool!

Thread Thread
 
schemetastic profile image
Schemetastic (Rodrigo)

Wow, how cool. Yeah, I guess it isn't hard, that's one of the things I'd been procrastinating for quite some time. I'm maybe a bit purist, I used to be more of the kind... “I don't need a large setup to get the things done, most projects don't need to be so complicated” (I'm still a bit like that), but with tools such as Svelte I have changed my mind a bit about that.

What about you.... what is that thing you haven't learned, but you feel you should?

Thread Thread
 
therubberduckiee profile image
Jessica Wang

Well... Svelte. LOL.

I work as a developer advocate for Warp, which is why I post so many blogs around the terminal. So there are a lot of things around the command line I wish I knew better. Vim keyboard shortcuts, Neovim setup with Lua, third-party applications like fzf or exa, etc.

Thread Thread
 
schemetastic profile image
Schemetastic (Rodrigo) • Edited

Well, Svelte is dead easy to learn, in a few hours you can learn the fundamentals. For me, now it feels like one of those tools I couldn't live without.

Hahaha, oh my. You are really taking it serious, well, for sure you are productive, kudos.

By the way, I tried your trivia game... I didn't search the answers at Google, and I didn't use ChatGPT... I only looked at the source code... does that counts as cheating?

A violet text that says “You got 10 questions correct!”

Thread Thread
 
therubberduckiee profile image
Jessica Wang

haha YES. THAT'S CHEATING!

But clever cheating.

Collapse
 
darty profile image
samsepi0l

firebase

Collapse
 
therubberduckiee profile image
Jessica Wang

Same

Collapse
 
tigawanna profile image
Dennis kinuthia

Best devrel , your content is always 👌

Collapse
 
therubberduckiee profile image
Jessica Wang

awww... that really means a lot <3