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?
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.
create-react-app
(optional)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/
).
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.
GitHub Pages: you may have heard of or used this one before — it's GitHub's free option to host static files. It can run the npm run build
step for you automatically, as well.
Netlify: Netlify is a newer product that was built for the changing landscape of front-end build tools. We'll be using Netlify in the next section!
Surge: Surge is a dead-simple tool for the terminal that takes all of the files in your current directory you're in and publishes it to a URL at something.surge.sh
, simply by typing in the command: surge
. It's free for students!
Now: Now is like a more powerful Surge, with more options for code that is meant to be run on servers. It can be used as a static file host, but that's not the primary use case — which means that some of the terms in the documentation may be unfamiliar to you. It's still worth a look:
Firebase: Firebase also has static file hosting options. You're already signed up for Firebase if you attended last lecture, so check out their developer dashboard for more info on how to get started.