6.2 Production Deployment

When you are ready to share your latest creation with the world, there are a couple of things that need to happen.

Run the build script to package all of the project dependencies into the fewest compressed files possible. Webpack will help manage this part.
Copy the resulting files to your website hosting service.

Depending on which hosting service you are using, these steps may look a little different. Let's look at two different options.

# Manual Build and Deploy

# The build step

The development build for React has a lot of extras that help with the development process, like source-maps and hot-module-replacement. It also makes no attempt to minify anything.

The production build, will use a more streamlined version of the core React library and take advantage of Webpack's "tree shaking" capabilities to slim down your third-party dependencies as well.

create-react-app has already done the hard work of configuring Webpack and scripting the whole build process. You just need to run the build script from the package.json file like this ...

yarn build

npm run build

From the docs ...

Builds the app for production to the build folder. It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes. Your app is ready to be deployed!

# Deployment

Running the command yarn build will create a build folder at the top level of your project, minimize your project and copy the files into this build folder. You can now put the contents of this folder on your webserver as your website with SSH or SFTP.

Create React App - Deployment Guide

The create-react-app documentation (opens new window) has detailed instructions for deploying to the most common hosting options.

# GitHub Pages

# No support for History API

GitHub Pages does not support the automatic redirects necessary for client-side routing using the HTML5 pushState history API. If you are hosting on GitHub then BrowserRouter will fail. You will need to use HashRouter instead.

This means that a path like https://www.example.com/kids/123 would have to be written like https://www.example.com/#/kids/123 instead.

See the Hashrouter reference (opens new window) documentation.

# Building for relative paths

From the docs ...

By default, Create React App produces a build assuming your app is hosted at the server root.

To override this, specify the homepage in your package.json, for example:

"homepage": "http://YOUR-USERANME.github.io/REPO-NAME",

This will let Create React App correctly infer the root path to use in the generated HTML file. All your GitHub Pages websites are inside a folder, which is the name of your repo, and not at the root of the github.io domain.

# Create your GitHub Repo

Follow the normal steps to set up your GitHub Repo and then link it to your local development git repo and push the commits up to the server.

git init
git add -A
git commit -m "Add React project files"
git remote add origin https://github.com/YOUR-USERANME/REPO-NAME.git
git push -u origin main

1
2
3
4
5

Go to your GitHub repo, AFTER pushing to the repo, and set the gh-pages branch as the source for the gh-pages website by adding a gh-pages branch.

# gh-pages NPM package

Install gh-pages from npm, as a development dependency.

yarn add gh-pages -D

Update your package.json file to add the deploy and predeploy scripts.

"homepage": "https://username.github.io/repo-name",
"scripts":{
    "predeploy":"yarn build",
    "deploy":"gh-pages -d build",
    "start":"react-scripts start",
    "build":"react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
}

1
2
3
4
5
6
7
8
9

The predeploy script will be run automatically when you run yarn deploy. This will run the normal CRA build process, placing the production ready files in the build folder. The deploy script will then create a new gh-pages branch (if it does not already exist) in your GitHub repo and push the contents of the build folder to that branch. It will also automatically enable the GitHub Pages publishing feature in your repo's settings.

yarn deploy

Wait for that to finish, then visit https://USER-NAME.github.io/REPO-NAME/ to see your public React site working.

# Reference

# Netlify

Netlify (opens new window) is another great hosting option with a generous free tier. It makes deploying your sites (React or otherwise) dead simple. Once configured, you can just push a new commit to your main branch and Netlify will automatically run the build process and deploy your site.

# Set up continuous delivery

Start a new netlify project (opens new window)
Pick your Git hosting service and select your repository
Click Build your site

# Support for client-side routing

To support pushState (i.e. with BrowserRouter), make sure to create a public/_redirects file with the following rewrite rules:

/*  /index.html  200

When you build the project, Create React App will place the public folder contents into the build output and Netlify will correctly handle the redirects.

Remember

If you are publishing to Netlify, you should remove the gh-pages related changes to your package.json file.

This repo (opens new window) has notes in the README.md about the setup steps for Netlify and Github.

# Video Tutorials

Here is a series of 3 videos talking about how you can combine GitHub, Netlify, and Serverless. You are not required to use the Serverless Part.

Playlist of 3 videos about Netlify deployment (opens new window)

See the individual links below.

# Assignments Reminder

Class assignment C2 - React Navigation is due this week.

Class assignment C3 - React Deployment is due next week.

# References

← 6 React Context API 7.1 More Hooks →