Let's Build a Todo CLI With Node.JS - Part One


Let's Build a Todo CLI With Node.JS - Part One

The course is part of this learning path

Let's Build a Todo CLI With Node.JS - Part One

In this first video in the Let's Build a Todo CLI With Node.JS series, you will be introduced to the argv property of the node process object. Argv allows for the capturing of arguments from the command line. This property will be used to execute code based on the arguments given.

Learning Objectives

  • Understand the structure of the argv array
  • Learn how to capture commands from the argv array
  • Implement functions to capture the arguments and execute code

Intended Audience

This course is intended for anyone who wants to learn about Node.js.



Let's Build a Todo CLI With Node.JS - Part One. In this video, I will cover how to capture commands from the terminal using Node. I will also code the initial structure to process the commands needed for this application. On the screen, I have the Node documentation for what is known as process.argv, which is short for argument vector. Process.argv returns an array containing command-line arguments passed when the Node process is executed. Because of its design, I can use this to monitor commands that are executed for the Todo application CLI. One thing I'd like to note about Node documentation, to the right there's this switch that states CJS ESM. I'm going to be building this project using command js, which is referred to as CJS on the page. 

So, I'm going to flip the switch and use the code for the required statement as written here. To demonstrate how this works, I'm going to transition over to the code editor in the Cloud Academy lab environment. In the code editor, I already have an existing todo.js file. I will use this file to capture any CLI command. Later on in the series, I will execute a corresponding function based on the CLI command given. To begin, I will type up the require statement, const using the structuring  {argv} = require ("node:process") and below this line, I will console.log(argv). So, going back to the documentation earlier, what does it mean by that this will return an array containing command-line arguments? 

To demonstrate this in the terminal, I will execute node on this file. Node todo.js 'Enter'. On the screen, I have an array. So, how does this array translate to the command node todo.js? Zooming in, the first element in the array is the location of the node executable. As in, when I type node in the terminal and hit 'Enter', it will reference this location to execute node. The second is the location of the file that I targeted with the node command, and what these first two elements represent in the array will always remain the same. So, how can I take this a step further to build a CLI? In the terminal, I will expand on this by typing a hypothetical command that would list all the todos in the terminal, node todo.js view, and I will hit 'Enter'. 

And now the array is in the terminal along with the addition of view as the third element in the array. So, what does this imply? I can take the third element in the argv array and use it as a execution command for the todo application. So, hypothetically, what if I wanted to create a todo, and the command to create a todo was add, and this todo would be about taking out the trash? In the terminal, I will type node todo.js add take out the trash, and here is the argv array. The add command is the third element in the array which is expected, and each word that is written after the add command is placed as an element in the array. The command structure works. I can always capture the third element as a command. 

The issue now is that each word after that command gets captured as a single element, and this adds complexity to capturing a todo string. So, I have two options here. I could concatenate all the elements after the command and convert it into a todo string or I can take the easier and simpler route. I can simply wrap the todo into 'to treat it as a singular string.' In the terminal, I will type node todo.js add and now in quotes, 'take out the trash'. And in the argv array, the fourth element is the todo string, and I can use that as a capture point for the todos. This is enough information on process.argv to write the code to manage the CLI commands. 

I want to adjust the code editor to shrink down the terminal, and I will delete the console.log and start commanding my plan. And this todo application is going to support the following features. As a user, I want to add a todo. As a user, I want to complete a todo. As a user, I want to remove a todo. As a user, I want to view all the todos. And these commands do relate to command credit actions you would find in a regular todo app. I believe the best way to manage these commands is through the use of a switch statement. I will start by creating a handler function. const handleCommand equals arrow function. And this arrow function will have two arguments: todoCommand and todo. Inside of the arrow function, I will create a switch and pass it through as an argument todoCommand. Now, I will build my case statements. For the first case, I will have add, and for the execution, I will console.log todoCommand and todo. 

I will add a break statement. I'm using this console.log to verify my expectation is being met and that each command will trigger the appropriate switch statement. Now I will speed up the video and use the same key structure for the remaining commands. Now that this is done, there are a few things I'd like to point out here. I'm using that todo parameter to reference the todo in different ways. The todo in the add statement is going to reference the todo text. For the complete and remove command, the todo is going to reference the todo ID. Each todo will have a unique ID generated for it. The view command doesn't really need a todo as it's just meant to view all the todos. So, I will remove this from the console.log. 

Lastly, for the switch statement, I need a default, and for the default, I will just console.log ("Please input a valid command'). The switch statement is done and now I need to set up the capturing of the command and the todo through argv. I want to create an initialization function, const init arrow function with no parameters. And inside of this function, I need to create two variables. The first, const todoCommand = argv[2]. Why index of 2? As a reminder, arrays are zero index and the command will be the third element in the array. So, I need to use the value of 2. For the second variable, const todo = argv [3]. These two variables are done. 

And now when the init function executes, I want to pass these variables to the handleCommand function. I will type return handleCommand with the arguments of todoCommand and todo. This completes the code for the init function. And when node is executed on this file, I want the init function to execute. So, down below, I will call it. Now, this completes the code for capturing commands with the CLI. I will test this out in the terminal. I will start by typing node todo.js complete and in quotes '1adf'. The 1adf is emulating the unique ID for the todo. I will hit 'Enter' and there is the console.log of complete followed by the todo ID. And this matches my expectations. Now I'm going to test the remove command. 

I will just hit the up arrow in the terminal and replace the complete with the remove command, leaving the rest the same. And I will hit 'Enter', and once again there's the console.log with remove and the ID. I will hit the apparel again and replace the ID and the remove command with view. And the view command shows up in the console.log. I also want to test out the default statement behavior. So, in the terminal, I will type node todo.js pizza, and there appears please input a valid command. And this completes the CLI, and that's it. Thanks for watching, @CloudAcademy.


About the Author
Learning Paths

Farish has worked in the EdTech industry for over six years. He is passionate about teaching valuable coding skills to help individuals and enterprises succeed.

Previously, Farish worked at 2U Inc in two concurrent roles. Farish worked as an adjunct instructor for 2U’s full-stack boot camps at UCLA and UCR. Farish also worked as a curriculum engineer for multiple full-stack boot camp programs. As a curriculum engineer, Farish’s role was to create activities, projects, and lesson plans taught in the boot camps used by over 50 University partners. Along with these duties, Farish also created nearly 80 videos for the full-stack blended online program.

Before 2U, Farish worked at Codecademy for over four years, both as a content creator and part of the curriculum experience team.

Farish is an avid powerlifter, sushi lover, and occasional Funko collector.