Introduction

Welcome to the last lab of the React DeCal!

Congratulations on making it this far — we're so proud of all the work you've done, and we can't wait to see your projects on Thursday.

Today's lab will focus on the last piece of the puzzle: how can we get our React app published and online?

Review: What's a React app?

A week and a half ago, we talked about create-react-app and how your React app is essentially a bunch of your JavaScript (taken from the src/ folder) inside of a <script> tag.

You might remember that in class, we ran this command inside of our terminal:

npm run build

The result of running this command is a new folder in your React project folder: the build/ folder. The build/ folder is where your "production-ready" code (meaning, intended for being placed online rather than for being edited in development) will live.

This build/ folder is everything you need to take your React app online. It includes your HTML (build/index.html), your CSS (build/static/css/), and your built (meaning, optimized for production) JavaScript (build/static/js/).

How do I bring build/ to the Internet?

One important characteristic about the build/ folder is that it's static. It doesn't need to be "run" on a server (some central computer to run your application logic), since our code is intended to be run in the browser — on each of the computers of our users.

Because the build/ folder is static, we don't have an extensive set of requirements for the server that ends up hosting our React app. It only needs to do one thing: send down our static files to browsers that request them (an HTTP server, if you're familiar with networking).

There are many, many free and simple options for servers that will host your static files.