Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
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.
[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