All language subtitles for 036 Deploying Our App_en

Now that we've created our card component, our card list component and our search box component, we're

pretty much done with the most of the functionality in this application.

The only thing we're missing is a little bit of styling.

So the first thing we need is to add this title, and I'm just going to add it as an H1 here at the

top of our approach.

Well.

This is Rolodex.

And then we need that font, because you'll see that we don't have this font now, this font we can

get from Google fonts, fonts, Google dotcom.

And we can see all these different fonts that Google allows us to use in our project, so I'm just going

to find the one we want Bigelow rules.

I'm going to hit this little plus.

And Google gives us a link that we can add to our index that HTML inside of our head.

We just add it at the bottom here and now we have access to Bigelow rules in our project.

Now, if we go to aftertax us, I'm going to add a new rule for H1 and I'm going to say font family

is big yellow rule.

I'm also going to set the font size to seventy two pixel and the color.

And now if we look, we'll see that our project has the same font now, which is really awesome because

Google has this great fanservice for us.

So now what we need is the background, the background we're going to put into our index that success.

And this is a file that gets generated by create react.

The reason why they've already added the styling to the body and the code is because Create React app

wants the exact same base styling across all browsers.

So different browsers might run different things, like a different font or a different margin or padding.

So create react app is just trying to equalize that when the project starts by inside of this body,

we're just going to add this linear gradient to our background.

And you can make any gradient you want, I just made this one.

And we'll see.

Our project is finished just like that, we've built a project that has filtering and we understand

now how components are created.

Now that we finished building our website, it's actually not live yet, but we can actually host this

really easily using GitHub pages.

So create React App has made it really easy to use the GitHub page of service.

And GitHub lets us host static websites for free, which is really awesome.

And it's actually really easy.

There's just a couple steps we've got to take.

The first one we've got to do is we have to go to GitHub.

And then we have to make a new repository.

Now I'm going to name my repository Monsters Rolodex after our project.

And then I'm going to copy this key, this S.H. key right here.

I'm going to go to our terminal.

And then I'm going to do two things first, I'm going to connect our actual project to that repository

we just made by doing gett remote, add Oregon.

And then that key we copied next, I'm going to actually include the pages package by doing yarn, add

G.H. pages.

Next, I'm going to go to our package that on file and I'm going to do two things.

The first thing I'm going to do is I'm going to add.

Homepage.

I'm going to actually type in https, dash, dash.

Zeng EOWA, which is the name of my GitHub username, so you're going to use your GitHub username here

and you're going to do GitHub.

And then the name of the project that we made on GitHub, the name of that repository for me, it's

monster's Rolodex, the one we just created.

Then I'm going to add two scripts, the first one is called Pre Deploy.

And in this principle, I'm just going to call Bild because as we remember, our build script builds

all of our reachout into the final code that our browser needs.

And then I'm going to call deploy.

And this one I'm going to say pages Dashty build.

Now, this is going to run pre deploy before it runs deploy, which is really awesome because NAPM and

Yarn both know to run any script that you have pre with before you run the actual script.

So it's going to run pre deploy before it runs deploy and then it's going to serve up.

That's working on a project.

Now we're going to go back to our terminal.

And then we're going to run our new deploy script.

And now we actually see it runs our pre deploy script first, and then we're going to see that it actually

runs our deploy script right after.

Now, this is going to build all of our project files that we need for the final project, and then

we're going to add.

And then we're going to write a common message adding files for GitHub pages.

And now we're going to push this up.

So once this is all pushed up now to our final project repository, we're going to go back to our GitHub

and we're going to refresh right.

And that we should see all our files in here and if we now go to the settings.

And when we scroll down, we want to make sure that the source is actually pointing to GitHub pages

branch, if you're just pointing to M..

Just make sure to set it to GitHub pages branch.

And now if we go to our link.

We see our website is live, it's actually served up this URL, and that's awesome, because GitHub

lets us serve these static websites for free very easily and very quickly.

And you can see how if you wanted to build a quick static website using react, it's really easy to

build it and then serve it using create react app and GitHub pages.

Now, when we actually build our final application, which is a very more dynamic e-commerce website,

we're going to actually use databases and we're going to leverage a lot more code that won't get help,

won't be enough for us to serve.

And I'm going to show you how we're going to take all of these things that we learned building this

application and then expand upon them in that lesson.

So I hope you enjoyed this and look forward to building your first big REAC project.