Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Deploying a React App

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Create a Production Build

2:42 with Guil Hernandez

Before deploying a React application, you will need a production-ready build of the app. In this video, we'll create a static build that will optimize React code to run in browsers and download as fast as possible.

Resources

Related Content

Related Discussions

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

Sign up

    Related 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 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

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up