Node.js movie app - Create the framework

We will build a Node.js CLI script that displays the details of a selected movie. As such, this app doesn’t have a front-end interface and everything will be displayed in the terminal.

Apart from the lack of a graphical user interface, the app will be like a real one and will also include unit tests. We will use an external API from where the data of the movies are fetched.

Let’s get started!

Setting up the project folder

Node.js. First of all, Node.js should be installed on your machine. If it’s not, click the link above and download the latest stable version (8.11 at the time of writing this) and install it.

Once it’s done, cd to your favourite folder, create a new one for the project and navigate to it:

mkdir movie-search
cd movie-search

package.json. Once there, type npm init and answer the questions. If you don’t want to bother entering answers, you can bypass the process by typing npm init -y. This will give a default answer of yes to each question.

Now a package.json file should be resting in the movie-search folder.

If you are not familiar with the process of setting up a project folder, you can get a more detailed description of it here.

Installing the CLI tool

Let’s set up the CLI tools first.

figlet and Chalk

The gadgets. We are using two great libraries to place the application into a frame.

The first one is called figlet, which will display really cool letters in the terminal. You can format the letters and make ghost letters if you want to. We won’t go crazy here though and will stick to the basics.

The other tool is Chalk, which formats the characters written to the terminal. You can choose the font colour and style, or, you can even give a background colour to the characters.

Let’s install them very quickly:

npm install --save figlet chalk

Creating the frame. Now that we have them installed, let’s use them!

Create a file called index.js in the root of the project folder and require both figlet and Chalk:

const chalk = require('chalk');
const figlet = require('figlet');

index.js will contain the script, which will be wrapped inside a figlet function call. This is not compulsory (nor is it the use of Chalk) but these libraries are cool and why not use them if they are available? Life is just too short to miss out on them.

Let’s do it then:

figlet('Movies', (_, data) => {
  console.log(chalk.cyan(data));
});

figlet. figlet accepts two arguments. The first one is a string and this string will be displayed when we run the file. Because this app is about movies, it comes with no surprise that the word “Movies” will be used here.

The second argument is a callback function, which again receives two arguments. The first is the error, and the _ implies that we won’t handle it because in our case there’s not much to handle. We call figlet straight away and assume that the library works.

Chalk. data refers to the string Movies and it will be logged to the console with the help of Chalk. The result will be the word “Movies” in large font size and cyan colour.

The list of available colours is decent, so feel free to play around with them. Every colour is a method on chalk and we need to pass the data we want to colourize as an argument.

If you run the node index.js command in the terminal, the result is just amazing: big “Movies” in light blue!

Getting our feet wet with Vorpal

We are getting to the more interesting part soon but before starting to write the script, we will need to install Vorpal, our CLI tool:

npm install --save vorpal

vorpal.command. First we need to require it in index.js:

const vorpal = require('vorpal')();

vorpal needs to be instantiated before it’s used, hence the extra pair of parentheses in require('vorpal')().

Vorpal makes several methods available from which we will only use a few here.

We define the command to be executed in the command method. The first argument of command is the actual string we need to type in the terminal to start the CLI. The second argument is a description, which will be displayed if the help command is fired. It’s a good practice to write a sentence about what the command does.

command.action. The action method is chainable to command and it will define what the script has to do once the command specified in command is entered.

action accepts a callback function as an argument and because we will also deal with promises in body of the callback later, we can use the async/await syntax here to make our code more readable. The body of this async function will contain the code which will be run.

We can then write something like this:

vorpal
  .command('search', 'Start searching movies')
  .action(async () => {
    vorpal.log(chalk.yellow('Coming soon!'));
  });

Our command is called search, this is what we have to enter once the giant “Movies” word appears. If we type help, we’ll get the options available:

Commands:

  help [command...]  Provides help for a given command.
  exit               Exits application.
  search             Start searching movies

Our custom command (search) is listed there as well as the default help and exit commands.

Our action doesn’t do much at this stage, it simply displays a “Coming soon!” message in yellow. vorpal comes with a log method, which is recommended by the documentation over the traditional console.log inside the vorpal instance.

vorpal.delimiter. We can also have a custom delimiter for our script which will replace the default $ in the command line. We also need to show it:

vorpal
  .delimiter('Movies$')
  .show();

Now you will see Movies$ at the beginning of each line in the terminal.

The full code should be very similar to this snippet:

figlet('Movies', (_, data) => {
  console.log(chalk.cyan(data));

  vorpal
    .command('search', 'Start searching movies')
    .action(async () => {
      vorpal.log(chalk.yellow('Coming soon!'));
    });

  vorpal
    .delimiter('Movies$')
    .show();
});

Running the script

npm start. It’s a good idea to set up a start command in package.json. Although it won’t be much shorter than entering node index.js but scripts are usually started with an npm command, so let’s do it very quickly.

In package.json, inside the scripts object, enter the following:

"scripts": {
  "start": "node index.js"
}

We have attached the node index.js to npm start, so whenever we type npm start, the node index.js command will fire.

Now everything is set up to start the (so far dummy) CLI script! Type npm start and you should see the mega-“Movies” in cyan colour, then the Movies$ delimiter. It means that the CLI script has started inside vorpal.

Now type search and you will see “Coming soon!” in pleasant yellow. Really cool!

The script can’t do more at this stage, so type exit to quit the script and you will be back to the project folder.

Conclusion

This concludes Part 1 of the Node.js movie script. We have set up the framework and have written a very basic script, which writes a short message to the terminal.

In part 2 we will start making the app interactive. It will accept our input and offers options (movies) based on our input.

Thanks for reading and see you next time.