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 and deployments, as well as manages your websites and web apps.
Resources
Rewrite Rule
/* /index.html 200
Related Content
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[MUSIC]
0:00
You've built your React application and
now you're eager to deploy it and
0:09
showcase it to the world.
0:14
But how do you exactly
go about doing that?
0:15
I'm Laura,
an instructor here at Treehouse.
0:19
In this workshop, I'll guide you
through two ways to deploy and
0:21
host your React application for
free, using Netlify and Vercel.
0:26
Both are excellent options for
deploying your React app.
0:31
I'll demonstrate how to deploy your React
app using their respective websites, and
0:35
also through the terminal using
their command line interface.
0:40
So whether you prefer
a graphical interface or
0:44
want to stick to the command line,
I've got you covered.
0:47
To get started and follow along with me,
you can either download the project files
0:51
for this workshop, or
use your own React app.
0:56
I'll be working with this front-end course
directory app, which utilizes React router
0:59
to allow users to navigate through the app
by clicking on the navigation links.
1:05
I'll guide you through
the process of deploying and
1:10
hosting your React app that's connected
to a version control system like Git.
1:14
Git stands as one of the most widely
used version control systems.
1:19
And when you deploy your app directly from
a Git repository, any changes you make and
1:25
save in your repository are immediately
reflected on your website.
1:30
However, if you are using
the project files or
1:36
your React app doesn't have
a Git repository, don't worry,
1:39
I've included a link in the teachers
notes to the video that will walk
1:44
you through creating a local Git
repository and storing it on GitHub.
1:49
Our first step will be deploying and
hosting your React app with Netlify.
1:54
Netlify is a service that
streamlines the process of building,
2:00
deploying, as well as managing
websites and web apps.
2:04
It's one of the fastest and easiest
deployment solutions available today,
2:08
as you're about to discover.
2:13
The best part, Netlify offers a free plan.
2:15
I'm going to sign up to Netlify
by visiting netlify.com,
2:20
and using my GitHub credentials.
2:24
One of the standout benefits of using
Netlify is a remarkable ease and
2:27
speed with which you can
deploy your project.
2:32
You can literally drag and drop your build
folder into their online application,
2:35
and it will handle the deployment
to a live URL for you.
2:41
But Netlify also provides continuous
deployment from a Git repository,
2:46
which means it can actively
monitor your GitHub repository.
2:51
When you push changes to the master
branch Netlify automatically
2:56
triggers a rebuild of your app and
deploys it.
3:00
This ensures that your
GitHub repository and
3:04
your deployed app are always
perfectly synchronized.
3:07
Now I'll proceed by
selecting import from Git.
3:12
Since my Git repository is connected to
GitHub, I'll choose Deploy with GitHub.
3:15
If it's your first time,
3:22
you might encounter a pop up asking you to
install Netlify on your GitHub account.
3:23
You can choose the permissions
that suit you best, in my case,
3:29
I'll grant Netlify access only to my
course directory Netlify repository,
3:33
and then click Install.
3:39
Now that we've successfully connected
Netlify to our GitHub account,
3:41
we're all set to start
the deployment process.
3:45
I'll go ahead and
select the project I'd like to deploy.
3:49
Netlify will automatically populate
most of the required field, and
3:53
upon inspection,
everything appears to be in order.
3:57
In my case,
I have only one branch named main, and
4:01
the terminal command to build
my project is npm run build.
4:05
This will generate a build or
dist folder, short for distribution,
4:10
containing the optimized and
production ready version of the project.
4:15
The last step to deploy our project
is simply clicking the Deploy button.
4:21
Please note that this step
might take a while, and
4:27
you can monitor the progress in
the production deploy section.
4:30
Once your project is ready,
4:35
a pop up will appear allowing us to
view our React app in the browser.
4:36
I'll click on some navigation links, and
the app appears and works as expected.
4:42
However, there is one
issue we need to address.
4:48
When I refresh the page,
I encounter a 404 error.
4:52
If you're deploying an app that
utilizes a router, like React router,
4:56
it's essential to configure
rewrite rules for your URLs.
5:02
This issue arises because
a server is searching for
5:06
a file under the same path,
but can't find it.
5:10
This happens because React router is
handling the routing behind the scenes,
5:14
and we need to instruct the server how
to handle these requests correctly.
5:19
Netlify makes configuring, redirects, and
rewrite rules for your URLs really easy.
5:25
In your project's public folder, you'll
need to create a file named _redirects.
5:31
Inside this file include
the following rewrite rule.
5:39
You can copy this rule from
the teacher notes with this video.
5:43
I grabbed it from
the Netlify documentation.
5:48
This rule ensures that regardless of
the URL requested by the browser,
5:51
it always serves the index.html file
rather than returning a 404 error.
5:56
Since Netlify is connected
to our Git repository,
6:04
implementing these changes is a breeze.
6:07
To apply these changes,
I'll simply commit them.
6:11
I'll start by adding
the new file to Git with
6:14
a command git add public/_ redirects.
6:19
Next, I'll commit these changes,
6:24
providing a commit message of
add Netlify's rewrite rule.
6:27
Finally, I'll push these changes.
6:34
Let's return to the Netlify website,
we can see a new deployment in progress.
6:37
Once it's published, we can use the same
URL link as before, and refresh the page.
6:43
Now all our URLs work as expected,
and that's all there is to it.
6:50
Netlify also offers a command line
interface, also known as a CLI,
6:56
which allows you to deploy your app
directly from the command line.
7:02
For this demonstration, I'll be using
a project that I haven't deployed yet.
7:09
It's worth noting that this project
already includes Netlify's rewrite
7:15
rule in the public folder.
7:20
First, I'll install
the Netlify CLI by running
7:23
the following command,
npm install netlify-cli-g.
7:28
While the CLI installs,
I'll head over to Netlify documentation.
7:35
The Netlify CLI provides various
methods for deploying your React app,
7:40
and I'll be focusing on
continuous deployment.
7:46
With continuous deployment,
Netlify automatically deploys new versions
7:49
of your site when you push commits
to your connected Git repository.
7:55
Since my React app's repository
is stored on GitHub,
7:59
I'll use the command netlify init to
set up the automated configuration.
8:03
If your React app isn't
linked to a Git repository,
8:09
you can refer to Netlify's manual
deployment documentation and
8:12
I'll include a link to this documentation
in the teacher's notes below.
8:16
Let's get started by running the Netlify
init command in the command line and
8:22
following the prompts.
8:27
You may get a browser window that pops up
requesting you to log into Netlify and
8:30
grant access to the Netlify CLI.
8:35
Go ahead and click Authorize to proceed.
8:39
Now that I'm authorized, I can follow
the command line prompts to deploy my app.
8:42
The initial prompt asks us
what we would like to do.
8:47
Since this project hasn't
been deployed yet,
8:51
I'll choose create and
configure a new site.
8:54
It's asking to select the team,
8:57
I'll simply select a default
option by pressing Enter.
8:59
We can now enter a site name,
but I'll just leave it blank.
9:04
Great, our URL for
our React app has been generated.
9:08
If this is your first time, it will
request access to your GitHub account.
9:13
I'll choose authorize with
GitHub through app.nullify.com,
9:17
which opens a pop-up to link our
Netlify account to our GitHub account.
9:22
I'll complete this.
9:28
Now we're getting to the part to configure
the deployment of our React app.
9:30
The default build command is accurate,
so I'll press Enter to confirm it.
9:35
Likewise, the default directory for
deployment is correct, so
9:40
I'll press Enter again.
9:43
I'll also stick with the default
settings for the next prompt.
9:46
We're all set, and
a success message confirms the setup.
9:50
From now on, whenever we commit changes,
9:54
Netlify will automatically
update our site.
9:57
It's telling us that we should run
Git push to trigger a new site build.
10:01
So let's do that.
10:06
With this done,
we can now view our app in the browser.
10:09
To open Netlify's admin URL
on the Netlify website,
10:13
simply run the command netlify open.
10:17
However, if you wish to open
our deployed react site,
10:21
you can use the command netlify open:site.
10:26
This action will launch our React app in
the browser, and we can readily share
10:30
this URL link with anyone allowing
them to interact with our React app.
10:36
Up next, I'll guide you through
the process of deploying and
10:41
hosting your React app on Versal.
10:45
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up