hey guys welcome back for cold roll my
name is Alex and in this video I want to
talk about a question that I get asked
very often so people often ask me how do
you go about creating a real-life
project and how do you actually deploy
it to production and what happens when
people start using it so what I want to
do in this video is I want to introduce
you to a project that I’ve been working
on for the past few days if you go to
github.com slash alex 996 slash we add a
fancy spinner so you’re gonna see the
repo for this project if you scroll down
to the readme section you’re gonna see
that it’s actually just an NPM package
that you can install yourself so you
could use NPM or yarn and can also
reference the files directly from one
package now to use it you will import a
spinner that you want to use let’s say
ellipses you would then import the CSS
for that spinner and then you can use it
as a regular react component now there’s
a bunch of examples for different use
cases like if you want to pull in the
files from CDN if you want to set up a
create reactor project or if you want to
use server-side rendering as well
there’s of course a demo that you could
see now what I’ve done is I’ve deployed
this project to github pages so you
could see a demo for every single
component let’s say ellipsis or ring or
ripple you know the other interesting
part is that this project also has a
built by plane so for one thing we have
a Travis CI is set up so every time I
make a commit and I push the code to my
repo it’s going to trigger a pipeline on
Travis CI so this will install all the
dependencies it’s also going to limp the
code using es Lent and it’s also going
to run a few snapshot tests using just
it’s going to generate the coverage for
the test and it’s going to push that
coverage to coveralls which you can see
over here we have a several coverage
reports for different builds so every
build that we have in a Travis CI is
also going to have the Associated
coverage report on coveralls and of
course this wouldn’t be a real project
if you couldn’t install it so if you
were to go to your terminal you could do
something like NPM install react fancy
spinners and of course you could also
use yarn but I already have a demo
locally so I would go to my workspace
react fancy spinners demo and as you can
see it simply created react tabs you’re
gonna find independency listed and
package.json
now if i go to app jas I’ve already
imported a component from that library
in this case it’s going to be
and also had to import the underlying
CSS now I would use that component as a
regular GSX element so now if I go back
to the terminal I’m gonna do yarn start
so now this will start a development
server but you can really see the
spinner so I’m gonna go to app CSS and
I’m gonna change the background color to
just color and then color to background
like this so I’m just gonna flip them if
you go back as you can see we get the
spinner in the middle now the other cool
thing is that this library is also set
up with tree shaking so let’s say I only
want to import one component let’s say
the ellipses I can import that and put
it in JSX and it’s also going to ignore
all the other components as well and as
you can see here we get the ellipses
component now this library is not very
sophisticated there’s only a few
components that you could import and of
course you could develop it much more
you could also accept different types of
properties to the component like let’s
say sizes or you could customize the
color for example but oh no I think it’s
a good example for a demo project we
have a build pipeline we also have code
coverage where do you have pretty decent
documentation describing how you would
go about installing this dependency so
oh no it’s quite an interesting project
and I thought it would walk you guys
through the process of creating
something like this and hopefully this
will give you an idea how you can set up
your own project or library and I think
it’s a very useful skill to be able to
do that yourself so I’m actually going
to delete this project for now so let me
go back to Travis I’m going to disable
it and I’m gonna go to coveralls and I’m
going to do the same thing so let me go
and disable it as well now finally I’ll
go to settings and I’m actually going to
right now that we’ve done that without further ado let’s get into it
name is Alex and in this video I want to
talk about a question that I get asked
very often so people often ask me how do
you go about creating a real-life
project and how do you actually deploy
it to production and what happens when
people start using it so what I want to
do in this video is I want to introduce
you to a project that I’ve been working
on for the past few days if you go to
github.com slash alex 996 slash we add a
fancy spinner so you’re gonna see the
repo for this project if you scroll down
to the readme section you’re gonna see
that it’s actually just an NPM package
that you can install yourself so you
could use NPM or yarn and can also
reference the files directly from one
package now to use it you will import a
spinner that you want to use let’s say
ellipses you would then import the CSS
for that spinner and then you can use it
as a regular react component now there’s
a bunch of examples for different use
cases like if you want to pull in the
files from CDN if you want to set up a
create reactor project or if you want to
use server-side rendering as well
there’s of course a demo that you could
see now what I’ve done is I’ve deployed
this project to github pages so you
could see a demo for every single
component let’s say ellipsis or ring or
ripple you know the other interesting
part is that this project also has a
built by plane so for one thing we have
a Travis CI is set up so every time I
make a commit and I push the code to my
repo it’s going to trigger a pipeline on
Travis CI so this will install all the
dependencies it’s also going to limp the
code using es Lent and it’s also going
to run a few snapshot tests using just
it’s going to generate the coverage for
the test and it’s going to push that
coverage to coveralls which you can see
over here we have a several coverage
reports for different builds so every
build that we have in a Travis CI is
also going to have the Associated
coverage report on coveralls and of
course this wouldn’t be a real project
if you couldn’t install it so if you
were to go to your terminal you could do
something like NPM install react fancy
spinners and of course you could also
use yarn but I already have a demo
locally so I would go to my workspace
react fancy spinners demo and as you can
see it simply created react tabs you’re
gonna find independency listed and
package.json
now if i go to app jas I’ve already
imported a component from that library
in this case it’s going to be
and also had to import the underlying
CSS now I would use that component as a
regular GSX element so now if I go back
to the terminal I’m gonna do yarn start
so now this will start a development
server but you can really see the
spinner so I’m gonna go to app CSS and
I’m gonna change the background color to
just color and then color to background
like this so I’m just gonna flip them if
you go back as you can see we get the
spinner in the middle now the other cool
thing is that this library is also set
up with tree shaking so let’s say I only
want to import one component let’s say
the ellipses I can import that and put
it in JSX and it’s also going to ignore
all the other components as well and as
you can see here we get the ellipses
component now this library is not very
sophisticated there’s only a few
components that you could import and of
course you could develop it much more
you could also accept different types of
properties to the component like let’s
say sizes or you could customize the
color for example but oh no I think it’s
a good example for a demo project we
have a build pipeline we also have code
coverage where do you have pretty decent
documentation describing how you would
go about installing this dependency so
oh no it’s quite an interesting project
and I thought it would walk you guys
through the process of creating
something like this and hopefully this
will give you an idea how you can set up
your own project or library and I think
it’s a very useful skill to be able to
do that yourself so I’m actually going
to delete this project for now so let me
go back to Travis I’m going to disable
it and I’m gonna go to coveralls and I’m
going to do the same thing so let me go
and disable it as well now finally I’ll
go to settings and I’m actually going to
right now that we’ve done that without further ado let’s get into it
Please follow and like us: