All right.

Now, I'm going to teach you how to deploy and host your React app with Netlify.

Netlify is a service that automates builds, deployments,

and manages your websites and web apps.

It's one of the fastest and

easiest deployment solutions these days as you're about to learn.

Again, if you're following along with the course directory app,

I recommend starting with a version that you've not deployed yet

with GitHub pages or now, to prevent any possible issues.

I'll start by creating a build of my app by running, npm run build.

Netlify offers a free plan.

So I'm going to login to Netlify at netlify.com using my GitHub credentials.

And one of the benefits of using Netlify is that they make it so

quick and easy that you can literally drag and

drop your build folder into their online app, and it will deploy to a live URL.

There it is, live online.

Netlify also provides a command line interface that lets you deploy

your app straight from the command line.

That's what I'm going to do now.

So first, I'll install the CLI with npm install netlify-cli -g.

Now I'm ready to deploy it.

To deploy the app, make sure that you're in your project folder and

run the command, netlify deploy.

You might get a browser window that pops up like this.

This is simply asking you to login with Netlify and

grant access to the Netlify CLI.

I'll click, Authorize.

Now that I'm authorized, I can follow the command line prompts to deploy my app.

In the console, it says that this folder isn't linked to a site yet.

What would you like to do?

It wants to know if I want to link this directory to an existing site or

create and then configure a new site.

Since this is a new site, I'll use my arrow keys to select,

create and configure a new site.

Then it gives you the option to give your site a name.

I'll type, course directory and hit, Enter.

I'll select my account, and next, as the deploy path, you need to specify

your project's build directory which contains aesthetic assets for deployment.

This is going to create the site and deploy it to a draft URL first,

which you can view at the provided URL.

The draft URL is like a staging environment for previewing and

testing your app.

Let's have a look.

The app looks good.

Back in the console it says that,

if everything looks good on your draft URL, take it live with the prod flag.

So to make the app live, I'll run the command shown here, netlify deploy --prod.

It asks you one more time to specify the deploy path for

the live build which again is my build folder.

And now in the console output, I get two URLs.

A Unique Deploy URL which represents the unique URL for

each individual deployment and

a Live URL which always displays your latest deployment.

So each time you update your site and deploy it with Netlify deploy,

you're going to get a unique URL for that deployment.

So if you deploy your app multiple times, you will have multiple unique URLs so

that you can point users to specific versions of your app.

But the live URL always displays your latest changes at the same URL.

You can simply refresh the URL to view the changes instead of having

to open a new unique URL.

And what's great is that Netlify automatically secures your

site over HTTPS at no cost.

If you're publishing an app that uses a router that leverages the History API and

pushState like React Router does, you'll need to configure redirects and

rewrite rules for your URLs.

Because notice how when I click to change the URL and refresh the browser,

I get a 404 page.

The server is looking for a file to load under this same path in the build and

can't find it, because again, React Router is

managing all of this behind the scenes with the History API and pushState.

So Netlify makes configuring redirects and rewrite rules for your URLs really easy.

When you want history pushState to work and display clean URLs,

you'll need to add a file inside the built folder of your app named, _redirects.

Inside the file, include the following rewrite rule.

You can copy this rule from the teacher's note with this video.

I grabbed it from the Netlify docs.

So this is always going to serve the index.html file instead

of giving a 404, no matter what URL the browser requests.

So now, to view the latest changes in the live URL,

I need to deploy the app with netlify deploy.

Again, I'll specify build as the deploy path.

I'll click on the Live Draft URL to preview the site.

Click on a few navigation links.

Refresh the app.

And I'm no longer getting the 404 page, good.

So the site looks good.

To take it live, I'll write the netlify deploy --prod command.

Once again, specified build as the deploy path and

let's refresh the live URL.

Click on a link, refresh, and now, all my URLs work as expected, great.

Right, so that's all there is to it.

Over on netrefied.com, you can see your deployed site settings.

And here you can do things like set up a custom domain or

connect a site to a GitHub repository.

Netlify offers continuous deployment from a Git repository, so it can, for

example, monitor your GitHub repo.

And when you push a change to the master branch,

Netlify automatically rebuilds your app and deploys it for you,

always keeping your GitHub repository and app in sync.

You can read and

learn more about Netlify features in the teacher's notes with this video.

All right, so I hope that you learned a few quick and

useful ways to deploy your React apps.

And the tools and methods you use are really up to you and your team.

Also, the way all these tools work can change from version to version.

So be sure to read the teacher's notes for up to date information.

Thanks everyone, and happy deploying.