Publish the Example App to GitHub Pages

[00:00 - 00:09] 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 home page in the root package.json file.

[00:10 - 01:08] By default, npm init will take your git URL and make a link to the read me as the home page. In our case, we want to change this to the GitHub pages URL. So in my case, that's my username and then github.io and then slash the name of the repository, being sure to remove that read me tag. 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 apps package.json. So I'll paste that in right near the top. We can save this. We can then install gh pages as a dev dependency, which makes deploying to github pages a one liner from the command line.

[01:09 - 01:57] So we'll install that as a dev dependency gh pages. And then within our root package.json file, we can add two scripts to accomplish our task of deploying to github pages. So that will be a pre deploy and a deploy script. 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 automatically run this pre command.

[01:58 - 03:54] 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 script. This is a nice way you can organize complex or multi step scripts in your package.json file. 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 just installed. So pre deploy will be changing into the example directory and issuing npm run build and our deploy script using the gh pages tool is gh pages where the directory we want to deploy is the example build directory. And since we're about to deploy the site, it's probably nice to include this information in the read me. 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 found at and we'll do the markdown link. And I will copy the home page URL here and paste it into the markdown link. So we can now publish our example app to github pages. And 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 home page. And we see our example page here.

[03:55 - 04:15] 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. So give it a few minutes at first. If you're getting a 404 page or any errors, you can hard refresh. And your example page should show up.

[04:16 - 05:18] 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 build folder. We ensured that the home page was correct in both the root package.json file and also in the example package.json file. We then added a link to this example in our root readme. And we finally published the example to github pages. So congratulations, you've completed the course. This was the final lesson in module four. So you're all done. I'm really glad you decided to take my course. And I hope you enjoyed our react and type script journey. If you have any questions, comments, or feedback, please reach out to me at fruhan.crystopher@ gmail.com. Until next time.