In this video as promised you are going to get a bit of experience working with an NPM package on your
own.
Before we get into the challenge though I want to take a quick moment to talk about node modules.
The directory that NPM created.
This is a generated directory.
So that means that NPM generates it.
And it's not something we should be manually editing because when we use the NPM command again our edits
are going to get over written.
You can actually recreate this directory from scratch using NPM based off of the contents of package
dot Jason and package lock dot Jason.
So if you were to download a zip for this course or you were to grab the code from the get hub repository
which contains all of the course code you'll notice that the node modules directory is nowhere to be
found.
So let's experiment with this by actually deleting it from our local project.
I'm going to remove that folder and this is exactly what you would see if you grab the lecturer zip
for the last lesson.
It's the same files but with no node modules directory.
Now the node modules directory is necessary for our app to run when we require an NPM library.
It's going to look in that node modules folder for the application code.
So if I were to run at J.S. Right now it would fail.
Let's do it just to see.
So node space app dot J.
S.
I'm gonna go ahead and run this command and what do we get.
We get a nice error message right here.
Error can not find module validator.
So it's complaining that we're using this module but it's unable to locate it.
So clearly we do need the contents of that node modules folder.
The answer is how do we get it back.
All we have to do is run npm install.
We're not going to provide any specific packages afterwards.
This is the exact command.
When we do this it's going to look at the contents of package lock dot Jason and package dot Jason to
determine which dependencies and which versions our application is using.
It's then going to recreate that node modules folder from scratch based off of just the contents of
these two text files.
So for larger applications the node modules folder can get really really big.
So you might want to delete it if you were to share the code with a friend or if you were to add it
to your own GitHub repository.
You can always get that folder back when you download the project by running npm install.
So right here I'm going to run that command and it's going to regenerate node modules based off of the
contents of our Jason files.
Right here we can see that we still have the validator folder inside of there.
After recreating the directory and once again our app is back to its working state node space app.
J.
S I run the script and we do indeed get the correct results.
So when you download the code for this course make sure to run npm install from inside of the project
you're working with before you try to run any of the scripts.
Now let's jump into the core of the video which is going to be a challenge for you.
You're going to install require and use a brand new NPM library.
Let's go ahead and talk about which one you're going to use.
I'm gonna head over to the NPM search bar the library you're going to use is called Chalk like sidewalk
chalk.
Right here we can pull up the package page and you can see that this one is even more popular than the
validator package we used before.
This one gets 15 million weekly downloads.
It is a very popular utility for all sorts of note applications.
Now what exactly does Chalke do.
Well if we scroll down on the package page we can learn a bit more about it.
Chalk is a little utility that allows us to customize how text gets printed to the console when working
with node.
So here for example this is the default styling with chalk.
We can override that and that can be a very useful thing to be able to do.
Imagine you're creating a web server using something like express and NPM package we'll be exploring
later in the class.
You might want to customize how you print logs for your server maybe you print errors in red or with
a red background and maybe you print success messages in green while you print warnings in yellow.
Using a simple tool like chalk you can create better applications that make it easier for people to
figure out what exactly is going on.
So it's going to be your job to install it and use it inside of our little app.
Dot J s script over in Visual Studio code before we talk about what I'd like you to do.
Let's remove our console dialogue call with our call to validator dot is U.R.L. and let's also remove
that require on line one where we load the validator library in now down below.
We're going to talk about the challenge for this one and right here I have all of the comments to show
you how to get this done.
So big picture goal.
Use the chalk library in your project and that's going to require you to do a few different things.
First up you're going to have to install it.
You want to install a version to appoint four point one of chalk.
Now if you forget the command.
That's OK.
That is the entire point of these challenges.
It's to give you experience.
So you build that muscle memory.
You can refer to the previous video to look up that command.
Or better yet crack open the PDA f guide as that is a very easy way to scan between lessons and figure
out exactly what was covered.
It includes code snippets as well as command line commands that we covered in the lesson.
Step two you're going to load chalk in using require just like we did for validator.
So that could happen up here on line one just before our require call to load and notes then you're
going to use the chalk library to print the string success in the console with green text.
So green text would look a bit like what we have over here though the exact shade of green will depend
on your operating system and other display settings.
Now once you have that done you're going to test your work.
So you want to run our script after saving it and you should see the green text success down below in
the terminal.
Now if you're wondering how you're supposed to get this done considering you've never used the library
before.
That's where the documentation comes into play.
Maybe you're saying Hey Andrew I bought the course so you could teach me these things.
And well we're going to cover a ton of packages in detail learning exactly how they work and how you
can build complex apps with them.
The goal is to also give you a bit of experience here and they're learning how to use new tools on your
own.
And I'll show you once again how to actually solve the challenge afterwards it's important to build
up this experience.
So when you're done with a class you can go off and explore all of the interesting and awesome things
that NPM has to offer down below.
There is some example usages here they are printing some text in blue so you can use this as a starting
point.
And if you were to scroll down through the documentation there's a styles section which gives you even
more insight onto the various modifiers and colors that are available to you.
So take some time to really explore the docs and figure out how to solve this challenge when you're
done with that.
You can always use the bonus to experience a bit more of what chalk has to offer.
Use the docs to mess around with other styles such as making the text bold C in here or inverting the
text where the color becomes the background.
So here that would be green inverse.
As an example just take some time to mess around with a few other ways.
Chalk can be used as always.
We're going to work through all of the solutions together.
So if you get stuck or you can't quite get something that is a ok.
All right pause the video give this your best effort and when you're done come back and click play
how'd you do.
Let's go ahead and walk through these solution together.
So step one we want to install this library.
I already gave you the exact version number and the module name which means down below.
From the notes app folder we can run npm install providing that package name.
So right here we are installing a new library so we do indeed list it out shock like we did in the last
video.
Then we use the at sign to provide the version two point four point one.
Now we can go ahead and run that command which is going to install chalk and all of its dependencies.
Once we have that done we can move on to Step Two and actually load it in.
Now when it comes to loading it in and using it this is where the docs come into play.
Right here I can see that I can load it in and use it like so.
So let's get that done up above on line one though it could have been below this line.
I'm going to create my constant called chalk and I am going to load in the library by using require
remember for NPM packages.
We load it in by providing its name inside of the string we Pastor require.
Now we have access to all of the utilities that chalk exports and we can go ahead and take advantage
of them.
And in this case our goal is to print the success message in green.
So right here we're gonna get that done.
And it all starts with a console dialogue call.
What are we going to do.
I'm going to call a another method inside of there that is chock dot followed by the color.
So this is one of the things you have to discover for yourself right here they used chalk dot blue but
I wanted you to print things in green.
If you scroll down there are even more examples like chalk red which you may have seen and they even
use chocked green right here.
So all we have to do is use chalk dot green.
That's a method.
And we're gonna go ahead and provide our string which is indeed the string success.
Let's go ahead and be successful at spelling success.
Now once again remember you could have created a variable first and past that in that would have been
a perfectly valid way to solve the challenge as well right here for example.
I could have created a concept called green message setting an equal to whatever comes back from our
call to chalk green.
And then I could have passed green message in both of those would have been identical solutions in terms
of functionality.
Now let's go ahead and test our work.
I'm gonna save app dot J S from the terminal.
We need to rerun our script that is node space app.
J.
S and what do I get.
I get green M S H is not defined.
So here I have a small typo.
Clearly I meant to reference the green message variable.
So all I need to do is replace M S H with M S G matching up with the variable name up above.
Now I could have stopped the recording and gone back and refilled it pretending to be perfect but that's
not the point.
The point is to actually solve problems and work through our issues becoming better developers along
the way.
So every once in a while sure I'll leave my errors in.
Now let's go ahead and save the program again.
After typing the variable name incorrectly I'm going to rerun the script using the up arrow key and
enter and here I am indeed getting my success message printing in green which is a fantastic step in
the right direction.
Now when it comes to the bonus there really is no right or wrong way to solve that.
The goal was to just mess around with another styling option or two and if you head over to the example
of documentation you can see that there is a line where they chain things together.
Now here they call chalk dot blue dot B G red dot bold to create text that's bold on a red background
where the text itself is blue so we can go ahead and use bold with our current setup to create bold
green text.
Now the order you put things in doesn't matter.
So it could be bold first then green or Green first then Bolt let's prove it choc dot bold dot Green
I'm gonna save the program I'm going to rerun things the program works and we do get our bold green
text Now let's remove bold and one of the extra dots and put it after Green.
So here I'm going to call shock dot Green Dot bold calling bold as a method if we call bold as a method
and rerun the script we get the exact same result.
So here we can chain together exactly what we need to create any sort of styling we want giving us a
nice set of options we could add a third style into the mix alongside of green and bold.
Now maybe you tried to use inverse.
If you scroll through this example which is a great way to figure out how to use a library you'll notice
that inverse doesn't actually exist here.
They use things like underline they use underline there and down below.
But there's nothing related to inverse seeing the colors.
If we scroll down a bit though we can actually pull up the API docs.
If we go back down to that Styles section we can see all of these style modifiers and all of the colors
available to us.
Right here there's another option called inverse.
Let's go ahead and actually use it just to see what happens.
Now once again I could add inverse first in the middle or at the end.
I'm just going to toss it right here.
So we have chalk dot Green Dot inverse dot Bolt.
All this is going to do is make the green color the background.
And if I run the script that's exactly what we got.
So there we go.
We have completed the challenge successfully.
I'm going to remove those challenge comments and we now know how to use NPM libraries in our project
which is a good thing because we're going to use NPM libraries throughout the course to create our back
end API as real time apps and more.
Now there's just one more way we're going to explore how we can install and use NPM modules and it's
going to make our lives a lot easier.
So let's go ahead and jump right in to the next video.