Deploy to Netlify

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