live_tv
Livestream Starting Soon
00
Hours
:
00
Minutes
:
00
Seconds
Up next in 10
Buy the full source code of application here:
Show More Show Less View Video Transcript
0:00
uh hello guys welcome to this video so
0:02
in this video I will actually show you
0:04
an alternative to node package manager
0:07
which is npmjs.com so where you actually
0:10
use third party nodejs modules to
0:12
actually build out web applications so
0:15
there is a alternative website to
0:18
npmjs you may say it's a great
0:20
alternative so the name of the website
0:23
is skypac
0:26
dodev so if you directly write on Google
0:29
and type right here
0:31
skypack
0:33
dodev the very first link which comes
0:35
right here so you can see it is saying
0:38
search millions of open-source
0:40
JavaScript packages but the nice thing
0:43
about this like this website which
0:47
actually differs from npmjs that you not
0:50
only have the capability to search
0:52
thousands of Open Source packages but
0:54
also it has rimed CDN links which pre
0:59
compiles the JavaScript you no longer
1:01
need to install the modules it basically
1:04
gives you the link right here you can
1:06
see that it gives you the link of this
1:09
node package you can directly include
1:12
this in the browser you no longer need
1:14
to install the module inside your local
1:16
machine you can directly include the
1:18
links right here so this makes it really
1:20
easy because you know no longer have to
1:23
install use the npmi command for each
1:26
and every package you can directly
1:28
include this so let me show you you how
1:30
this is really easy so let you can
1:33
simply make a you only need index. HTML
1:37
file you no longer need to create a
1:40
package.json file the standard way of
1:43
installing nodejs modules so you no
1:45
longer need that you just need a single
1:47
index.html file and right here in the
1:50
script tag you just need to type this
1:52
type is equal to module because it's a
1:54
es
1:56
module basically it converts all the
2:00
each and every module that you find on
2:03
npmjs it basically converts it into a
2:06
CDN link it basically gives you a CDN
2:08
link of that
2:10
module so let's suppose we actually
2:13
search for a package here which we take
2:17
an example of exos so it's a HTTP client
2:21
for actually data fetching from a rest
2:23
API it's a very popular package almost
2:25
42 million downloads are there so if you
2:28
want to use this module without having
2:30
to install any npm package you can
2:32
directly include the import statement
2:34
right
2:36
here and we can import xos
2:40
from so this is the way here you need to
2:44
copy this portion https CDN do skypack
2:49
dodev so this portion is common and
2:52
after that you need to
2:54
replace the package name so whatever
2:56
package you are targeting so we'll
2:58
simply say aios so
3:01
now that after writing this line xio's
3:04
library is available to you so you can
3:07
just see I haven't installed any Library
3:10
I haven't actually executed any command
3:14
this is simple index. HTML it runs in
3:16
the browser directly so after that you
3:19
can actually make a simple post request
3:23
or get request
3:33
you can make a request to any third
3:35
party
3:39
API so let me take an example Json
3:53
placeholder so let me just make a simple
3:56
get request using AIO paste it so this
4:00
will actually return the
4:02
promise
4:05
response you need to convert this into
4:08
and then it will have the
4:15
data so if I now try to run this in the
4:18
browser you will actually
4:21
see if I go to inspect
4:25
element is saying response. Json is not
4:28
a function
4:47
I think I made a mistake here let me
4:50
just use chat GPT for this
4:54
exio make a get request to
5:12
okay in xus you no longer need to
5:14
actually convert that into Json it is
5:17
already available
5:22
so so you can actually make a get
5:25
request you will see you're making it
5:27
Json placeholder we getting the data
5:29
response data let me just show
5:32
you if I go to inspect element and if
5:35
you see we got an object right here so
5:37
you can see this is a proof that the
5:40
library is
5:41
working so this is actually a great
5:44
alternative to npmjs we haven't created
5:46
package.json we haven't created node
5:48
modules folder we directly are using
5:52
this
5:53
module so it provides you with the CDN
5:56
link so if you try to open this link in
5:59
the browser it will actually give you
6:01
the actual Library which it is loading
6:04
from that
6:06
CDM you can see that so this CDN is
6:09
provided by Sky pack and basically it
6:11
creates it is fetching this Library
6:14
which is minified so this library is
6:17
optimized and minified so whatever CDN
6:20
links that you are getting from this
6:21
website are truly
6:24
minified and you can re uh use them in
6:27
production applications let's suppose I
6:30
want to use another nodejs module for
6:34
actually fetching the YouTube video
6:36
thumbnails so you can use any third
6:37
party package of you can explore any
6:41
package let's suppose I want to use this
6:44
package which actually fetches the
6:46
thumbnail of a particular YouTube video
6:49
so right here I will once
6:51
again follow the same practice first of
6:54
all this portion is common CDN do sky.
6:59
deev after that paste
7:02
the package
7:05
name so after
7:10
this we will simply
7:13
be pasting the YouTube video link right
7:16
here
7:24
so so you can just console log it
7:32
so if you now check it will actually
7:34
gives you all the links you will see
7:37
that so it is giving me all the links
7:41
right here the default thumbnail high
7:43
resolution thumbnail medium thumbnail
7:46
standard definition thumbnail so all
7:47
these thumbnails are being fetched of
7:49
this particular YouTube video so you can
7:52
just see guys how this is actually the
7:55
power of skypack you no longer need to
7:58
execute those repetitive commands for
8:00
each and every package you need to first
8:02
of all write npmi then npmi you can
8:05
directly include this these links this
8:07
will save you a lot of time and the
8:10
productivity of your work will also
8:12
increase by using Sky pack so for short
8:16
little application something if you are
8:18
developing a single page application
8:19
right in the browser itself you no
8:21
longer need to use node you can directly
8:23
use it a single index to HTML you can
8:26
use any third party node modules that if
8:29
you want to make a application you can
8:32
just visit the website of that module
8:35
simply copy the name and just paste it
8:39
this portion will remain constant and
8:41
after that you need to paste the module
8:43
name and then you can use any module
8:45
that you want to use so one such module
8:48
is low Dash which is a very popular
8:51
module which is used almost 41 million
8:54
downloads are there so in the same way
8:57
you can import this import low Dash
9:11
from so now after you get this uh you
9:15
can use l Das methods right in the
9:18
browser
9:25
itself so there is just chunk method we
9:28
need to divide this array
9:30
so each array will contain two elements
9:32
so if I see the result in the
9:35
browser you will see it has created
9:37
three aray so now the low Dash library
9:40
is perfectly
9:41
working so you can just see I am using
9:44
three different packages at the same
9:46
time without having to actually create
9:49
any package.json file or
9:51
anything so this was a very good website
9:54
or good alternative to npmjs
9:59
the name of the library or website is
10:03
sky. deev so here you can explore each
10:07
and every package and directly use it in
10:09
the
10:10
browser so thank you very much for
10:12
watching this video please hit that like
10:13
button subscribe the channel and I will
10:15
be seeing you in the next video
#Open Source