Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Deploying a React App!
You have completed Deploying a React App!
Preview
Learn to deploy your React app on Vercel effortlessly! Vercel simplifies the process, making it easy to get your project live.
Resources
Rewrite Rule
{
"rewrites": [
{
"source": "/(.*)",
"destination": "/"
}
]
}
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
In this video, we'll go over how to
deploy our React apps with Vercel.
0:00
Vercel is a cloud platform designed for
0:05
rapidly deploying web applications and
websites.
0:08
It also has a strong connection
to the development and
0:12
maintenance of various
open-source tools and projects,
0:17
including Next.js and
HyperTerminal among others.
0:22
With Vercel,
0:26
you have the flexibility to deploy your
projects using four distinct methods.
0:27
Directly on their website by connecting
to a Git Repository via their command
0:33
line interface by leveraging Deploy hooks,
and the Vercel REST API.
0:40
In this video,
we'll cover deploying your projects using
0:46
Vercel's website and the Vercel CLI.
0:51
To get started, I recommend signing up for
a free account at vercel.com/home.
0:54
You can even sign up using
your GitHub account making
1:01
the process even more convenient.
1:06
For this video, I'll be using a project
called Course-Directory-Vercel
1:09
that has yet to be deployed, neither with
Netlify or any other deployment tool.
1:15
I suggest you do the same to ensure
a smooth deployment process minimizing
1:21
the potential for errors or
conflicts in the deployment configuration.
1:26
The first step is to import
our project by importing
1:31
a repository from our GitHub account.
1:36
You can search through your
entire Git Repository for
1:39
the specific project you intend to deploy,
in my case,
1:42
I'll select my course
directory Vercel repository.
1:46
While you have the option to modify
the project's name and other fields,
1:50
Vercel does a great job at automatically
detecting the framework and
1:55
build commands.
2:00
All of this information appears
to be correct in my case.
2:01
Since my project doesn't involve
any environment variables,
2:05
I'll leave this section empty.
2:10
The final step is simply
to click the deploy button.
2:12
Here we can monitor
the deployment process, and
2:16
once complete,
we get this fun Congratulations page.
2:20
To open your React app in the browser,
just click on the image.
2:25
I'm able to navigate to each tab,
but as soon as I refresh the page,
2:30
we get the issue similar to what
we encountered with Netlify,
2:36
a 404 Not-Found error.
2:41
Let me show you how to resolve this issue.
2:43
To implement Vercel's rewrite rule,
2:46
we need to create a file in our
root directory called vercel.json.
2:49
This configuration file
empowers us to customize and
2:55
override Vercel's default behavior.
2:59
Inside the file,
include the following rewrite rule.
3:02
You can copy this rule from
the teacher's notes with this video.
3:07
Essentially, this configuration is saying,
for any incoming URL request,
3:11
regardless of its path,
redirect it to the root path.
3:18
This ensures that even if users navigate
to different routes within the single-page
3:22
application, the server will
consistently serve the root HTML file.
3:28
Then client-side routing
will take over displaying
3:33
the appropriate content based on the URL.
3:38
Since we deployed our app by
importing our Git Repository,
3:41
implementing these changes
to our site is a breeze.
3:46
All we need to do is commit and push the
changes and Vercel will handle the rest.
3:50
To add a new file to Git,
use the command git add vercel.json.
3:55
Next, commit these changes
with a commit message,
4:03
such as Add Vercels' rewrite rule.
4:07
Finally, complete the process
by pushing these changes.
4:11
Back to our project dashboard on Vercel.
4:16
We see that a new deployment
was created just now.
4:19
You'll also find two important links,
deployment and domains.
4:24
The deployment URL displays your React
app for this specific deployment.
4:30
It's important to note that if
you make any changes to your app,
4:36
this URL will not reflect those changes.
4:41
On the other hand,
the domains link consistently showcases
4:44
the most up-to-date
version of your React app.
4:49
So when sharing your React app
with others, I recommend using
4:53
the domains URL to ensure they always
have access to the latest version.
4:58
I'll click on the domains URL,
now if I navigate to the teacher's tab and
5:04
refresh the page, you'll notice that we no
longer encounter a 404 error, fantastic.
5:10
All right let's now explore how to use
Vercel's CLI to deploy your React app.
5:18
The Vercel CLI allows you to
deploy your projects directly
5:25
from the command line
allowing you to do so,
5:29
whether your project is connected
to a Git Repository or not.
5:32
Here I have a new course
directory project,
5:37
which I haven't deployed and
it's not linked to a Git Repository.
5:41
To get started, we'll need to install
5:46
the Vercel CLI using
the command npm i -g vercel.
5:51
For a new project, the initial
deployment will prompt you to link
5:58
your local directory to a Vercel project.
6:03
This is done by running the Vercel
command in your local project directory.
6:06
If this is your first time, it will ask
you to log into your Vercel account.
6:12
I used my GitHub account when signing up,
so I'll select that.
6:18
A pop-up appear that
automatically log me in.
6:23
Now back to the terminal.
6:27
I'll proceed by pressing enter to accept
the default values for the prompts.
6:29
Yes, I wanna set up and deploy.
6:35
Yes, use this Vercel account.
6:37
No, I don't wanna link
to an existing project.
6:40
Sure, this project name works.
6:44
Correct, all the code is
located in the root directory.
6:46
It auto-detected that my
project is built using Vite.
6:51
Since all the settings appear to be
correct, I'll press Enter to confirm.
6:56
And now it's initiating
the deployment of our site.
7:01
One interesting feature of the Vercel
command is that it doesn't
7:05
immediately deploy your site for
production.
7:09
Instead, it generates a preview URL
allowing you to review and ensure
7:12
everything is functioning correctly before
you proceed with the final app deployment.
7:18
I'll click on this link to
open it in the browser.
7:24
The app is looking great.
7:28
I can smoothly navigate to each tab and
even refreshing the page
7:30
works flawlessly since I've already added
Vercel's rewrite rule to this project.
7:35
To deploy to production,
7:42
simply enter the command
vercel --prod in the terminal.
7:45
And just like that our React app is
deployed and hosted through Vercel.
7:51
We can easily share this link with
anyone to grant them access to our app.
7:57
However, because this deployment
isn't connected to a Git Repository,
8:03
whenever you make any changes
to your app you'll need to run
8:08
the vercel --prod command
to update your deployment.
8:13
I hope you found these quick and
useful methods for
8:17
deploying your React apps valuable.
8:20
The choice of tools and
methods ultimately depends on you and
8:23
your team's preferences.
8:28
Additionally, it's worth noting that
the functionality of these tools can
8:30
change from version to version, so
be sure to check the teacher's notes for
8:35
the most up-to-date information.
8:40
Thank you, everyone, and happy deploying.
8:42
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