Hey everybody.
We have our robo friends app now on github and you should be able to put up your robo friends project
on GitHub but here's the thing.
Would it be nice if we can use GitHub pages to actually check out our robo friends app without having
us to clone download npm install just like we've done with simple H2 email projects well with they create
react app.
There's actually a way to do this using GitHub pages.
Now I'll link to this resource so that you can follow step by step.
But let's just go through it and see how easy it is.
I have the project right here.
It says that I need to add a homepage to package that Jason.
So let's do that.
I'm going to copy this and added in our package dad Jason does it matter where it is.
Let's how to write after the name make this a little bit bigger.
I'm going to add my username here and this is the repository name in our case.
What was it.
It was robo friends.
So again use your GitHub username.
And then in here add your get Hub project name next.
If we go through the steps it says that I need to install GitHub pages this package and then added to
by deploy script.
So let's just copy and paste this so if you're using NPM you can do that if you're using your yarn.
This is the command.
So let's install get hub pages
and while that's getting installed let's go back here and it shows here that we need to add these two
lines a pre deploy and deploy in our scripts.
So once again go to our scripts
and then copy and paste this line.
So we have the pre deploy and the deploy.
So the pre deploy runs NPM run build which we know what that does.
It builds our project.
It creates a production version of our project and creates a built folder.
And then the deploy is going to use this GitHub pages so that we just installed and use our built folder.
Let's go back.
All right.
And then finally we had to deploy this site by running NPM run deploy.
So let's do that.
Let me save and then and here do let's clear this.
Do NPM run
which is this script.
And remember the pre deploys going to be run before it.
So if I run this it looks like I have an error in my Jason package.
Let's see.
What am I missing here.
Well I have a comma at the end here which I don't need.
Let's run that again.
You see that the build folder was just created.
It's creating an optimized production built.
That's great and there we have it our project is now published.
Now all we have to do is go back to our repository go to settings and if we scroll all the way down
to get hub pages we have to change the source to get hub pages branch.
Now you might have to wait a couple of minutes or even refresh the page to make sure that the changes
have been applied.
And if all goes well remember we're selecting the github pages branch and I click on this link and I
refresh.
There you go.
Our robo friends app is now live at this U.R.L. so I can just copy this your URL go to my project click
edit and then add our Web site right here so next time anybody comes and checks out our repository they
can just click here to see the live project.
How cool is that.
Nice and simple and just like that we have a production ready app because remember create react app
for us optimizes everything and keeps everything really really tiny for production.
Our JavaScript files while they're minimized they look very small and well nothing like we had before
with containers and components all of that because we use create react app gets optimized for production
congratulations go show off to your friends I'll see in the next one maybe.