How to deploy a React app to Github Pages with Github Actions

github pages allows you to create a website for free directly from a github repository and github actions makes it easy to automate workflows that include tasks such as deploying applications in this video i'm going to show you how to deploy a react application to github pages by using github actions don't forget to hit that like button and subscribe to the channel and let's get to it okay first we need to create a new repository so i'm going to click on new and the name of the repository will be react pages i'm going to keep this repo public and i'm going to click on create repository okay now i'm going to clone this repo locally so this is git clone and i'm going to paste the github repository url now i'm going to enter to the react pages folder and now i'm going to create a new react project so this is mpx create react app our react project is ready so we need to install a dependency that will allow us to publish our react application and this package is ch pages so we need to run npm install gh pages and we need to install this dependency as a development dependency so this is save them now that the shared pages package has been installed let's go to visual studio code and let's open the package.json file and here we can see that the ca pages library is part of the development dependencies so now we need to make a few changes in order to be able to deploy our react project to github pages so first we need to add a new property i'm going to click here that is home page so the format for this url is it have username dot github dot io forward slash and the name of the project that in this case is react pages this is actually the name of the github repository my username is pragmatic reviews so i'm going to put that in here okay and here we need to add two scripts we need to add one script that is pre-deploy and this script is going to run every time that we run the deploy command so the deploy command is going to execute g8 pages minus d build this is basically going to take the contents from the local build directory and it's going to push those contents into a new branch in github and in the pre-deploy script will be npm run build and every time that would run the deploy script is going to run the pre-deploy it's going to build the application into the build directory and the shield pages command is going to create a new branch in github and it's going to push the changes from that directory into the github branch okay now let's open a new terminal now let's build and deploy your application to github pages so we only need to run npm run deploy so first it's going to run the pre-deploy script that is going to be the application and now it's going to run the c8 pages command that is going to deploy application into github now let's go to our github repository and let's refresh the page and as you can see here we have a new branch with our static assets shared data when we built the react application and if you go to settings and if you go here to pages we're gonna see that our site is published at this url and if we click here we're gonna see our react application up and running okay now let's see how we can automate the deployment of our react application to github pages by setting up a github actions workflow okay let's go back to visual studio code okay and here we need to create a new file we need to put this file within a specific folder that is github and within this folder we need to add another folder that is workflows and here we need to add a new yaml file that is workflow.yaml okay first we need to put the name of the workflow we have pages deploy now we need to set what is the event that is going to trigger this workflow in our case we'll be on push on the master branch so this is on and this is push and here we are going to specify the branches and this will be master and here we need to add the different jobs that are going to be part of this workflow so this is shops we are going to just create one shop that will be for building and deploying the application i'm just going to call it build here we need to specify what is the docker image where this workload is going to run so this is runs on and we are going to set ubuntu latest okay now we are going to set the node version so here we need to add a strategy this is matrix and here we need to set the node version node version and the node version will be 15. okay and now we need to add the different steps of the workflow so the first step will be checking out the code so this is checkout and this is going to use a special action provided by github and the way that we need to set it up here is actions slash checkout at b1 the next step will be installing the dependencies and building the application so this is name this is install and build and in this step we are going to run npm install and npm run build and finally we're going to have the deployment step and for the deployment step i'm going to use an action that is on this repo i'm going to leave the link below and i'm going to copy the settings from here and i'm going to paste those here so basically here we are using this specific action that is heat cap pages deploy action version four one one this is the latest release yes this is the latest release as we can see here let's go back and we are going to use the same branch that we are using that is ch pages and the folder is the standard folder for react applications so i'm going to save this and now i'm going to open the terminal and i'm going to commit and push the code to trigger the github actions workflow so this is it add everything it commit minus m [Music] initial commit and now let's push the changes okay now let's go to github and now let's go to actions and as you can see here we have the first workflow running so if we enter here and as we as here is going to check out the code is going to install a bit application and after that it's going to deploy the application to github pages okay and the deployment has finished successfully now let's make a change just to check that every time that we make a change it's going to deploy that change into github pages so let's go back and now let's go to the application and let's make a change here so here i'm going just going to add an h1 and here i'm going to put testing github pages with react and github actions okay now i'm going to commit and push this change so this is it add everything it commit minus m changing message and now let's push this change to the repo okay now let's check the github actions dashboard as we can see here we have a new workflow running and again it's going to check out the code it's going to install and build the application and finally it's going to deploy the application the workflow has finished successfully so let's go to our application in react pages and let's refresh it and as we can see here we have our new message that is testing github pages with react and github actions that's all i have for today thank you guys for watching and i see you in the next one take care bye [Music]

Channel: Pragmatic Reviews

Views: 4,904

Rating: 4.8080001 out of 5

Keywords: deploy a react app to github pages with Github Actions, react, react deployment, github, github pages, github actions, react js, reactjs, react framework, github actions deploy, react js deployment, deploy

Id: 5I37iVCDUTU

Length: 9min 47sec (587 seconds)

Published: Mon Apr 12 2021