right so a few videos back we’ll set up
story book with our project but we never
actually got to deploy it and in this
episode let’s fix that now if you look
at the build folder of story book so
this is the folder that you’re gonna get
if you run a story book call and build
it’s basically a handful of static files
so index.html the iframe where we serve
our components a bunch of javascript a
favicon and a manifest file and that’s
basically it it’s just a bunch of static
files and if these are static files it
means that we can deploy them to a
static host for example github pages so
it’s a free host connected to github and
there’s in fact a handful package called
gh-pages on NPM and we can use it to
deploy to github pages very easily so
once we install it we can actually use
it from the CLI so we can call gh-pages
– d and passing in the name of the
directory that we want to deploy so in
this example everything in the disk
directory is gonna be deployed to the
static host in our use case we’re gonna
need to deploy everything in storybook
static directory so let me switch back
to the terminal
I’m gonna do an install of gh-pages and
once it finishes let’s go back to our
package JSON so in here I’m going to add
a new script I’m gonna call it deploy
and we’re gonna invoke gh-pages passing
in the – d option and we’re gonna point
to storybook – static not before that
command is run we also want to make sure
that the folder actually exists because
for example I could delete it myself and
if I run this command right now it’s
going to fail because this folder
doesn’t exist yet so we can add a script
similar to how we added pre build when
we wanted to clean up the dist directory
we could also add a pre deploy and so
before we deploy I want to make sure to
run npm run storybook callin build so
this pre script is going to first invoke
storybook build it’s gonna build the
storybook static folder with all the
assets and then after that the deploy
command will take over so let’s switch
back to the terminal and let’s try NPM
run deploy so it’s gonna build up these
static assets and it’s gonna be
deploying them in a second alright so if
everything is successful you’re gonna
see published at the end and now we can
switch back to a repo if i refresh
you’re gonna see a new tab pop up it’s
called environment so if you click on it
we’re gonna see that there’s been a
employment so if we click on view
deployment you can see that this URL is
now Alex nine and six dot github io /
react CSS spinners you know the cool
thing about github pages is you can
deploy multiple repositories that you
haven’t github to that service so in
this case we deployed react CSS spinners
but if you want to create another
project you can also deploy it on a
separate URL alright so looks like it
worked fine so we have all the three
spinners so I’m just gonna do a git
status so let me do ad package lock and
then I’ll – get a – P so we’ll add a few
scripts and then github pages so let’s
do a commit now – deploy script – github
pages and let’s push it in fact I’m
actually going to go back to the browser
let me copy the URL and if I switch back
I’m gonna go to home page and I’ll
change it from the github repo to the
URL of the project so even though we
pushed I’ll go back let me add it again
so I’ll do a git commit dash – amend – –
no edit and I’ll do a git push – right
so as a disclaimer this isn’t something
you would do on the master branch like
you wouldn’t do a git push – F because
it can potentially overwrite files but
it’s a very small change so I don’t
think it’s gonna do much harm right so
from there we can create our first
release so let me go back to the
terminal let me just make sure there’s
no changes so I’m gonna do get tagged
version 1.0.0 now this one of course
will match the version in package.json
and it’s gonna be this one specified as
version obviously so this way we can go
back and let’s tag it so now if you do
get tagged you’re gonna see one that’s
gonna be our first release so let’s do
get pushed – – tags so that’s gonna
create a new tag if you refresh this
page you’re gonna see a new release so
what we can do from there is we can add
a few release notes so I’ll pick the
existing tag this one version 1.0.0 we
can also add a description first release
tada and we can preview it all right so
let’s publish it and so this is our
first release and now from there we can
actually publish it on NPM now the first
thing you would need to do is you would
need to sign up at NPM JSE org and once
you do you’re gonna be able to see all
your packages I don’t have any at the
moment but if I switch back to the
terminal once again on your computer the
first thing you would need to do is you
need to issue a command known as NPM
adduser it also has an alias
of NPM login but either way it’s going
to ask you a few basic questions like
your username email and name and once
you complete this step it’s going to
create an NPM RC file in your home
directory and this one is gonna contain
a secret auth token that you’re gonna
use to publish to NPM but once that’s
done you’re gonna be able to do NPM
publish so once again you can verify the
package.json file in fact it’s good that
I came back because we need a new
section here so there’s a few things we
can do so we can either create a file
called NPM ignore and this is where
we’re gonna list all the files or
directories
that we want to ignore so for example we
might want to ignore let’s say marks
dist we might also want to ignore
examples and in fact is what if you file
so we want to blacklist from being
published to NPM now if you don’t create
this file what’s gonna happen is that
NPM is going to default to get ignore
and if get ignore doesn’t suffice so if
there’s so many different files that we
want to ignore it might be easier to
whitelist the files and folders that you
do want to be published to NPM so in
this case we want to publish the dist
folder
besides the dist folder and PM is also
going to include the package.json file
itself the license file and also the you
read me and actually there’s a few other
files that it might include so as you
can see certain files will be included
regardless of these settings so let’s
say the package.json file as I said the
readme the license file as well as the
changelog and also the notice file if
any of those exist so once again in this
case we’re going to be publishing the
disk folder and then the last thing I’m
going to do is I’m going to add a pre
publish script in this case before we
publish we want to run npm run build so
we want to regenerate the build just in
case the files have changed since the
last commit and I think with that it
should be good to go so now if we go
back to the terminal it should be safe
to do npm publish so let’s write so
it’ll create the build for us and then
publish it to NPM so now if you do NTM
info react CSS spinners it’s gonna tell
us that it’s been published just now by
Alex nine and six so if I go back to NPM
if i refresh here’s the package and now
we also get a few links like the home
page there’s also a link to the github
repo and now we can actually see the
versions so there’s one which is 1.0.0
now let’s actually go back to the
terminal and let’s try it out and I’ll
switch to sandbox so let’s do npx create
react
and I’ll call it react CSS spinners demo
so let’s go in there I’m going to add a
dependency of react CSS spinners so once
again like I did before I’m gonna go to
app CSS I’m going to switch the colors
for contrast let’s go to app Reyes let’s
import our spinners so let’s – from
react CSS spinners so we’re gonna be
importing ellipses let’s do ring and
let’s do ripple
we’re gonna output all of them so let me
just copy the names alright I’m just
gonna wrap them in tags like that
so if I go back I’ll do yarn start and
let’s see if this works so as you can
see we get all the three spinners so the
release was successful in the end now if
you do an LS on the node modules react
CSS spinners you’re gonna see that we
only get the dist folder as well as the
license file package.json of course and
also that you read me so because of the
files feel that we specified we only get
those three files and the dist directory
which by the way contains all the builds
the common json’ the ESM one and also
the UMD one now the other cool thing is
that if we now go to unpackage we should
be able to know the react CSS spinners
and as you can see this one defaults to
version 1 / dist / bundle command j
areas and it defaults to this file
because this is the file that is
specified as the entry point for the
main field and package.json so in fact
what you could do for a website is you
can put in dot um DJ s and this will
give you the UMD bundle so you could
take this URL and use it as a CDN and
this way you could use it on any website
without any build setup in fact we
already have an example for it in the
CDN folder instead of pointing to node
modules we can now point to the
unpackage URL instead and so the last
thing that i’m going to do is i’m going
to update the readme file and in fact we
can actually preview it so i’ll go back
to github if I were to edit the Yui me
we could paste it in and preview the
changes so it looks pretty good to me
so now I’m also going to add a section
for installation one for usage and
perhaps one for copyright and by the way
feel free to skip this section because
there’s not much interesting in it so
let me add a quick shell script section
now for in package I’ll add some HTML so
this will be a script tag
for the source we’re gonna reference on
package and we can reference this URL in
fact I think we can also reference the
latest tag let’s see if this works and
this one is going to redirect to the
latest one and as case 1.0.0 because
that’s the only one instead of
hard-coding the version I’ll just put
latest and this is what’s known as a
disk tag so every project will have the
latest disk tag and this one is just an
alias to the latest version and now for
usage I’ll add some JavaScript so you
could import ellipses from react and CSS
spinners in fact I’ll add a link to the
demo so I’ll use the home page so no
there’s actually tools that allow you to
write markdown much quicker but I prefer
the row approach alright so let’s see if
we can add an attribution so we’re gonna
do something like this I’m thinking so
let’s say CSS spinners from loading io
hopefully that’ll suffice again I don’t
think this is mandatory but let’s give
credit where credit is due so now looks
like this file is being updated by
prettier and it’s also adding the
semicolon and using the double quotes
that’s not a big deal of course but I’m
actually going to just ignore markdown
files so this way I can go back and
change it to the way I want it to be oh
and also let’s add a few examples so
there’s one for CDN let’s add one for
create react app and one for server-side
rendering so we can actually reference
the existing directories all right so
let’s copy and preview it so I’ll go and
try to edit so that looks good to me so
I’m gonna commit it and that should be
it so let’s do get status get update
with me and now push and we should be
good to go alright so that’s basically
it for now so I’m gonna stop here for
the time being of course there’s a lot
more that can be done with this library
right now we only have dummy components
they don’t really accept any props and
it would be useful to customize the
color of our spinners also customize
things like the font size for example
because right now it’s all fixed and
hard-coded so we can definitely do
something like that perhaps add a few
props to the components also add the
prop types we would also have to then
remove it for certain builds and perhaps
you could also add a changelog down the
road but for the time being like I said
that’s pretty much it for this project
so once again we have a nice demo of the
spinners we
have a deployment process with a built
pipeline on Java CI we have a code
coverage and of course the project is
also published to NPM so that’s pretty
neat so let me know what you guys think
I can definitely go back to this series
and perhaps add more interesting things
to the library but for the time being
I’m signing off so that’s been Alex said
cold rel and I’m gonna see you next time thanks for watching
story book with our project but we never
actually got to deploy it and in this
episode let’s fix that now if you look
at the build folder of story book so
this is the folder that you’re gonna get
if you run a story book call and build
it’s basically a handful of static files
so index.html the iframe where we serve
our components a bunch of javascript a
favicon and a manifest file and that’s
basically it it’s just a bunch of static
files and if these are static files it
means that we can deploy them to a
static host for example github pages so
it’s a free host connected to github and
there’s in fact a handful package called
gh-pages on NPM and we can use it to
deploy to github pages very easily so
once we install it we can actually use
it from the CLI so we can call gh-pages
– d and passing in the name of the
directory that we want to deploy so in
this example everything in the disk
directory is gonna be deployed to the
static host in our use case we’re gonna
need to deploy everything in storybook
static directory so let me switch back
to the terminal
I’m gonna do an install of gh-pages and
once it finishes let’s go back to our
package JSON so in here I’m going to add
a new script I’m gonna call it deploy
and we’re gonna invoke gh-pages passing
in the – d option and we’re gonna point
to storybook – static not before that
command is run we also want to make sure
that the folder actually exists because
for example I could delete it myself and
if I run this command right now it’s
going to fail because this folder
doesn’t exist yet so we can add a script
similar to how we added pre build when
we wanted to clean up the dist directory
we could also add a pre deploy and so
before we deploy I want to make sure to
run npm run storybook callin build so
this pre script is going to first invoke
storybook build it’s gonna build the
storybook static folder with all the
assets and then after that the deploy
command will take over so let’s switch
back to the terminal and let’s try NPM
run deploy so it’s gonna build up these
static assets and it’s gonna be
deploying them in a second alright so if
everything is successful you’re gonna
see published at the end and now we can
switch back to a repo if i refresh
you’re gonna see a new tab pop up it’s
called environment so if you click on it
we’re gonna see that there’s been a
employment so if we click on view
deployment you can see that this URL is
now Alex nine and six dot github io /
react CSS spinners you know the cool
thing about github pages is you can
deploy multiple repositories that you
haven’t github to that service so in
this case we deployed react CSS spinners
but if you want to create another
project you can also deploy it on a
separate URL alright so looks like it
worked fine so we have all the three
spinners so I’m just gonna do a git
status so let me do ad package lock and
then I’ll – get a – P so we’ll add a few
scripts and then github pages so let’s
do a commit now – deploy script – github
pages and let’s push it in fact I’m
actually going to go back to the browser
let me copy the URL and if I switch back
I’m gonna go to home page and I’ll
change it from the github repo to the
URL of the project so even though we
pushed I’ll go back let me add it again
so I’ll do a git commit dash – amend – –
no edit and I’ll do a git push – right
so as a disclaimer this isn’t something
you would do on the master branch like
you wouldn’t do a git push – F because
it can potentially overwrite files but
it’s a very small change so I don’t
think it’s gonna do much harm right so
from there we can create our first
release so let me go back to the
terminal let me just make sure there’s
no changes so I’m gonna do get tagged
version 1.0.0 now this one of course
will match the version in package.json
and it’s gonna be this one specified as
version obviously so this way we can go
back and let’s tag it so now if you do
get tagged you’re gonna see one that’s
gonna be our first release so let’s do
get pushed – – tags so that’s gonna
create a new tag if you refresh this
page you’re gonna see a new release so
what we can do from there is we can add
a few release notes so I’ll pick the
existing tag this one version 1.0.0 we
can also add a description first release
tada and we can preview it all right so
let’s publish it and so this is our
first release and now from there we can
actually publish it on NPM now the first
thing you would need to do is you would
need to sign up at NPM JSE org and once
you do you’re gonna be able to see all
your packages I don’t have any at the
moment but if I switch back to the
terminal once again on your computer the
first thing you would need to do is you
need to issue a command known as NPM
adduser it also has an alias
of NPM login but either way it’s going
to ask you a few basic questions like
your username email and name and once
you complete this step it’s going to
create an NPM RC file in your home
directory and this one is gonna contain
a secret auth token that you’re gonna
use to publish to NPM but once that’s
done you’re gonna be able to do NPM
publish so once again you can verify the
package.json file in fact it’s good that
I came back because we need a new
section here so there’s a few things we
can do so we can either create a file
called NPM ignore and this is where
we’re gonna list all the files or
directories
that we want to ignore so for example we
might want to ignore let’s say marks
dist we might also want to ignore
examples and in fact is what if you file
so we want to blacklist from being
published to NPM now if you don’t create
this file what’s gonna happen is that
NPM is going to default to get ignore
and if get ignore doesn’t suffice so if
there’s so many different files that we
want to ignore it might be easier to
whitelist the files and folders that you
do want to be published to NPM so in
this case we want to publish the dist
folder
besides the dist folder and PM is also
going to include the package.json file
itself the license file and also the you
read me and actually there’s a few other
files that it might include so as you
can see certain files will be included
regardless of these settings so let’s
say the package.json file as I said the
readme the license file as well as the
changelog and also the notice file if
any of those exist so once again in this
case we’re going to be publishing the
disk folder and then the last thing I’m
going to do is I’m going to add a pre
publish script in this case before we
publish we want to run npm run build so
we want to regenerate the build just in
case the files have changed since the
last commit and I think with that it
should be good to go so now if we go
back to the terminal it should be safe
to do npm publish so let’s write so
it’ll create the build for us and then
publish it to NPM so now if you do NTM
info react CSS spinners it’s gonna tell
us that it’s been published just now by
Alex nine and six so if I go back to NPM
if i refresh here’s the package and now
we also get a few links like the home
page there’s also a link to the github
repo and now we can actually see the
versions so there’s one which is 1.0.0
now let’s actually go back to the
terminal and let’s try it out and I’ll
switch to sandbox so let’s do npx create
react
and I’ll call it react CSS spinners demo
so let’s go in there I’m going to add a
dependency of react CSS spinners so once
again like I did before I’m gonna go to
app CSS I’m going to switch the colors
for contrast let’s go to app Reyes let’s
import our spinners so let’s – from
react CSS spinners so we’re gonna be
importing ellipses let’s do ring and
let’s do ripple
we’re gonna output all of them so let me
just copy the names alright I’m just
gonna wrap them in tags like that
so if I go back I’ll do yarn start and
let’s see if this works so as you can
see we get all the three spinners so the
release was successful in the end now if
you do an LS on the node modules react
CSS spinners you’re gonna see that we
only get the dist folder as well as the
license file package.json of course and
also that you read me so because of the
files feel that we specified we only get
those three files and the dist directory
which by the way contains all the builds
the common json’ the ESM one and also
the UMD one now the other cool thing is
that if we now go to unpackage we should
be able to know the react CSS spinners
and as you can see this one defaults to
version 1 / dist / bundle command j
areas and it defaults to this file
because this is the file that is
specified as the entry point for the
main field and package.json so in fact
what you could do for a website is you
can put in dot um DJ s and this will
give you the UMD bundle so you could
take this URL and use it as a CDN and
this way you could use it on any website
without any build setup in fact we
already have an example for it in the
CDN folder instead of pointing to node
modules we can now point to the
unpackage URL instead and so the last
thing that i’m going to do is i’m going
to update the readme file and in fact we
can actually preview it so i’ll go back
to github if I were to edit the Yui me
we could paste it in and preview the
changes so it looks pretty good to me
so now I’m also going to add a section
for installation one for usage and
perhaps one for copyright and by the way
feel free to skip this section because
there’s not much interesting in it so
let me add a quick shell script section
now for in package I’ll add some HTML so
this will be a script tag
for the source we’re gonna reference on
package and we can reference this URL in
fact I think we can also reference the
latest tag let’s see if this works and
this one is going to redirect to the
latest one and as case 1.0.0 because
that’s the only one instead of
hard-coding the version I’ll just put
latest and this is what’s known as a
disk tag so every project will have the
latest disk tag and this one is just an
alias to the latest version and now for
usage I’ll add some JavaScript so you
could import ellipses from react and CSS
spinners in fact I’ll add a link to the
demo so I’ll use the home page so no
there’s actually tools that allow you to
write markdown much quicker but I prefer
the row approach alright so let’s see if
we can add an attribution so we’re gonna
do something like this I’m thinking so
let’s say CSS spinners from loading io
hopefully that’ll suffice again I don’t
think this is mandatory but let’s give
credit where credit is due so now looks
like this file is being updated by
prettier and it’s also adding the
semicolon and using the double quotes
that’s not a big deal of course but I’m
actually going to just ignore markdown
files so this way I can go back and
change it to the way I want it to be oh
and also let’s add a few examples so
there’s one for CDN let’s add one for
create react app and one for server-side
rendering so we can actually reference
the existing directories all right so
let’s copy and preview it so I’ll go and
try to edit so that looks good to me so
I’m gonna commit it and that should be
it so let’s do get status get update
with me and now push and we should be
good to go alright so that’s basically
it for now so I’m gonna stop here for
the time being of course there’s a lot
more that can be done with this library
right now we only have dummy components
they don’t really accept any props and
it would be useful to customize the
color of our spinners also customize
things like the font size for example
because right now it’s all fixed and
hard-coded so we can definitely do
something like that perhaps add a few
props to the components also add the
prop types we would also have to then
remove it for certain builds and perhaps
you could also add a changelog down the
road but for the time being like I said
that’s pretty much it for this project
so once again we have a nice demo of the
spinners we
have a deployment process with a built
pipeline on Java CI we have a code
coverage and of course the project is
also published to NPM so that’s pretty
neat so let me know what you guys think
I can definitely go back to this series
and perhaps add more interesting things
to the library but for the time being
I’m signing off so that’s been Alex said
cold rel and I’m gonna see you next time thanks for watching
Please follow and like us: