00:00:01
hey everyone in this video
00:00:03
we're going to find out what are npm and
00:00:05
mpx
00:00:06
and what's the difference between the
00:00:08
two i'm also going to show you a few use
00:00:10
cases
00:00:11
that i'm using on a daily basis to make
00:00:13
my development job a lot easier
00:00:16
so if you want to know more about npm in
00:00:18
npx
00:00:19
and how to work faster and smarter with
00:00:22
them
00:00:22
this video is for you if you however
00:00:25
prefer a written guide
00:00:26
i got you covered you can find a link to
00:00:29
the article
00:00:30
in the description down below so without
00:00:32
further ado
00:00:33
let's get to it
00:00:37
all right so first we must understand
00:00:39
what is
00:00:40
npm and what we can do with it
00:00:43
npm is a couple of things first and
00:00:45
foremost it is an online repository for
00:00:47
the publishing of open source node.js
00:00:50
projects
00:00:51
second it is a command line interface
00:00:53
tool that
00:00:54
atu installation version and dependency
00:00:57
management
00:00:58
of those packages there are hundreds of
00:01:00
thousands of node.js
00:01:01
libraries and applications on npm
00:01:05
and many more are added every day npm by
00:01:08
itself
00:01:09
doesn't run any package so if you want
00:01:11
to run a package using npm you must
00:01:13
specify the package in your package.json
00:01:16
file
00:01:17
when executables are installed via npm
00:01:20
packages
00:01:20
npm can create two kind of links to them
00:01:23
the local installations have links
00:01:25
created at nod modules bin directory
00:01:28
while the global installations have
00:01:30
links created from global bin
00:01:32
directory for example usr local bin on
00:01:35
linux
00:01:36
or app data and epm on windows
00:01:40
to execute a package with npm you have
00:01:42
two options
00:01:44
the first and the most cumbersome is to
00:01:46
type the local path of the package you
00:01:47
want to run
00:01:49
in my case that would be not modules bin
00:01:54
react scripts start
00:01:57
this package that is installed when you
00:01:59
get the create react app
00:02:01
project will create a local environment
00:02:05
for you
00:02:07
and as you can see here is a project
00:02:12
a second option and the most used one is
00:02:14
to run
00:02:15
a locally installed package by adding it
00:02:17
to your package.json file
00:02:19
in the script object as you can see
00:02:22
i will have it right here and
00:02:25
now i can run npm
00:02:30
run start
00:02:33
and it will give us the same output it
00:02:36
will run the server
00:02:37
and it will open the localhost website
00:02:40
for us
00:02:44
as you might have noticed already
00:02:45
running a package with plain npm
00:02:47
requires
00:02:48
quite a bit of ceremony maybe sometimes
00:02:51
you'd want to take a look at a specific
00:02:52
package and
00:02:54
try some commands but you cannot do that
00:02:56
without installing the dependencies
00:02:59
in your local node modules folder
00:03:01
luckily
00:03:02
this is where npx comes in handy let's
00:03:04
have a look
00:03:06
since version 520 npx is pre-bundled
00:03:10
with npm
00:03:11
so it's pretty much a standard nowadays
00:03:13
npx is also a command line interface
00:03:15
tool
00:03:16
whose purpose is to make it easy to
00:03:18
install and manage dependencies hosted
00:03:20
in npm registry
00:03:21
it is now very easy to run any sort of
00:03:24
node.js based executables
00:03:26
that you would normally install via npm
00:03:29
you can run which npx command
00:03:32
to see if it's already installed for a
00:03:34
current npm version
00:03:36
if not you can install it by running npm
00:03:40
install g npx once you make sure you
00:03:43
have it installed
00:03:45
let's see a few use cases that make npx
00:03:47
extremely useful
00:03:51
if you want to execute a local install
00:03:52
package all you need to do is type
00:03:55
npx your package name
00:03:58
i'm going to run the exact same package
00:04:00
from a few moments ago which is
00:04:03
the react script start package
00:04:06
and the npx will check whether command
00:04:09
or a
00:04:09
package exist in the path variable or in
00:04:12
the local project binaries
00:04:14
and it will execute it
00:04:21
as you can see it works just as if i
00:04:23
were running the
00:04:24
npm run command it started a local
00:04:26
server and
00:04:27
open up the react project another major
00:04:31
advantage
00:04:32
is the ability to execute tools from npm
00:04:35
packages
00:04:36
without having to install them globally
00:04:38
let's
00:04:39
test this out by running npx
00:04:43
can say wow
00:04:51
perfect npx just run a script
00:04:54
without installing it on my machine
00:04:58
this is awesome because sometimes you
00:05:00
just want to use some
00:05:01
cli tools but you don't want to install
00:05:04
them globally
00:05:05
just to test them out this means you can
00:05:08
save some
00:05:09
disk space and simply run them only when
00:05:11
you need them
00:05:12
this also means your global variables
00:05:14
will be less polluted
00:05:18
we can also run code directly from
00:05:20
github we can use
00:05:21
npx to run any github keys and
00:05:23
repositories
00:05:25
let's focus on executing github gigs
00:05:27
because it's easier to create one
00:05:29
i'm going to use a guest that i've
00:05:31
created beforehand
00:05:33
but if you want to run your own script
00:05:35
make sure it has a main.js file
00:05:37
and the package.json after you've set up
00:05:40
the files
00:05:41
all you have to do is run the npx with
00:05:44
the link to that gis
00:05:47
mine is this one i'm going to run it
00:05:53
it might take a second awesome
00:05:56
the github script was executed in a
00:05:58
matter of seconds
00:06:00
make sure carefully read any script
00:06:02
before you execute it
00:06:04
to avoid serious problems that can occur
00:06:07
due to malicious code
00:06:08
[Music]
00:06:10
one final cool feature i want to show
00:06:12
today is
00:06:13
testing different package versions npx
00:06:16
makes it extremely
00:06:17
easy to test different versions of a
00:06:19
node.js package or module
00:06:21
to test this awesome feature we're going
00:06:23
to locally install
00:06:24
create react app package and test out an
00:06:28
upcoming version
00:06:29
first let's find out that these tags of
00:06:31
the project we're going to install
00:06:33
run npm v create
00:06:36
react app
00:06:41
these tags provide aliases for version
00:06:44
numbers which
00:06:45
makes it so much easier to type
00:06:48
let's use npx to try out the canary disk
00:06:51
tag of create react app
00:06:52
which will create the app inside the
00:06:54
sandbox directory
00:06:57
type npx create react
00:07:03
sandbox npx will
00:07:06
temporarily install the canary version
00:07:09
of create react app
00:07:10
and then it will execute to scaffold the
00:07:13
app and install its dependencies
00:07:15
i'll speed this up to save us some time
00:07:37
once installed we can navigate to the
00:07:38
app and then start it with
00:07:40
npm start or yarn start
00:08:00
all right so as you can see it will
00:08:01
automatically open the react app
00:08:03
in your default browser window like
00:08:07
we are used to and now we have an app
00:08:09
that runs
00:08:10
on the canary version of create react
00:08:13
app package
00:08:16
alright guys that was it for today in
00:08:19
this video we found out a bit about
00:08:21
npm and mpx and how we can use npx to
00:08:25
help us
00:08:26
avoid versioning dependency issues
00:08:29
and installing unnecessary packages that
00:08:32
we just want to try out
00:08:34
we've seen that npx also provides a
00:08:36
clear and easy way of executing packages
00:08:39
commands modules and even github keys
00:08:42
and repositories
00:08:44
if we haven't used npx before now is a
00:08:47
good time to start
00:08:49
i hope you found this video useful let
00:08:51
me know what you think about it in the
00:08:52
comment section below
00:08:54
i was carol and i'll see you next time
00:09:20
you
