When it comes to deploying your Frontend React application on the internet, you are pretty spoiled for choice. In this tutorial, we will look at one simple yet popular free option, which is GitHub pages. So let's go. You can use this process with pretty much any React application that you might have to demonstrate that we have a very simple counter app with increment and decrement. We have a simple UI with the two buttons, wire to those functions, and a dev displaying the current count value. There is nothing groundbreaking about this application, but it does demonstrate some stateful utility that you might want to publish on the internet.

Now with GitHub pages, you are most likely going to be deploying this application at a sub URL under your GitHub username. And this will be equivalent to the repository name that we create under GitHub. And to tell wheat that we will be deploying a replication at the URL slash demo dash pages, which is our repository name, we provide the base option to the configuration for wheat. And with that simple change out of the way, we already know that we can build our application for production by running the build script. Let's demo that very quickly. We open up the terminal execute n pm Run Build. Once the bill completes, we now have this just folder ready

for deployment to GitHub pages. Before we can use GitHub pages, we need to take our code and publish it as a repository on GitHub, and we can actually do that directly from within vs. Code. Open up the source control panel within vs. Code stage, all the changes, commit them whatever message you want, for example, happy, and then publish this branch. And now vs. Code will ask you do you want to publish it to GitHub? And of course, we're going to select GitHub and we're going to publish it publicly so that you have access to all of this code once we are done with this demo. And if I open this up in GitHub, you can see that all

of our source code is now available for the public on GitHub. Now that we have our source code on GitHub, the next step is to configure a different branch. And we'll just choose a name like GH pages to be served as a website on GitHub. First, we will need to add a new branch. And to do that, we'll click on the branches within GitHub. This takes us to the branches section. And here we will click on the new branch button and type in the name of our branch, which we are calling GH dash pages. Click on create branch, and congratulations, we have this branch created. Now we need to tell GitHub that this is the branch

that it should use to serve on GitHub pages. For that, we go into our setting section, click on pages, and then build and deployment. Select Deploy from a branch. And with this deploy from a branch option selected within the branch, we select GH dash pages, which is the branch that we just created. Click on save. And this might take a few seconds, but once this is complete, GitHub is completely configured to serve our website from GH pages. So now we have a code on the main branch, and then we have a Branch GH pages,

which is being served as a website. The next step is to take the code from Main Branch, build it, and push it to GH pages branch. And for this, we will use an NPM package called GH pages. So we head back to our code and NBM install GH dash pages and save it as a dev dependency. Now once this install completes, we can of course use this package directly as well if you wanted to. But a better way to do that is to add it to our script section. We create a dedicated redeploy script to make sure that our project is built before deployment,

and then a deploy script, which invokes GS dash pages and passes in the directory test, which contains our production assets. And with this Deploy script created, we can actually deploy our application right away by executing and pm Run Deploy. This will of course execute Redeploy, which will run NPM Run Build to build our assets. And then it will invoke Deploy, which will invoke GH dash pages, which takes those build assets and pushes them over to GitHub. And we finally get this message published. Now with this publishing done, I can actually visit my website at my GitHub username,

which is beseth.github.io/the project name, which is demo dash pages. And congratulations. Hey, we have a website running in production for anyone on the internet to go and play around with. And of course, while this particular application might not be of great value, your application might just be amazing. Now, what would be great is if we or anyone else using Pull Requests makes changes to our code on the GitHub main branch, GitHub could automatically run our deploy script to build our website and publish it to the GH pages branch. And this can be done quite easily with GitHub actions.

Before we can start using GitHub actions for this purpose, we need to go into our settings, actions in general, and then all the way to the bottom. We need to modify our workflow permissions to be able to both read and write to our repository, because of course, it'll need to write those changes to the GH pages branch. And with these workflow permissions saved, we can jump back to our application and add the workflow, which will be executed by GitHub actions. We create a workflow file within GitHub slash workflows, and we will be creating this as CD yaml where CD stands

for continuous deployment. And this will execute on every push to the branch main. And then for the jobs, we will have only one called Deploy, which will run on Ban two latest, which is the free worker that offers the most amount of minutes or GitHub. And then for our steps, we will first check out the repository and run NPM install. And all of this is pretty standard for any Node project that you might be using. With GitHub actions, the only step that we really need for GH pages is to set GI remote because without this GH pages will not be able to deploy to our repository.

'cause of course it'll not know which GI it should push to. And we can actually get this from the environment variables. The environment variable GitHub repository is always available. However, GitHub token, because it is a secure token, we have to explicitly pass in through an end setting. And of course, the next step Is to run Deploy. And for this, we also need to set up a GI username and we will use the default username of GitHub Action Spot. And this is what is actually recommended from GitHub itself. And once I push this to GitHub, of course it'll automatically start running this action.

Additionally, as I already mentioned, you will be able to find all of this code over on my GitHub at github.com/pth/demo-pages, and that's the extent of the one-time configuration. Now that we have the continuous deployment set up, let's just look at how you would make some simple changes to your application and see the updated website. Let's update our application with the new simple Dev with the text, hello from Actions, and then we open up the terminal, add this file, commit this with the message changes. And once we have this change committed locally,

we will push it to GitHub with a simple run of Git push. Once this command completes Accord is going to make its way over to GitHub on the main branch. And if I jump over to the website, you can see there is this nice yellow icon next to the commit that we just pushed, which is indicating that there is a GitHub action running for this particular commit. We can click on that icon and then dig into the details of the GitHub action. And this is the action that we wrote, which is Deploy, and it's going through the steps that we gave it, which is of course installed in NP Plan deploy.

And once this completes, we get this nice green take. And if you hop on over to the website, you can see our updated website published to production. As I mentioned, there are lots of options to deploy your React applications, but if you are looking for a simple React website, especially to showcase your developer portfolio, GitHub pages is an excellent choice. As always, thank you for joining me and I'll see you in the next one.