Introduction to NPM

If you haven't already set up your Node sample project, you can quickly do so by following these instructions

One of the tools (programs) that came with NodeJS when we installed it was npm, which stands for Node Package Manager. This program allows you to download all kinds of useful NodeJS libraries that you can use in your projects. These libraries are called packages, or modules.

To install a module, you can run this command in the terminal:

npm install name-of-module-goes-here

When you install a module, it will be placed in a folder named node_modules. If you have not yet installed any modules for your project, then this folder will automatically be created for you when you install the first package for your project.

We are going to install a module named gray-matter, which allows you to work with markdown files. Run this command in the terminal to install the gray-matter package/module (make sure to run this command from the project folder, which is node-sample-project):

npm install gray-matter

Note that a folder named node_modules has been created, the code for the gray-matter module was downloaded into this folder.

If you look inside the package.json file, you'll see that it keeps track of the modules you install for a project. It's very important to keep a record of all the packages/modules that your app uses. These are known as dependencies because your app is dependent on them being installed in order to work properly.

For more information on the gray-matter package

Before we use the gray-matter module, we need to create a markdown file for us to experiment with. In the samples folder, create a file named sample.md and put this markdown code in it:

---
title: My Blog Post
author: John Doe
description: Some interesting blog post
published: 2024-7-7
---
# This is my sample blog post
It will cover the following topics:
1. HTML
1. CSS
1. JavaScript

Now, in the samples folder, create a file named markdown-example.js and put this code into it:

const matter = require('gray-matter');

const obj = matter.read(__dirname + '/sample.md');
console.log(obj);

We'll discuss the code in a minute, but run the script by entering node samples\markdown-example.js in the terminal and note the output displayed.

It is an object that has a few properties. These are the ones we are interested in:

1. The content property contains the markdown code (not including the meta data)
2. The data property is an object that represents the metadata in the markdown file, and it contains a property for each piece of meta data (in this case 'title' and 'author').

Now for the code, the first line in the script 'imports' the gray-matter module, which we are referring to as 'matter'. Note that if the path passed into the require() method is not a path (which starts with a dot), then node will automatically look for the module in the node_modules folder.

The second line invokes read() method of the 'matter' object, which opens the file specified by the parameter that we've passed in. The read() method returns the object that we described above. As a side note, I'm pretty certain that under the hood, the read() method makes use of the fs module to read the markdown file.

Now we'll install a package that will allow us to convert the 'content' property of the returned object into HTML.

Install a package/module named markdown-it by running this command:

npm install markdown-it

Now update markdown-example.js to look like this:

const matter = require('gray-matter');
const markDownIt = require("markdown-it")

const obj = matter.read(__dirname + '/sample.md');
console.log(obj);

const md = markDownIt({html:true});// html:true allows you to put HTML tags in the markdown files
const html = md.render(obj.content);
console.log(html);

The markdown-it module that is imported on the second line is a function, which we are referring to as markDownIt (remember that modules may be objects, functions, classes, etc.). We call this function later in the script, and it returns an object (which we've named 'md'). This object has a render() method, which takes markdown as a parameter. It converts the markdown to HTML and then returns the HTML.

When you run the script again, you should see that the markdown code has been converted into HTML.

Note that the render() method, and the read() method that we called in the previous example are synchronous methods because they do not require you to pass in a callback parameter. We are staying away from asynchronous versions of these methods for now (we'll dig into them in Web 3).

In the final project we'll be using the gray-matter and markdown-it modules/packages in some of the components that we create. So, it's important for your to understand the code samples in this activity.

In summary:

• The gray-matter package 'parses' markdown into an object. The object will contain the markdown content, as well as the meta data (key/value pairs)
• The markdown-it package converts markdown content into HTML content

Commit your changes to your Git repository.

Then create a separate branch, so that we can easily return our project to the current state if we need to. Run this command:

git branch 4-md-modules-complete

Finally, make sure to push this branch, and your main/master branch to GitHub.

In the next lesson, you'll learn about Creating Custom Modules