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.

Teacher's Notes
Questions?
Video Transcript
Downloads
Workspaces

Resources

serve

Using Create React App – workshop

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