CI/CD Pipeline in React.js Project with Github Workflows using Eslint Prettier Pre-commit and Husky

hi guys welcome back to another very important video of react I'm going to be talking about very important topic called continuous integration and continuous deployment so you can see that I have actually run and tested my implementation and it has actually passed the continuous integration build and deploy to the GitHub Pages GitHub pages is a good platform to deploy your static sites we will be building a new react project from scratch and I will be configuring all these things including the linters formatting commit message format as well so the user or me or anybody who is building the project or writing the code should not be able to push the code until and unless they follow all the rules set by the es linter formater prettier and commit message format which I will be implementing so if you I show you all the configuration method which I've set over here you can see that it has passed all these things it first installed the dependencies it ran the linter linter got passed it ran the prettier format it got passed then it checked the commit message format uh so that nobody should be able to write anything in the commit message like the random text or the no dots or length of uh commit message is not appropriate so we can set any rules in the packages which I'm using over here and after that once these gets passed it will be deployed to a specific URL which is provided by GitHub you can see that this is for the public free version if you want to configure your uh deployment to the uh any custom domain uh you need to buy some membership of the GitHub Pages where you can deploy that all right so in this video I'm going to be using Vite for creating a new react project this is pretty much a new technology you can use npx create react app command as well to create your project but I would suggest you to use it it pretty simple it's just U different um while creating a new react project and we can have all these different templates which is supported by white so let's go ahead open up any empty folder in VSS code and I'm going to be creating a new project using V and the project is going to be react s swct TS template all right so here in the terminal I'm going to be writing npm create white at latest first of all make sure you have the latest version of node and npm installed in your system uh make sure you have at least version 18 installed because uh this is what recommended by white if we go up this is what it says all right so here I have written npm create white latest and then I can name anything to the project so let's give it cicd react this is the name of project then I can give hyphen hyen space hyphen hyphen template and then I can write the name of the template which is uh so um s swc hyund TS all right so I'll hit enter so it's going to take one or two seconds it's going to quickly create all the different files so you can see how fast is this to create all these different files and folders for running over react project but in order to run it I'm going to go inside this folder of the project and I'm going to write npm install it's going to install all the dependencies which are added in Dev dependencies and in the dependencies object so meanwhile it is getting installed I just want to show you my videos before this that I've have created four videos on Docker Docker is very important and it is pretty much related to cicd so I would request you guys and suggest you that if you want to learn cicd it is very important to learn Docker as well so Docker crash course which is the first video I created it is uh covering up almost pretty much every topic for beginners who wants to learn Docker and then I created multiple Docker videos for configuring it in react next gs14 using App directory M Stack full stack applications so these are different videos that I've have created I would suggest you guys to watch this video as well other than this you can see that I've have created pretty much um every topic related to nextjs 13 and 14 angular node Express mongod DB different tips and tricks bun tutorial different uh Project based tutorials as well so it will really encourage me to make more videos for you guys if you subscribe my channel and like this video all right so dependencies are installed in my project first of all I want to run the project to see if everything is working fine so let me clear the terminal first of all so npm run Dev is the command provided by this white over here uh so this is the project running on this port so I'm just going to copy it and open it up on my browser uh so you can see that everything is working fine so we are good to go first of all I will be initializing my project with Git I will be committing and pushing the code on the GitHub repository to see that if we commit the code or push the code it will not run through linters or the prets or format uh and uh after that I will be start configuring as lint prettier um and these kinds of packages so first of all I will be writing git in it now the project is initialized with G I'm going to go and create a new repository so first of all I can write cicd uh or anything react or whatever you want to say okay so I'm going to create this repository I'll leave it public because because I want to deploy it on GitHub Pages provided URL if we want to deploy it on custom domain then we can make it private and uh even if we want to deploy on the GitHub provided URL uh still we cannot do it with the private repository so for that reason we need to keep our repository public these files are already added in my project so I'll not check any of these so I'll click on the create repository and after that I will push the code just to see that everything goes according to our plan so first of all I will be committing my changes let me clear the terminal for U the visibility and first of all I will be adding it like this and then I will be committing my changes you can see that when I committing my changes it is not going through uh any of the linters es lint prettier or the commit message format um so this is what I will be doing um later on and once I've going to commit this I'm going to create a new branch let's initialize a new main branch and then I will be adding the remote over here then I will be pushing the code to the main branch over here so it will push the code to the main branch and over here if I refresh this page you will see all the files starts getting visible uh just now all right so we can see that uh if we go over actions tab you will see there will not be any cicd running because we have not not configured it yet all right so let's come back over here and now I will be installing few packages for the prettier es linter uh that are required to configure our project with so in the terminal I will write npm install hyphen hyph save hyphen Dev I will be installing prettier I will write es lint hyphen config Hyun prettier es lend Hyun plug-in Hyun prettier and then I will be installing ESL Hyun plug-in Hyun react at latest all right so I'll hit enter so these packages will be installed and its references will be added in this Dev dependencies all right so you can see that these are successfully installed and these are added over here okay so after that I will be installing few more packages so let's install that npm install hyphen hyph save hyphen Dev Husky and then lint staged so let's hit enter so these will be installed as well okay so these are added over here now we need to configure our files so first of all I'm going to open up es. CJs file so in this file I will have to add few extra things first of all I need to add a couple of things in the extends array okay and then I will be adding uh White config file in ignore pattern white. config dots which is added on the left side you can see and then I need to add the plugins currently there is only one plug-in added but considering that we have uh installed few packages so I have added react typescript es link and prettier in plugins array as well after that I need to add uh rules so above this I will be adding this Rule and below this I need to add the prettier rule after the ending bracket of this array okay lastly I need to add the settings like this and uh for the settings I have actually set the variant to detect mainly so this is what I have added and this is pretty much uh for this file after this I need to add couple of more files one is for prettier and other is for prettier ignore so dot prettier RC which is added and let's create another file and this is going to be prettier uh ignore okay so in the prettier RC we can actually write any kind of rules uh which are suggested by the documentation of prettier you can uh refer the documentation and add your own rules as well so these are the rules which I usually add in uh most of my projects uh so in the prettier ignore we can simply uh ignore things so there's see it is not actually created that the reason is that I have to add dot before this okay so I will be adding these build and disc folder and this file uh that should be ignored by prettier okay uh it is not required but it's just to let you guys know the reason is uh learning so we want to learn things so that's why I'm mentioning these things all right so let's close it let's close this file and after that I'm going to open up package.json file above that we have multiple scripts so here I'm going to add the scripts for lter which is already added so whenever I will run npm run lint it is going to check if there are any linter errors but I want to automate it on Commit message and on push so I'm going to replace this dot with SRC I want es L to be run on uh this Source folder only all the files exist inside it not any of the files okay so that's why I have added so after extensions I want to include JS and jsx files as well or you can also add HTML or css files as well it's up to you and after lint I want to add lint fixed command so if our pre-commit shows any error to the developer uh then there should be a command that fixes all those linter issues so you can name anything to it but usually I write lint colon fix okay so after this we can add uh es lint commands so over here we have added this es lint dot I will be replacing it with Source extension will include all the files that you think are crucial needs to be formatted so after that hyen hyphen fix is very important it is going to automatically fix a lot of issues um and and remaining issues U that it cannot fix automatically we need to manually open up those files and fix those issues and after the lint fix I'm going to add the format command as well format command uh is used uh for the prettier okay so this is going to be run prettier right and these are all the files included within the source folder okay so these are added make sure you pause the video or you can just uh write as it is which I have written over here now now below you know that I have already installed husky lint stage and these are the hooks which I need to add uh over here so I will be writing comma and uh I'm going to be adding the first hook using husky so I have added this key Husky and then I have added these Hooks and then I have added this pre-commit okay and then lint stage which I yet need to create and after that I have added this hook pre push so these two commands will automatically be triggered uh on pre push push hook as well it's up to you we can add as much uh hooks as uh we want to add but currently I'm going to show you the pre-commit hook so that uh before committing uh we should be able to execute these link stage which I'm just going to add below this so link staged like this and here this is going to check all these files within the source folder and it's going to run npm run link and npm run format commands Okay uh so this is going to execute this particular hook all right it is not going to work yet we need to do some extra steps so since we have already installed husky I'm going to install husky in my terminal so let me clear the terminal and I'm going to write npm npx Husky and install if I hit enter it's going to create a new folder do Husky and it's going to create G ignore file uh it it does not contain anything yet you can modify it if you want husky. sh which is the bash command and we can modify it if you want to if you understand uh by going through its documentation but we don't need to make any change inside it okay so let's close this file after that um I'm going to add the pre-commit hook which I have added over here okay so I'm going to run another command U npm uh npx actually n P MPX husky add. husky SL preyen commit and after that in the double quotes I'm going to run npx lint staged okay close the double codes so I'll hit enter so it's going to add a new file inside the Husky folder pre-commit and it includes this npx lint stage so it's going to run Husky uhsh and it's going to go through all of these files so now when I will be committing my code this is going to gets triggered so it's automatically going to go through all of the files within the source folder and it's going to run uh npm run lint and npm run format uh by going through these uh things which I have just added over here now it's time to test over configuration in the terminal let me first of all verify so these are the changed files it is showing currently uh currently you can see that there is no change within the source folder it's showing and it will not trigger uh any of the commands which we have written over here linter or format so I'm going to go open up the app. TSX file and I can write change anything to it let's add dot dot dot after this text so that it can trigger some change within the source folder so let me clear this out and now I'm going to see what files it is showing this is just that I uh like to recheck things whether it's actually showing the changed files or not now I'm going to add it so get add Dot and after that I'm going to commit this once I will commit it you will see that it will start running the linter and the prettier and if there are any errors within any of these files within the source folder it will not let me commit the code until and unless I fix those errors so in the terminal I'm going to write get commit hyph M next commit I will hit enter and uh you will see that it will start running the linter and it has started showing some errors which was expected these errors are not specific to our configurations but these errors specifying that there are es linter errors you need to fix that we can manually open up these files main. TSX and app. TSX and fix those issues but we have written this lint colon fix command which we can run and it will fix most of these issues automatically so I can write npm run lint colon fix I will hit enter and uh it should fix those errors if I check git status you will see that it has changed these two files that's why these are red if you have an understanding about git so again I'm going to run git add Dot and I'm going to run git commit again so I will hit enter you will see that it will run npm run lint which is passed you can see green tick mark and after that it ran the format as well all right so format automatically formed the files uh wherever it was required so if I go and check the status you can see that we have successfully committed over changes and there are no es lint or prettier errors according to the configurations that we have set in these files uh in eslint rc. CGS and prettier RC file we can modify these configuration it's up to you now I'm going to sorry I'm going to push the code to the main branch now so that our git repository gets updated with these things so if I refresh this uh you will see that all of these files the configurations files will be added over here in the GitHub repository for this project now before moving further to the GitHub workflows I want to configure one more thing that is to restrict user to follow proper commit message format so there are a lot of tools the one famous tool that I'm going to be using is commit lint so in the terminal let me clear this out I'm going to install that thing up first so in order to do that I'm going to write npm install and uh then I'm going to do it with the dev dependencies object at commit link for/ slash and then I'm going to write these curly BRAC CLI colum comma actually and then I'm going to write config hyphen conventional close the curly braces so I will hit enter so I hope it is going to gets installed here currently uh the CLI and the config conventional all right so once it gets installed I'm going to be creating a new file over here so while it's getting installed I'm going to come here and create a new file and this is going to be commit lent hyphen config do CJs all right make sure you um actually it's not Hyun it's dot okay so this have file have been created and this pack package needs to be installed over here let me verify that so commit lint CLI and commit lint config conventional both are installed in my package.json file after that what I'm going to do is I'm going to add some code inside it and uh then after that I'm going to add its reference in my husky folder as well okay so here I'm going to write few rules for the rules I'm going to start off with module do exports equals to craes and first of all I want to extend so I want to create my own rules and if there are built-in rules that I want to use I would have uh written some uh things some built-in features over here you can uh refer its documentation so create create our own rules I will be creating rule this object and under this I will be be creating the plugins array okay so I will be copy pasting three rules over here all right so the first rule is referring to the length so I have set it to 20 so the minimum length needs to be 20 the 20 characters in a commit message then I have set this name uh this uh is not set to any value because I will be using rejects to verify that this will be referring to the first letter of commit message needs to be capital letter then the end should uh be ended with a period sign or a DOT you can say Okay so this plugin I'm going to add different rules inside it like this so I'm going to add couple of rules for above two values all right so this one is referring to this same key which I've added above it is giving me this value this is actually referring that the commit message must start with the capital letter this is the error message if someone is not following this particular rule this message will be shown and also uh if it is not ending with uh period sign then this message is going to be shown in the terminal all right so now you can always refer to the documentation of comit link and verify these things and also uh you can ask chat gbt to help you out uh with any other rule you want to add over here and chat gbt is going to help you out okay and uh one once that is done uh we can actually install it and in order to install that I'm going to write long command u in the terminal so let me copy paste that command so that I don't make any mistake you can pause the video and you can uh watch this command so this is the command I have written so you can see that I have started off with npx Husky ad uh husky commit message npx no install commit link addit and after that I have written this dollar sign make sure you don't make any mistake I will hit enter okay so now you can see that it has created another file commit message over here uh with some values which I have written in the terminal and it's also going to uh be running this husky Dosh command okay I don't need to make any change in package.json file so let's save all of these files now now inside my app. ts I'm going to change it so that it can trigger uh lint so let's write G status so you can see that these are the files got changed and uh now I'm going to add it get add let me clear this out get status so these files are added now I'm going to write my commit message so first of all I'm going to make some mistakes so add new commit so you can see that it it does not follow any of the rules which I have written in my uh rules file the commit link config CGS file I will hit enter so it's going to run npm run lint and uh it should also run that uh commit message rules and now you can see that it passed all the linting formatting uh errors and now it is showing three errors three problems uh first one header must be shorter must not be shorter than 20 uh starting letter should be capital and ending with the period now let's fix the dot and now I will hit enter it should fix up the last error now there are only two error messages now I will fix the capital error I'm just testing that if everything is working fine yes that is fixed now adding a new commit for your understanding I hope that it its length is greater than 20 let's see I will hit enter and uh yeah so it was greater than 20 and my commit message have successfully passed now let's go ahead and uh let's push this to the main branch so that we can save our changes on the GitHub repository let's refresh so that config file should be added over here and still there are no actions added now it's time to start writing it workflows continuous integration that is going to be using the same coding logic which we have written over here for checking the linters prettier formatting and also commit message rules which we are going to write now to trigger GitHub workflows there is a proper folder structure that we need to follow so in the project I'm going to create a new folder first of all so this is going to be GitHub inside this GitHub folder I'm going to be creating another folder this is going to be workflows you cannot change the names of these folders and inside this workflow folder I'm going to change uh I'm going to create a new file this is going to be ci. yml CI stands for continuous integration and uh in this file I'm going to be configuring all the rules which I have written in package.json file okay so these files uh belongs to the GitHub configurations uh if you are using any other repository hosting server like gitlab or big bucket they might be recommending to create their own specific files and folder structure for running the actions automations CI and CD processes uh because I'm using GitHub GitHub works well with ci. yml file with these folder structure you can go through other documentation for other uh repository hosting servers for following this but inside this ci. yml first of all we need to define the name we can write anything inside it so I'm going to write continuous integration okay and after that I need to Define on keyword on uh specifies uh the branch of the type of action which we are doing so I'm going to write push and then I'm going to write uh pull request okay so let me save it and it means that uh we want to trigger CI if we are going to push in inside any branch or if we create the pr for any branch against any branch we need to be specific in the real world application which I've already tested so for your reference I'm going to be pasting some uh commented code uh so that you can get an idea uh just ignore these uh red lines for now uh because um I think I'm missing one key word which is jobs okay now the errors are gone now this part of code on specify that if if we push to the branch main then this CI will triggered and if we create a pull request against the branch main then this CI will trigger but for now uh I have added this it will be triggered for all kinds of branches whether it's push or poll request so now we need to write Jobs first of all uh we need to Define uh build keyword and inside this build I need to define the server uh you can check out the documentation what kind of different servers the one of the most famous uh is the ubun 2 latest so it will pick up the latest uh Ubuntu version and uh this build is going to run on at the GitHub actions okay so after this runs on I need to Define steps okay so the first step is going to be the uses this is a very important keyword because this defines what kind of action we are going to perform the the first action is going to be the actions forward slash checkout at V2 okay uh you need to write exactly the same word in the uses and then I'm going to write with keyword this part of code is actually required for the commit link configuration that I have added so I'm going to write fetch depth column 0 okay and what it's going to do is it's going to fetch all history for all the branches and tags which is actually required by commit L okay so now after that I'm going to add the name okay so inside the name I need to use the node so I can write anything over here which is just the name okay so inside this name I'm going to write user es so actions slash setup hyphen node at V2 all right so indentation is very important so let me fix some indentation so I have actually um added it here all right okay so here this is what I have added and after that I'm going to add with node version 20.9 point0 this is what uh I'm currently using in my local system as well so once that is done I'm going to be defining another name so this name is going to have the install depths install dependency I mean to say so this this is going to run npm install okay from the scripts file make sure you add the small I over here okay then what I need to do we need to run linters okay so this is going to run npm run lint and similar to this uh we need to run the format command Okay so run for forits so this is going to run format all right so once that is done we need to finally set up that uh commit link so I'm going to write check commit messages and then I'm going to use something these uses values are predefined there are developers who build these lines so depending upon what kind of actions you need to perform you might want to use uh the values so uh for actually checking this out this is the value which I'm going to write so commit lent hyphen GitHub hyphen actions and then at V3 okay this is going to have the WID and then I'm going to define the config file which I have created and the config file which I have created is commit link. config do CJs okay so let's save this file so there are some prettier uh issues because of the indentation so I'm going to fix that up so this is fine uh what we need to do is I need to Define it like this so I'm going to write uses and then within uses I'm going to define the node variant like this okay and uh this name should be over [Music] here okay this seems annoying but we have to do it all right so there are no errors currently in this ci. yml file I'm not going to go to the uh deployment yet so we are just going to push the code now and see what happens so I'm just going to press up Arrow get add and uh then let's add the correct commit message again the same one and then I'm going to push it to origin main now let's go and uh let's refresh this page for this repository uh let's go over here let's see if it picked up yes it has picked up let's click on the actions and now you can see that it has has picked up ci. yml file and uh there seems errors so let's go what is the error to setup job there is an error for setting up a job so I'm going to open this up unable to resolve action uh this one so let's verify if I enter the correct name so this is go forward slash comment lint GitHub action so this is action actually not actions because I picked this up and there is a mistake so I'm going to push the commit message again so get push origin main is going to push it again now I'm going to refresh this page again actions so it's going to run that continuous integration again now I hope that it is going to pass so let's click this out so that we can verify everything what what's happening so it's currently pulling this in this uses which I have written so you can see that uh it's currently loading so let's wait for it until it completes the continuous integration process all right so you can see that it has completed all the checks which we added over here using the names and there is a green tick icon means that our continuous integration is successfully passed in our GitHub actions so before moving forward I just want to request you guys that this is my WhatsApp Channel with the same name as my YouTube channel if you can follow this channel it will be really encouraging for me and I provide latest updates and all the tips and tricks related to programming in this WhatsApp Channel you can get the notification quickly okay so now I'm going to configure The Continuous deployment now so in this project what GitHub suggest us is to create a file with the name deploy do yml so I will hit enter currently let me close all of these files okay so this part is very very important uh because everybody wants to automate the deployment for their project so first of all just like uh I have done in ci. yml what I'm going to do is let me copy everything from here instead let's start off by copying the name continuous dip deployment all right so let's come over here and then I'm going to write copy the on so when the deployment should start working so I want to add I want it to build my project first and then I want it to deploy after that okay so this is going to be uh for the jobs actually okay uh then Above This I need to Define when this build and deploy Lo needs to be triggered so on and uh after that I will be writing the push and then I need to provide the branches so let's add the main branch only okay we can replace this Branch with any other Branch uh for against which we want to build our project and start triggering the deployment okay so below this I can run runs on and again I can write ubun to latest okay so below this I can write steps uses and U here I can simply uh write actions forward slash checkout at V2 okay so after that below this I'm going to write with enter I'm going to write persist credentials okay this is going to be the false then I'm going to install the node so I can simply copy it from here so use node so let's copy the whole stuff so I'm going to paste this let's let's bring it back all of these things as well all right so these are set up it will install the node first of all and it's going to use this action and then it's going to set up the node variant for this and after that I'm going to install the dependencies so we can also copy it from here so let's add like this and like this we can add a space uh for better understanding and for better reading and after that what we need to do actually if I open up the package.json you can see that there is already a script called build which we can use so since we uh want to build our project uh we want to run this command okay so I'm going to copy this let's add over here so this has been added now I'm going to change the name of it so build then I'm going to run npm run build what it's going to do is it's going to build our project and create the static files for our project because GitHub Pages only works well for the static projects when you have a project like nextjs that have server side rendering that it's not recommended to deploy your project on GitHub Pages even on paid versions as well you you might want to use Heroku AWS that's pretty much fine uh to support the serers side rendering kind of thing but react um is works well since it creates all the static files when we build our project and um uh we we have not implemented any server side rendering in our react project okay so now I'm going to add the deployment stuff over here so first of all I'm going to write the name so this is where the main thing starts so name is going to be the deploy to production URL we can write anything to it and after that it is not required actually but in some cases uh you might have uh main branch for production deployment uh you might have the staging Branch for the deployment to the staging URL you might have development Branch for deployment on the uh development URL so this is the reason I'm trying to help you out in case you have uh different requirements than me so first of all I'm going to write if if is going to check if GitHub do ref equals to colon refs SL head SL main since I have only main branch that's how why I have written main uh and after that it is going to use something which I've already got from the documentations so which I'm just going to copy over here this is something uh and uh this is already built you cannot change its name okay so this works well with deployment for the GitHub Pages now after that I'm going to give it the branch name okay Branch name it is going to be the GitHub pages so what happens is when this action actually runs uh this will automatically create a new Branch with the name GitHub Pages GH Pages actually G GH High fund pages so this is going to be the branch which contains all the code specific to the folder which will be created by this build command npm run build okay I know that it will create a disc folder and this branch is not going to contain all the folders exist in my code it is only going to contain the static files which exist in the disc folder okay so now what I'm going to do is uh let me uh give you a reference so let's say that uh let's try try this out so here uh there seems some kind of error so I need to add space up before this actually all right so I'm done now let's try to push the code and see what happens I'm going to come in the terminal and let's try to commit the code with the same commit message and uh now I'm going to push it to Main Branch okay it's going to first run the continuous integration because um it doesn't know what we have done so it's going to verify all the files and after that it's going to pick up the deploy yml now if I refresh this let's see what happens um let's click on the actions again you can see that it has actually run the continuous uh integration below and after that it has uh parallell runs continuous deployment all right so I hope that the continuous integration is going to be passed just like before but uh let's see if it passed the continuous deployment or not so I'm going to open up this particular URL so there seems an error uh let's see the deployment step and content and error process user B failed with exit Code Zero so let's debug this okay okay so let's see where we have got wrong uh let's go up this one configuration uh deploying using token configuring uh this one so there seems permission error so what I'm going to do is I'm going to go into the settings of my repository and I'm going to go to the actions I'm going to go to the general and from here workflow permissions I'm just going to check this toggle and I'm going to click save okay so now I'm going to go into the action and let's go inside it and here I can click on build and deploy let's click on that and rerun failed jobs so it's going to rerun this failed job which is failed now let's see that if it throws that permission error or not because I have given all the read and write access to it let's click on it and start uh checking out that particular thing so here you can see that it has passed all the names all the actions which we have written over here and there is a green tick sign over here great now if I click on the settings and I'm going to go to the pages and from here I'm going to select this GS Pages Branch GH Pages which is uh created automatically through this GitHub workflow I'm going to click on it and I'm going to select uh forward /root and I'm going to click on the save so once I'm going to click on the save I'm going to go to the actions you can see that it has started an other action Pages build deployment have been started let's see what happens here so if I go over here uh it's currently processing so the deployment is successful uh it is showing the green icon over here I'm going to click on the settings let's go to the pages and at the top it's saying that your site is live at this particular URL so this is the reposit itory name actually I wrote CD CD it has to be cicd it's just a repository name you can ignore that uh so if I click on the visit site now all right so currently you can see that it is showing the blank page but it has loaded the correct title uh if I open up the source and open up the app. TSX file uh actually index.html you can see that it has picked up the correct title but it is not picking up the child components for my react project uh one thing that we can do I'll come back to deploy yml file there are more things that I would like to explain you guys for learning purpose which is not required for the purpose of this video but for learning purpose those things are very important as well considering uh this if condition so I'm going to open up the white. config dots so in this particular thing I'm going to add since our homepage is not deployed on the Home Route we have this particular report repository name as well this is something which we need to write over here inside this config so I'm going to write base forward slash and the name of the uh repository then forward slash okay within this single codes so I'm going to save it and I'm going to push the code again get commit hyphen M and then get push origin main okay so I have pushed it again let's go um over here and uh I'm going to click on the actions again it's first going to uh again process The Continuous integration continuous deployment and once these are going to be successful it's going to process the deployment which we have done in our settings tab over here uh this Pages all right and uh let's see what happens so this continuous deployment is successful which is perfect and uh this will be successful as well and uh it has started deploying it on that particular URL all right so let's click on that so it's currently processing if you want to see what's happening inside it what's happening behind the scenes you can click on each of these and see all the processes it is using to deploy your website on GitHub Pages all right so I'm going to open up uh the settings now let's go to the pages let's click on the visit site now uh let's refresh it all right so we can see this component is loaded on this particular URL and we have successfully deployed our website using continuous integration continuous deployment on GitHub Pages which is perfect now lastly I want to explain few more things uh which will be helpful for you guys guys considering what requirements you need to follow so over here since you know that I have added this if condition okay uh just like this I can add another name uh let me copy this here and now uh I'm going to paste this over here as well so let's bring it back and if we have some kind of like uh de development Branch okay then we can uh actually write an if condition over here we can write the same uses action over here and uh this is going to be the different branch but uh this particular uses might not work in this particular case for making it work I'm going to be copying another uses thing over here so this is going to be this this is what I found from one of the article or you can say the documentation and uh after that I'm going to use this wi so this is what I've already written let me un comment these all right so now what it's doing is U I'm not going to push the code considering this because I don't have any development Branch yet but this is the code which you would need if you have different branches and uh this Branch needs be automatically created and then you can select uh by going to the GitHub pages and select this Branch but for for configuring all these things on multiple branches multiple URLs you need to have paid plans of GitHub pages okay I'm just giving you an idea how you can work with this again it's looking into the disc folder which will be created uh through npm run build command and this branch is going to get automatically created you can write similar thing for the this part as well uh but in in this case you had to write the only GH pages and everything would work as it is so let me quickly show you what happens if I manually run npm run build it's going to generate the static files for my project and you can see that it has created this disc folder and it has created this SS folder uh so this is the minified files okay so this should be running uh from here all right so here this is going to be deployed on the GitHub pages one more thing I would like to explain you where do I get all these things let's say that you want to deploy your site on AWS or Hoku uh this is the reference which you can refer so I'm going to write GitHub uh Marketplace you can go through it let me open this up and uh this is the GitHub Marketplace there are a lot of things that you can uh go over here if I go to the deployments and here these are all the different hosting providers which you can uh use and if I simply write Heroku over here uh you can see that it's giving us U this Heroku build and um Heroku deployment I can click on the Heroku actions and this is what it gives us this is what we can write in our deploy yml file on the GitHub actions uh so we need to use this we then need to use this one uh then uh we needs to create a new account create an app in Heroku dashboard and we need to write our email ID we need to provide the Hoku API key over here and the name of the app which we will be creating and this part of action is automatically going to deploy oversight on the uh Heroku and again if you face any kind of error you can always uh check out and discuss it with GitHub simple is that um so this is how it works this is what I refer when I need to write continuous integration and continuous def M all right guys thank you so much for watching I hope that you have learned something new in this video if yes do subscribe my channel and like this video in the next video I will talk about configuring continuous integration continuous deployment in next js14 project so this is going to be very important video to stay update do subscribe my channel and hit the Bell icon as well so you get the notification for upcoming videos

Channel: Programming with Umair

Views: 1,189

Keywords: ci cd pipeline using github actions, github actions, react.js ci cd, github, javascript, eslint in react ci, pre commit in react js, husky in react js, lint staged in react js, react js project with prettier, configure ci cd for react js project, deploy react js project on github pages, automate workflows using github actions, create reactjs project with vite, github workflows ci and deploy, github pages for custom domain

Id: T1sV7D418dY

Length: 53min 20sec (3200 seconds)

Published: Mon Dec 18 2023