Create a Production Build

[MUSIC] 0:00 You've built your React application and you're ready to deploy it and 0:09 show it off to the world. 0:12 How exactly do you do that? 0:14 I'm Gill, a JavaScript teacher here at Treehouse. 0:16 In this workshop, I'll teach you three ways you can deploy and 0:18 host your React application for free. 0:21 We're going to use GitHub Pages, a tool called Now, and a service called Netlify. 0:24 To get started and follow along with me, download the project files with this 0:30 workshop, or you can use your own React app. 0:33 I'm going to be working with this front end course directory app, which uses React 0:36 router to let users navigate through the app by clicking the navigation links. 0:40 Before you can deploy your React application, 0:45 you'll first need to create a production-ready built of your app. 0:47 This means that you'll create a separate configuration of your app that 0:51 optimizes your code to run in browsers and make it download as fast as possible. 0:55 Now, some of the tools we're going to be working with automatically create 1:00 a build for you. 1:03 Since Create React app provides a quick and simple way to create a production 1:05 build of your app, I'll cover that first before moving on to the other tools. 1:08 When you're ready to create a production-ready build of your app, 1:13 run the command, npm run build. 1:17 This will generate a build folder inside your project containing 1:21 all the static files that can be used on a production web server. 1:24 The build command transfers all your React code into code the browser understands, 1:27 and it optimizes your files for best performance. 1:33 It bundles up all your JavaScript files into one minified file, and 1:35 minifies resources, like the HTML template and CSS to help reduce download times. 1:39 It's also going to provide a service worker file to help run your app offline. 1:45 So everything's been optimized for the app, and 1:49 this will be the folder that you deploy to a server. 1:51 Now, to view the production build of your app on your machine, 1:55 you'll still need to run it on a server. 1:58 A quick way to do that, as suggested in the Create React App docs 2:00 to use a tool called serve, which serves static sites and single page applications. 2:03 In the console, I'll install serve with npm install -g serve. 2:09 Then run serve -s build. 2:18 This will serve and 2:25 let you view the production view of your app on localhost port 5000. 2:26 Now any time you make a change to your app and want to preview it at this URL, 2:29 you will need to rebuild the app with the build command. 2:34 Up next, I'll teach you how to deploy and host your react app on GitHub pages. 2:37