[MUSIC]

You've built your React application and you're ready to deploy it and

show it off to the world.

How exactly do you do that?

I'm Gill, a JavaScript teacher here at Treehouse.

In this workshop, I'll teach you three ways you can deploy and

host your React application for free.

We're going to use GitHub Pages, a tool called Now, and a service called Netlify.

To get started and follow along with me, download the project files with this

workshop, or you can use your own React app.

I'm going to be working with this front end course directory app, which uses React

router to let users navigate through the app by clicking the navigation links.

Before you can deploy your React application,

you'll first need to create a production-ready built of your app.

This means that you'll create a separate configuration of your app that

optimizes your code to run in browsers and make it download as fast as possible.

Now, some of the tools we're going to be working with automatically create

a build for you.

Since Create React app provides a quick and simple way to create a production

build of your app, I'll cover that first before moving on to the other tools.

When you're ready to create a production-ready build of your app,

run the command, npm run build.

This will generate a build folder inside your project containing

all the static files that can be used on a production web server.

The build command transfers all your React code into code the browser understands,

and it optimizes your files for best performance.

It bundles up all your JavaScript files into one minified file, and

minifies resources, like the HTML template and CSS to help reduce download times.

It's also going to provide a service worker file to help run your app offline.

So everything's been optimized for the app, and

this will be the folder that you deploy to a server.

Now, to view the production build of your app on your machine,

you'll still need to run it on a server.

A quick way to do that, as suggested in the Create React App docs

to use a tool called serve, which serves static sites and single page applications.

In the console, I'll install serve with npm install -g serve.

Then run serve -s build.

This will serve and

let you view the production view of your app on localhost port 5000.

Now any time you make a change to your app and want to preview it at this URL,

you will need to rebuild the app with the build command.

Up next, I'll teach you how to deploy and host your react app on GitHub pages.