Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Deploy and host your React app with Netlify, a powerful service that automates builds, deployments, and manages your websites and web apps.
Resources
Rewrite Rule
/* /index.html 200
All right.
0:00
Now, I'm going to teach you how to deploy
and host your React app with Netlify.
0:00
Netlify is a service that
automates builds, deployments,
0:04
and manages your websites and web apps.
0:08
It's one of the fastest and
0:10
easiest deployment solutions these
days as you're about to learn.
0:11
Again, if you're following along
with the course directory app,
0:15
I recommend starting with a version
that you've not deployed yet
0:18
with GitHub pages or now,
to prevent any possible issues.
0:21
I'll start by creating a build of
my app by running, npm run build.
0:24
Netlify offers a free plan.
0:31
So I'm going to login to Netlify at
netlify.com using my GitHub credentials.
0:32
And one of the benefits of using
Netlify is that they make it so
0:37
quick and
easy that you can literally drag and
0:41
drop your build folder into their online
app, and it will deploy to a live URL.
0:45
There it is, live online.
0:51
Netlify also provides a command
line interface that lets you deploy
0:56
your app straight from the command line.
1:00
That's what I'm going to do now.
1:02
So first, I'll install the CLI
with npm install netlify-cli -g.
1:03
Now I'm ready to deploy it.
1:14
To deploy the app, make sure that
you're in your project folder and
1:15
run the command, netlify deploy.
1:21
You might get a browser window
that pops up like this.
1:24
This is simply asking you
to login with Netlify and
1:27
grant access to the Netlify CLI.
1:30
I'll click, Authorize.
1:32
Now that I'm authorized, I can follow
the command line prompts to deploy my app.
1:34
In the console, it says that this
folder isn't linked to a site yet.
1:39
What would you like to do?
1:43
It wants to know if I want to link
this directory to an existing site or
1:45
create and then configure a new site.
1:49
Since this is a new site,
I'll use my arrow keys to select,
1:51
create and configure a new site.
1:56
Then it gives you the option
to give your site a name.
1:58
I'll type, course directory and
hit, Enter.
2:01
I'll select my account, and next,
as the deploy path, you need to specify
2:05
your project's build directory which
contains aesthetic assets for deployment.
2:11
This is going to create the site and
deploy it to a draft URL first,
2:18
which you can view at the provided URL.
2:23
The draft URL is like a staging
environment for previewing and
2:26
testing your app.
2:29
Let's have a look.
2:30
The app looks good.
2:35
Back in the console it says that,
2:36
if everything looks good on your draft
URL, take it live with the prod flag.
2:38
So to make the app live, I'll run the
command shown here, netlify deploy --prod.
2:44
It asks you one more time to
specify the deploy path for
2:51
the live build which
again is my build folder.
2:56
And now in the console output,
I get two URLs.
3:01
A Unique Deploy URL which
represents the unique URL for
3:05
each individual deployment and
3:10
a Live URL which always displays
your latest deployment.
3:13
So each time you update your site and
deploy it with Netlify deploy,
3:19
you're going to get a unique URL for
that deployment.
3:24
So if you deploy your app multiple times,
you will have multiple unique URLs so
3:28
that you can point users to
specific versions of your app.
3:32
But the live URL always displays
your latest changes at the same URL.
3:35
You can simply refresh the URL to
view the changes instead of having
3:41
to open a new unique URL.
3:46
And what's great is that Netlify
automatically secures your
3:48
site over HTTPS at no cost.
3:53
If you're publishing an app that uses a
router that leverages the History API and
3:55
pushState like React Router does,
you'll need to configure redirects and
4:00
rewrite rules for your URLs.
4:04
Because notice how when I click to
change the URL and refresh the browser,
4:06
I get a 404 page.
4:10
The server is looking for a file to load
under this same path in the build and
4:12
can't find it, because again,
React Router is
4:16
managing all of this behind the scenes
with the History API and pushState.
4:19
So Netlify makes configuring redirects and
rewrite rules for your URLs really easy.
4:23
When you want history pushState
to work and display clean URLs,
4:28
you'll need to add a file inside the built
folder of your app named, _redirects.
4:34
Inside the file,
include the following rewrite rule.
4:42
You can copy this rule from
the teacher's note with this video.
4:46
I grabbed it from the Netlify docs.
4:49
So this is always going to serve
the index.html file instead
4:51
of giving a 404,
no matter what URL the browser requests.
4:56
So now, to view the latest
changes in the live URL,
5:00
I need to deploy the app
with netlify deploy.
5:06
Again, I'll specify build
as the deploy path.
5:10
I'll click on the Live Draft URL
to preview the site.
5:14
Click on a few navigation links.
5:19
Refresh the app.
5:22
And I'm no longer getting the 404 page,
good.
5:24
So the site looks good.
5:29
To take it live, I'll write
the netlify deploy --prod command.
5:31
Once again,
specified build as the deploy path and
5:38
let's refresh the live URL.
5:44
Click on a link, refresh, and now,
all my URLs work as expected, great.
5:47
Right, so that's all there is to it.
5:54
Over on netrefied.com,
you can see your deployed site settings.
5:58
And here you can do things
like set up a custom domain or
6:03
connect a site to a GitHub repository.
6:07
Netlify offers continuous deployment
from a Git repository, so it can, for
6:10
example, monitor your GitHub repo.
6:15
And when you push a change
to the master branch,
6:17
Netlify automatically rebuilds
your app and deploys it for you,
6:20
always keeping your GitHub repository and
app in sync.
6:24
You can read and
6:27
learn more about Netlify features in
the teacher's notes with this video.
6:27
All right, so
I hope that you learned a few quick and
6:30
useful ways to deploy your React apps.
6:33
And the tools and methods you use
are really up to you and your team.
6:35
Also, the way all these tools work
can change from version to version.
6:39
So be sure to read the teacher's notes for
up to date information.
6:42
Thanks everyone, and happy deploying.
6:45
You need to sign up for Treehouse in order to download course files.
Sign up