Well done!

You have completed Deploying a React App!

Preview

Deploy to Netlify

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

Git and GitHub Workflow for Developers

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

[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

Deploying a React App

Well done!

You have completed Deploying a React App!

Deploy to Netlify

Resources

Rewrite Rule

Related Content

Related Discussions

Related Discussions