In this video, I'll deploy and

host a React app on GitHub Pages, a free hosting solution provided by GitHub

that lets others view your repository like a regular static website.

Meaning, a site containing HTML, CSS, and

JavaScript files, like the files in the build folder, for example.

When you run npm run build, in the console output,

you see a message letting you know that you can control where you host your build

using a homepage field in your package.json file.

It shows that you could, for instance, build it for

GitHub Pages by setting the homepage field to http://,

your GitHub user name, followed by the GitHub Pages domain,

which is github.io, and your project's repository name.

Now, I already have my React app up on GitHub

in a repository named course-directory.

So now I'm ready to deploy the app to GitHub Pages as a project page.

A project page means that each repository, or project,

in your GitHub account can have its own hosted website on the GitHub servers.

The first thing I need to do is add the homepage field to my package.json file.

I'm going to use my GitHub username, guilh,

in the URL with https://guilh.github.io.

And as the repository name, I'll write course-directory.

Next, I need to install the Github Pages package via npm, and

a couple of deploy scripts to package.json.

In the console, type npm install --save gh-pages.

This is going to let you publish to a branch on Github called gh-pages.

Anything you push to that branch,

like your build, is going to appear on the github.io domain.

Next, I'll set up my deploy scripts in package.json.

In the scripts object, add two properties,

predeploy and deploy.

You can also copy these scripts from the teacher's notes with this video.

Set predeploy to the build command with, npm run build.

And to publish everything from your build folder to your gh-pages branch,

set deploy to, gh-pages -d build.

Make sure that you write the predeploy script first.

That way predeploy will run before deploy runs, which means that it will

automatically create the production-ready build of your app.

It will even generate the build folder for you, if you haven't done that yet.

In fact, I'll delete the build folder from my project to better demonstrate.

All right, now I can publish my build to a gh-pages branch on my

GitHub repo by running the command, npm run deploy.

This begins creating an optimized production build.

As you can see, a new build folder is generated in my project, and

now I should be all set.

I see a message in the console letting me know that my app was published.

In my GitHub repository, if I click Settings and scroll down to GitHub Pages,

I see that my site is published at guilh.github.io/course-directory.

And under Source, it shows that my GitHub Pages site is currently being built from

the gh-pages branch.

And I can view the gh-pages branch in my repository

under the list of branches, good.

Now the app, as you know, is served from a subdirectory named course-directory.

So when I first view the app on the GitHub domain,

I immediately get the app's Page Not Found route.

This is because I initially set React Router to load the home component

at the root path using a forward slash, as you can see here.

Well, currently, the URL path is /course-directory, so

it doesn't match any of the routes defined in the router.

If your app is served from a subdirectory like this, you can set a base URL for

your routes, so that the root path always renders the desired component.

I've posted an example of how you can do that in the teacher's note with

this video.

Now when I click the navigation links, the URL paths match the routes, so that

the app looks and works as expected, even without the main subdirectory in the URL.

And there's another big issue with the router.

Watch what happens when I refresh the app.

I get a 404 page.

This has to do with how GitHub Pages handles client side routing.

You see, GitHub Pages does not support routers that use the HTML5 pushState

History API under the hood, like React Router uses to manage your routes and

keep your UI in sync with the URL.

So when there is a fresh page load for a URL like courses/javascript,

the server by default will look for a file to load under that same path.

The GitHub Pages server returns a 404,

because it cannot find courses/javascript in the build.

That's all being managed behind the scenes by React Router.

If you're not using a router, then you don't need to worry about this.

When you are using a router in the app you're deploying to GitHub Pages, there

are a couple of solutions you can use to avoid getting 404s on page refreshes.

You could switch from using the History API to routing with hashes.

In Director router, you can switch to hash history using HashRouter,

which uses the hash portion of the URL to keep your UI in sync with the URL.

This also means that it's going to display a hash in your URLs.

As you can see when you use HashRouter,

you're able to refresh the app at any URL, and it's not going to give you a 404.

It's also going to serve the app from the main subdirectory and

display it in the URLs.

There's also a trick you can use to instruct GitHub Pages to handle 404s by

redirecting to your index.html page, using a special redirect parameter.

Now, this method is pretty tricky and involves a few complicated workarounds.

I've posted a link to this technique in the teacher's notes with this video.

We also have an entire workshop dedicated to hosting websites on GitHub Pages.

So if you wanna learn more about hosting projects with GitHub Pages,

including using your own domain name,

I've posted the link to the workshop in the teacher's notes with this video.