Now that you've polished your example app, it's time to publish it to GitHub Pages.

{
  "homepage": "https://<your-username>.github.io/<your-repo-name>"
}

In this case, you would add the following line:

"homepage": "https://princefishthrower.github.io/react-use-please-stay-course"

 as a dev dependency. This makes deploying to GitHub pages a one-liner from the command line:

---
title: Publish the Example App to GitHub Pages
code: https://gitlab.com/fullstackio/books/react-use-please-stay-with-react-and-typescript/-/blob/production/course/code/lesson-19
isPublicLesson: true
useMdx: true
privateVideoUrl: https://stream.mux.com/JvyX4Kwyi9Wl5JeMl02CoZ1PqSdZWUm87ARLZiW7q700w.m3u8
---

Now that you've polished your example app, it's time to publish it to GitHub Pages.

## Update the `"homepage"` Value in `package.json`

First, update the `"homepage"` value in `package.json` to point to your GitHub Pages URL.

```json
{
  "homepage": "https://<your-username>.github.io/<your-repo-name>"
}
```

In this case, you would add the following line:

```json
"homepage": "https://princefishthrower.github.io/react-use-please-stay-course"
```

You also need to add the same `"homepage"` value for the `package.json` file within the `example` folder:

```json
{
  "homepage": "https://<your-username>.github.io/<your-repo-name>"
}
```

## Install `gh-pages`

Next, install `gh-pages` as a dev dependency. This makes deploying to GitHub pages a one-liner from the command line:

```json
npm install --save-dev gh-pages 
```

## Add a `predeploy` Script to `package.json`

You then need to add a `predeploy` script to your `package.json` file. This script will be used to build your app for production. In this case, you need to move into the `example` folder and build the app. Then, deploy the build folder produced there using the `gh-pages` package:

Chris Frewin

Publish the Example App to GitHub Pages

Now that we've polished our example app, let's publish it to GitHub pages.

The first thing we need to do is update the homepage in the root package.json

By default, npm init will take your git URL and make a link to the read me as

In our case, we want to change this to the GitHub pages URL.

And then GitHub.io and then slash the name of the repository, being sure to

Note here, the reason I have dash example in my repository name is because I

already own the react use, please stay repo.

But of course, this repo name can be anything you choose it to be.

And we need to also take this home page value and also set it in our example

So I'll paste that in right near the top.

We can then install gh pages as a dev dependency, which makes deploying to

GitHub pages a one liner from the command line.

So we'll install that as a dev dependency.

And then within our root package.json file, we can add two scripts to

accomplish our task of deploying to GitHub pages.

Now, this three letter suffix is special in terms of NPM scripts.

That is when I have pre whatever, whenever I run the parent command, NPM will

So in our case, the command for us will be deploy.

And that means that the pre deploy script will run first and then the deploy

This is a nice way you can organize complex or multi step scripts in your

So our pre deploy script will be building the page and our deploy script will

be actually publishing the page to GitHub pages via the gh pages library we

So pre deploy will be changing into the example directory and issuing NPM run

Using the gh pages tool is gh pages where the directory we want to deploy is

And since we're about to deploy the site, it's probably nice to include this

So here in the read me towards the top, I'm going to add a small header here.

Example app and I'll just say an interactive example app using this hook can be

And we'll do the markdown link and I will copy.

The markdown link so we can now publish our example app to GitHub pages.

That should be as easy as running NPM run deploy.

And if everything went well, gh pages should simply say published and to double

check that everything worked, we can go to the same link that we've set for our

You may find that you get a 404 for a few minutes and this is because GitHub is

still building and allocating space on their servers for your site to run.

If you're getting a 404 page or any errors, you can hard refresh and your

So in summary, we added a pre deploy script, which moves into the example

folder and builds the example application.

We added a deploy script, which uses the gh pages tool to deploy the example

We ensured that the homepage was correct in both the root package.json file and

We then added a link to this example in our route read me and we finally

So congratulations, you've completed the course.

This was the final lesson in module four.

I'm really glad you decided to take my course and I hope you enjoyed our react

If you have any questions, comments or feedback, please reach out to me at fre

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Masterclasses

Tutorials

Fullstack React with TypeScript