CI/CD Pipeline in Next.js 14 with Github Actions using Eslint Prettier Pre-commit | Deploy on Heroku

hi guys welcome back to another very important video on nextjs 14 using App directory in this video I will be creating a new nextjs project from scratch and I will show you how we can configure our project with continuous integration and continuous deployment so this is the project and this is the repository I've already tested and it passed through the continuous integration if I open this up you can see that everything is past continuous integration the linters format commit message formatting pre-commit husky lint stage all were gone through and everything is passed through continuous integration because my project is deployed on GitHub okay so I will be using GitHub workflows GitHub actions to process all these things after this I will show you how we can configure our project with the continuous deployment so you can see that uh if I go back everything got passed uh this is let me go back again let's go to the actions and if I click on build and deploy and if I click on deploy over here you can see that it installed all the required dependencies if I click on the build it processed the build then it deployed our application to the production URL and for production URL we can choose any platform we can choose GitHub Pages we can use AWS we can choose uh Firebase as your Hoku but in this video I will be using Heroku platform and uh if I show you this URL I deploying my next yes project on GitHub pages but GitHub pages does not support Dynamic websites that include serers side rendering pre-rendering uh static pre-rendering Dynamic pre-rendering that's why it did not load up all the fancy UI stuff which are added by default in xgs homepage this is the URL for the GitHub pages and this is the public URL which I have deployed already I've tested it on my Heroku uh platform and everything works well so the reason I've not built any app in in nextjs because this tutorial is all about cicd if you want to learn what is nextjs what are server components what is client components then let me show you that I have already created 40 plus videos on nextjs 13 nextjs 14 covering up all the crash courses Basics to Advanced theming uh State Management System Authentication authorization building projects blog apps e-commerce projects and all these things you can check out my playlist of nextjs 13 or 14 or other playlist as well if I open up the playlists and uh these are all the playlists I have you can learn of all the Advanced Technologies I have created and uh one more thing I want to show you if I open up this playlist for the docker Docker is pretty much relevant to the uh cicd okay so you can see that I've already created this uh video on cicd Pipeline with react but in this video I have actually deployed react application on GitHub Pages because a react generates all the static files when the build process gets completed and that's why I have chosen GitHub pages to deploy our react application all right and uh I would suggest you I would highly recommend you to learn Docker as well I've already created four videos on Docker configuring nextjs with Docker configuring full stack M apppp with Docker configuring react app with Docker and if you are pretty much beginner you can watch this video Docker tutorial for beginners what is Docker how Docker works and what are the different commands so I'm putting a lot of effort you can see to create these videos for you guys so it's really uh a request for you guys that it will really encourage me to create more videos If you subscribe my channel and like this video and also I would request you guys to uh follow my WhatsApp Channel and uh in this channel I share quick updates about the tech and Technologies uh so you can get an idea and uh you will be updated quickly through WhatsApp all right so let's get back and I will be creating a new next gs14 project from scratch and I will show you each and every step that I do to configure cicd in my nextjs project starting from creating nextjs project up to the deployment in the Heroku platform so I have opened up an empty folder in my vs code and in this folder I'm going to be creating a new project so you can pretty much follow the same steps even if you are using other versions of nextjs so let me first verify the version uh so make sure that you have at least uh version 20 or maybe at least 18 version installed in your system okay so I will start writing npx create hyphen next hyphen app at latest okay and after that I will simply write dot because I want don't want to create any new new folder uh for the nextjs so it's automatically going to pick up the same folder name which I have already opened so I will go with the typescript um es lend Tailwind CSS Source directory yes um app router yes no for import Alias so it's going to download all the dependencies which are added in package.json files so after it get installed I will be installing few packages for my continuous integration like I will be configuring um es linter I will be configuring prettier uh I will be configuring uh commit lint so whenever someone tries to commit the code or push the code on the GitHub repository uh they will first have to fix all the standards that we have set for the linters and the formats and uh we can also set the comment message format as well okay so it has been created now first of all I'm going to verify if everything works well so I will run npm runev so it's going to run on uh Local Host column 3000 so let's verify if our project is working fine uh so it's looking like it's working fine yes it's working fine so let's get started and install uh different packages that we would need to configure uh linters formats and comit lters so I will write npm install hyphen Hy save Hy Dev first one is the prettier then I will write eslint hyen config hyen prettier then I will write eslint Hyun plug-in Hyun uh this is uh already done uh let's I think these are enough so after that I will be installing Husky and lint staged so this these are installed and its references should be added over here you can see this is the prer and this this is the es lint config prettier okay so once that is done I'm going to be installing few more packages so npm install hyphen hyphen save hyphen daav Husky and lint hyphen staged all right so I'll hit enter it's going to be installed as well um and uh I think I'm missing one more package so there has to be config prettier and plug-in prettier okay so this is the config prettier let me verify uh yes I've installed eslint config prettier I need to install eslint plug-in prettier as well so I will be adding over here so I can write all these packages at once uh I'm just showing you separately installing these uh plugins so now eslint hyphen plug-in hyphen prettier so I'll hit enter so this will be installed over here as well all right so all the required packages are installed I have not yet installed uh commit lint which I will be doing uh later on so first of all I'm going to open up this es lint rc. Json file okay currently uh let me explain you what is es linter actually it forces us to fix the indentation of the code uh and all the rules that we set in this files um that so that all the team members who are working on a particular project including me uh to follow the same coding structure uh that has to be consistent from all the developers and now you might be confusing that we can configure the plugins uh in vs code that can actually Force us to make uh keep on following these L changes uh but the thing is that uh not every developer will be using vs code and I might not be using vs code later on um um in my project and I sometimes can forget installing the uh plugins in vs code so uh to to avoid all these risks we have to configure continuous integration and nobody should be able to commit or push the code without following the linters formatting standards that we have set for our code in our project so this part is very very important so first of all in this I'm going to be setting up few more rules So currently there is only one rule set I will be adding few more rules in order to add that I will have to add an array so I'll be just copying all these things so this were already added I've added eslint recommended then I've added this prettier then this is the next okay and after that uh since I've installed a prettier plugin I will be adding the plugins within the array so this is going to be prettier all right so after that I will have to set the rules rules can be any number of rules um in a real world like a production level big projects that I've worked on U sometimes I set the more than 50 rules in this particular object but we are not building the nextjs application uh crud app or e-commerce app that is a different topic you can learn it from my playlist of nextjs um I'm going to be setting only one rule and this is going to be the prettier hyon prettier and then uh you can always follow prettier documentation official website of the prettier to see what are the different rules available over here all right so it is it will force the prettier standards and rules in my code okay wherever I'm going to be writing all right so this has been set up um I'm going to close this file now I'm going to be creating a new file so this is going to be prettier RC all right so then I will be creating another file this is going to be this is not required but I'm just showing you that this is what we can create just like the git ignore we can add the uh prettier ignore as well so that whenever the prettier standards are set or enforced in our project it should not include all the folders which are added in our project okay okay so I will be adding these two files next which will be which is the build folder for the next GS projects this is the next so I don't want to enforce or any kind of rules uh because these are the minified files and I don't want to enforce the package log file in the prettier so these are added you can add more files if you want I'm just going to close that okay so once that is done I'm going to be adding the prettier RC so I will just be adding few standard and rules which are recommended by the prettier documentation you can always check online articles and yeah you can always ask chat gbt as well so these are some standards um so we can uh you can it these are like always already meaningful what these are doing what these will uh restrict us to write the code accordingly okay so let's save it and I'm just going to close this file so once that is done I'm going to open up this package.json file so if I go up you can see that this particular lint command is already added uh I need to modify this command to only enforce the coding standard within the source folder not the outside of it okay but if you have some more folders you can uh also add those folders over here uh so I'm going to add the lint fix command as well so if there are any errors related to linters um the developers can actually run lint fix command to fix all the uh errors then I'm going to add the format command Okay so let's first modify this particular uh lint command okay so here I'm just going to remove everything I will be using the es lint so let me copy paste that command I hope that you can pause the video and write it down if you are building while watching the video so es L Source you can write dot here so dot means include everything every file every folder every nested files added in our project I don't want to do that I I only want to apply these rules within the source folder and within the source folder it's going to go through all the files that has extensions TS TSX JS and jsx and after that these are some um uh these are uh some uh flags that uh you would need to write okay and after that I will be adding the lint fix command so if my pre commit if someone tries to commit the code uh they face some kind of Errors like the intend is wrong you are missing the semicolon you have couple of extra Lines within the code which is not recommended which makes the code looks really bad uh then they can write run this command lint fix and this is going to run es linter within the source folder with these extension files and it's going to run this flag and it's going to fix almost 99% of issues some issues that it recommends this command uh you will need to manually open up that file and try to fix that issue but most of 99% of the linter issues are fixed with this command okay and one last command that I would like to add is for a preteer formit okay so let's add that and this is going to run prettier uh right is the flag and it's going to go through all these files HTML CSS you also might want to add scss files or sa CSS files or other files as well so that it can format the code according to the rules we have set in this uh this file the prettier RC all right so once that is done we can manually run these commands before committing and pushing the code but yet we need to configure over code so that if we forget to run these commands and if we try to push the code then it should enforce us that we forgot to run these commands uh you need to fix these issues so in the uh below I'm going to add Husky and lint stage pre-commit rules that will enforce us before we commit or push the code but before I want to initialize my project with Git and I want to push the code the reason I'm doing it at this time because I want to show you that without configuring pre-commit in my project if I commit my code it will not pass through all the linters standards that we have added over here and all the configuration files that we have added so first of all I'm going to go and create a new repository so let's come here I'm going to add nextjs 14 cic CD uh you can name anything and um I want to leave it public uh you can make it private as well uh but uh there are few features of GitHub that uh does not work uh on the private repository if we are on the free plan so that's why I'm using public uh repository uh it's up to you uh which whichever you want to go with I won't be selecting any of these because these files are already added in the project so let's create this repository after that I will be following the steps which are showing over here and uh I'm going to commit first of all so here I will be adding all the files in the git and I will be committing with the first commit I will hit enter so if I commit these things you can see that uh it has actually uh not passed through this linter lint comit uh formater because I've not yet added pre-commit Hooks and now I can add uh the main branch let's add that like this and then I will set the origin for the URL of my repository so I've added that and then I can copy this command to push my code on the main branch of my repository so if I come here now if I refresh this page you will see that all the files of my nextjs project are added over here now let's come to package.json file and inside it I will be adding those hooks so first of all let's add the Husky which I have uh already installed at the start of the project and uh if not you can install it like npm install hyphen hyphen save hyph Dev Husky and L stast now I will be adding a hooks key and inside it also I need to add comma over here and after that I need to add hooks I can add hook for the pre-commit pre push so I've added two of these things so I will be testing the pre-commit so pre-commit is going to run lint staged hook so this is something which I yet need to add below so I will be adding it like this so link stage is going to go through all the source files which are added in the source folder having an extensions of TS TSX JS and jsx and it's going to run npm run link npm run format so it's going to run these commands so these commands are referencing these values I hope you have an understanding about that and uh here it will not still run through I need to add the files that uh should uh exist to run these pre-commit so in the terminal I'm going to run few commands first of all uh I've already installed Husky and I have already installed lint stage npm packages up above that you can see these are the two packages I have installed now I will first adding npx Husky and then install I will hit enter so it's going to create a new file in my project uh husky and inside it it has added the git ignore uh you can add anything inside it and it has created this very important file husky. SSH this is the bash uh command file and uh if you have an understanding about this sh files you can modify it but in our case we don't need to modify anything inside this file okay and after that we need to add the link staged file as well means the we need to add a hook for pre-commit we can add a hook for pre push as well if you want uh but I will be adding it for the pre-commit so I'm adding one command in my terminal hope you can uh pause the video and write it down so npx husky add. husky SL pre-commit so it means that it's going to create a new file with the name pre-commit within the do husky folder and then uh I'm going to add this command this inside this uh pre-commit file so I will hit enter so you can see that it has added this pre-commit file and inside it it has added the npx link stage whatever I added in the double codes in my terminal all right so now things are configured and uh in the terminal now I'm going to first of all check so these are the files got changed now I would like to commit my code and push the code on my repository but before doing that it will not actually work the reason is that I need to make changes in one of the files in the source folder because these two commands linters and formats work for the files inside only source folder so I can make any file changed so I can open up page. TSX um let's add some constants so here inside this text uh let's add something like hello word okay so this is added now in the terminal if I check get status you will see that this file exist in the source folder now let's try to commit my code so get add all now I will be committing my code so get commit hyon M um I will name it second commit and I will hit enter keep watching that it will run linters and the format so I'll hit enter and now you can see that it is going through the source folder and also it gone through it did not gone through the Run format yet because it found es lint errors in one of my code so it is restricting me that I cannot commit the code unless and until I resolve these issues I can open up these files lot. TSX file or any other file and manually fix these issues uh but you know that we have actually written a command and I hope this command is going to fix 99% of the issues that this lint command shows up now we can manually run npm run link column fix I will hit enter so it's going to fix those commands Okay so currently it has fixed all of these issues if I manually run npm run lint uh it will show only one error now I have tested it manually this is something which is not automatically fixed by lint colon fix I have to manually go ahead and fix this error so let's open up layout. TSX and you can see that this is something um it this is the error it is showing so I need to import the react class so let's import that infect up so import react from react all right so this error is gone now let's save it and now let's try to run npm run lint so there are no errors now okay so let me clear this out let me add it again and now I'm going to commit it again now by running the same command so I will hit enter it's going to run through linters linters are passed formats are passed and there are no linters or formatting errors in my code and this configuration actually working fine through the pre-commit and the Husky configuration that we have added now I can simply go ahead and push the code to the main branch all right let's go ahead and and verify that if it has actually pushed yes it has pushed this do husky folder means that our changes are over here all right so now what we need to do is we need to add the configuration for the commit message rules because this is very important I don't want any of my team members including me uh to add some uh uh some irrelevant commit messages irrelevant length of commit messages so I want to write any kind of rules okay I will show you three three rules that each commit message should be at least 20 character longs it should start with the capital letter it should end with the period or DOT sign okay but you can add uh in the configuration file uh any kind of rules that you want to set for yourself and for your team members so they can follow these rules before committing the changes so let's install one npm package called commit lint so I'm going to paste this line you can copy it by pausing the video so npm install hyy save hyund Dev at commit lint SL curly braces CLI comma and then config hyphen conventional close the curly braces so these are two packages starting off with at commit lint all right so I will hit enter so once it's getting installed I just want to let you guys know that if you want any kind of development services from me then you can contact me on LinkedIn I've given the link of my LinkedIn profile in the description of this video so these packages are installed and it should be added in the dev dependencies over here so where is that yes so commit link CLI and commit lint config conventional now I want to run commit lint on the pre-commit configuration that I have already added okay so for that I'm going to be adding uh one new file inside. husky folder and for that I'm going to be adding one command in my terminal you can again pause the video and you can copy it in your system so npx husky add. husky slomit message and then I'm adding the single code npx uh hyphen hyphen no install commit L edit and double code dollar sign one double code and then uh I don't need to actually add this thing the the last thing that was showing so I will hit enter now so now it is going to create this commit message it is going to add this particular line which I added in that command in my terminal all right so one last thing I need to do to make it work is I need to add one configuration file to set the rules for the commit message so for that I'm going to be creating a new file and it should be with the name commit uh commit lint do config do CJs okay I will hit enter so now inside this file it should be adding the module. exports equals to this object first of all uh we can import the built-in rules that are set by commit link but I don't want to import the built-in rules you can check out its documentation so to ignore the buil-in rules I can simply add the empty array after that I need to add the rules within this object so there are three rules I want to set first of all I need to name these rules so these are the name rules which I've added first one is going to set that the length of commit message should be at least 20 um header case start with the capital letter which I need to set yet using the rejects and then end with the period okay so after that I need to add add plugins which will be referring to these rules which I have set Above So This should start off with this and then array and inside this array I'll be adding an object okay so in this object I will be adding two rules first rule was already set with the 20 letter next rules I need to set it like it okay so these two rules this these keys are refering to the values which I have set above so you can always check out the documentation and going through different articles or uh this this regular expression I got it I asked chat GPT to generate this regular expression and it helped me out so this is how I got it and this will be the error message shown if I'm not following the rules for starting any commit message with the capital letter and this rule uh is going to give me this error all right so let's save this file now I can test it I don't need to do anything else so let's close um all of these files um this one and uh this one as well all right so in the terminal I'm going to write clear so that it becomes clear for us and now um before actually let me see So currently it's showing these two files got changed and these two files got changed uh be for it to actually trigger all these rules which we have set in package.json file in the Husky we have to have files changed within the source folder as I've already explained you so for this I'm going to just remove hello word which I added okay so let's save it and now let's verify that yes this file got changed now these rules will get trigger so I'm going to write get add and now I'm going to make mistakes okay I'm simply going to write hello word it is not following any any of the commit message rules uh that I have set using commit lent so I will hit enter lters are passed uh the formats are passed but the this is not passed and these are the error messages which are showing up I need to fix it in the commit message all right so let's fix it by adding the dot and by adding the capital letter at start I will hit enter it should fix couple of issues but it should give me the error that uh it should be should not be shorter than 20 characters all right so let's fix that hello word I am configuring my next js14 project so I will hit enter now it should fix all of the three rules which I have set all right so our commit message is successfully done and we are successfully following the rules for our project um and now let's push our code so let's push it onto the main branch I'm going to push it and it should be added over here let's verify that let's refresh it um click on let's yes so commit L.C config.js file is added so it means our code is successfully pushed all right so we are done with the local setup now we need to set up continuous integration using GitHub workflows GitHub actions and uh do subscribe my channel guys if you have learned something new up till now so for cicd let's first configure continuous integration so inside my project I first need to create a new folder you cannot change its name since our repository exists on GitHub if you are using gitlab bit bucket or any other repository hosting provider you might want to use any other folder name or the file name uh that they recommend so you need to research on that so now I'm going to create another folder within GitHub we cannot change uh these names which are suggested by GitHub so if we push over code this will be read by GitHub automatically do GitHub and the workflows inside it what GitHub recommend us for CI for continuous integration is to create CI file. yml and uh this file name again might be different for other repository hosting providers okay so inside the CR which will be automatically read by uh our GitHub first of all we need to add the name okay and we can write anything over here all right so after that we need to trigger an actions what actions I want to run the continuous integration on it can be on push it can be on pull request uh and we can select specific branches uh that will be used to run the continuous integration so first of all this is how we can add a comment it doesn't uh make any difference it is just for our understanding on means that this CI configuration should be run on push and pull request on any branch on our repository and just for your understanding if you want to specify different branches uh you can write this code on push you can write an array of all the branches and on P request you can write a array of all the branches okay so it's giving few errors the reason is that I have to add jobs so I will be adding jobs you can see that these errors are gone now in the jobs first we need to build our project on the GitHub actions and one of the most famous way to build the project is to write build and I need to write runs on and uh I usually write Ubuntu latest whatever the latest version of Ubuntu I write it over here okay so after that I add steps okay so then I add uh Python and we need to use uses this keyword is very important uh and whatever value we set within the uses uh are predefined in GitHub actions you need to refer the GitHub Marketplace to know that which GitHub action uh we can actually choose okay so first step is to that we need to check out with the action um and it it might have a different varsion uh you can refer the marketplace after this uh we can actually write with okay and with it we can write fetch depth column zero this is particular thing is actually required by commit lint if we don't write it it will throw an error that uh we cannot read the commit message form it okay now uh we have to use another name now these names are very important we can write any values inside it so first of all we need to configure node Varian okay so I'm going to add the node Varian over here so in the name I have written this and uh after that I'm actually using uh this thing uh this action for the setting up node and then I'm using using this uh with keyword there seems an error this is uh these are some indentation errors so we can write it like this okay inundation is very important in yml files all right so these are ended and after that we need to install the dependencies first of all which we have added in package.json file okay without installing the dependencies we will not be able to run npm commands uh npm or any other linter es linter commands which we have added over here so GitHub actions needs to have all these dependencies in order to run linters or prettier commands which we have added okay so here uh in order to install uh linter we can first Define the name so we have defined the name like this just like above and then we have actually run npm install okay so after that we can run linters and formats like this all right we can write anything to it and it will showing up in GitHub actions when this process is going to run and write the meaningful names over here and these are the commands that is going to run linters and then the formats and lastly we need to run that commit message uh using commit lint for uh that configuration that we added so this is something which I've added so check commit messages and this uses again is defined by GitHub uh and uh you can check out the GitHub Marketplace so let me uh quickly show you how the GitHub Marketplace looks like so GitHub Marketplace so this is for GitHub if you are using other uh providers for repositories uh you can refer their documentations so here uh you can see if I click on the continuous integration um it's giving us uh different things for continuous uh integration so if I write uh let's say commit lint hit enter and uh you can see that it is giving us different things so let's click on that all right so you can see you can refer these documentation try different things based upon uh your requirements all right uh um I actually checked one of these things uh and got this uses value all right so I'm going to this save this file first of all let's go to this repository and click on this actions you can see that there are no actions history run before when we push the code I think two to three times okay because there are no GitHub workflow files we pushed before now I'm going to first check GitHub status yes there is only one folder so I'm going to add git add dot so all the files added uh let's clear this out now let's commit our code so let's add meaningful code this is the benefit of it we always want to add so edit capital letter edit uh GitHub workflows in my project for CI dot I will hit enter so again it's going to go through actually it didn't go through the reason is that there is no change in the source folder all right so now I'm going to push the code to the main branch all right so it is pushed now let's go to the code and GitHub folder is added over here all right now I first want to refresh it and I want to go to this actions tab and now you can see that uh this particular action is running if I click on it will see all the names that we added in ci. yml file is going to run okay so first is pull this out running node installing node installing dependencies then it should run lender formit check the commit message that we have added uh and it is going to I think past all these checks that we have added and yes it has actually passed these and there is a green tick icon so we have success ful added CI so one question you might have come uh in your mind that if we are restricting user to to follow all the linting rules or the prettier rules or the commit message rules then why are we again checking on the GitHub actions the reason is that um people can uh merge the code directly in the in this dashboard of the GitHub they can add commit messages on the GitHub as well and when they merge their code um in merge PRS in one branch to another Branch uh there can be conflicts comes in and there can be indentation errors so uh uh these kinds of reasons we have to set up CI and the CI is very important to actually go gone through all the different uh linting formatting rules that we enforce in our project to maintain the quality and standards of code in our project all right so currently we are done with the CI now the most one of the most important important part is the CD CD is continuous deployment and we are going to configure Heroku we are going to set up secrets for that so for that I'm going to be creating another file inside it so this is going to be deploy do yml this is recommended by GitHub workflows uh because uh for deployment this is what GitHub workflow is going to read when we push the code on the GitHub repository all right so let's first add the name so I will start off with writing name so I can name it build and deploy it to Hoku all right so I'll add a space then add this on I can add push and I can give the branches names I can add the branches within array or if we have only one branch we can simply write main okay so after that I needs to add the jobs okay so inside the jobs as you have already aware that we need to first set it like this uh build and deploy and runs on uh yuban 2 latest okay but in CI we actually wrote build only okay so now I'm going to add different steps now so steps and first one is the uses actions which is going to be actions SL checkout at where two okay so after that I can add WID WID I can add the persist credentials equals to false because we will be using Hoku and uh when the deployment process is going on it asks us to add the credentials like the user credentials uh of our account the the email the password so this is going to uh persist the credentials equal to false means that we are going to be using the Hoku API key for our account so we don't need to add the email or the credentials for that okay so after that I need to install node because uh again we need to install all the dependencies all right so here uh we will be adding this uh name and uh this is going to be used uh like this all right so there seems uh some kind of error so we need to add the spaces before these all right so errors are gone now we need to install the dependencies and build our project when we run our next j14 project locally you have seen that it creates next folder and the same folder is going to be used by Hoku okay so first of all I'm going to be using this name okay uh install dependencies npm install build and then it's going to build the project again uh and it's going to create dot next folder now we can actually deploy to the URL we can uh write the name any name build and deploy uh it can be production URL it can be staging URL or anything you want to add so after that uh there is one more thing that we can use we can add if conditions as well if we have different URLs for staging different URL for development or different URL for production so this is not actually required but just to show you that how does it look like um it's actually look like this okay let's add space after that like this and uh it is showing that when we are pushing the code in the main branch then do whatever we are going to write after that so if we are deploying to the staging URL we are going to uh add the whole thing again below um but this is something which I'm not going to do in this video this is the video for beginners so then again uses is very important and for deployment to Heroku I got this particular uses string from the GitHub Marketplace okay you can use this one and then we need to use with okay and what Heroku Marketplace uh provides us for deployment to Heroku three things okay so this is what I have already added over here so these are the three things I have added Hoku email this is something which we need to provide over here we need to set in our GitHub repository okay and Heroku API key is again we need to set in GitHub repository this is the app name that we need to provide which I'm going to show you how we can create that for now we are done with adding everything in our deploy yml file so first of all what you need to do is you need to open up Heroku dcom website on your browser and you need to sign up on this website with your email address it might ask you to confirm your email ID and it might ask you to add two Factor authentication as well and once you are done with creating your account successfully uh you need to click on you need to go to actually dashboard. Heroku docomo can click on this home icon and here I have already have this one app already added and you can add new apps and I'm going to click on new and I can click on create a new app okay so here I can actually name the app so next js4 Hyun cic CD you can name anything you want okay and then we can actually choose the region uh I'm going to go with the Europe So currently it will show some kind of uh option here that we need to add over card details so there are all the major Cloud platforms like AWS Heroku they ask you to add your credit card uh debit card or Master Card on their websites they will not charge you but for security purpose so that Bots may not interact with their platform they ask you to add different card details so they will only charge you if you have the live users a lot of users and a lot of traffic Stu cards coming in on your website okay for development you can add card it will not charge you anything but for security purpose they ask you to add the card details even on AWS Amazon web services as well I've already added that that's why it's not showing so I'm going to click on the create app so it's going to create this app and uh this is the name that it has given to me we don't need to do anything over here since we are using the continuous de deployment uh if we were using uh manual deployment we could use all these steps to deploy over website okay but we don't need to do that first of all this is the name okay first of all let's click on open up okay so this is welcome to the new app our nextjs app is not deployed yet this will be the URL in which our app will be deployed but this is the default UI that it gives us uh with the URL so this is the name first of all which I need to copy and I need to add the name of my app over here okay so this has been added now I need to copy this Heroku email key which I need to go to my repository go to settings and I'm going to go to the secrets and the variables click on action and I'm going to go to this Secrets tab repository Secrets new repository secret I'm going to add exact name which I have added in deploy yml file after that I need to provide my email address which I have used to create my Heroku account okay make sure you don't add any space uh after that so this has been added okay now I need to copy the same name Hoku API key and I need to add this one over here and I'm going to add it for the value we can go over here we can click on this account settings on the herok dashboard if I go down uh this is the key API key which I need to copy I'm not going to reveal it because it's on my own account you can reveal it and copy it uh on that GitHub repository over here so I'm just going to pause the video and I'm just going to copy it so here you can see that I have added both the secrets over here all right and uh we can go to the homepage don't save and uh this is the app name that we have created and we have already configured let's go inside this app and it gives us all these uh deploy matrices how many users are coming in uh and all these settings so first of all uh I'm going to go and I'm going to push my code I don't think I need to do anything else so let's try this out now so I'm going to first verify get status let's clear this out let's go up and I'm going to add this one get add and now I'm going to add the commit message so adding vid flow for deployment all right so let's add the commit message so it's going to PST this out and then I'm going to add the push command origin and then the main okay so this is post let's click on the actions now it's going to run two things first one it's automatically going to run the continuous integration I hope it is going to get passed because it was already passed that we tested before and the main thing is this build and deploy to Heroku okay so let's open up on another tab to keep on looking uh that uh what's happening it's currently installing the dependencies it's currently building this so let's see if it's successfully built so compiled successfully it it must have created next folder that we have a locally in our project all right so currently build is done it's currently deploying it so let's see guys if it successfully deploys our project or not um and I hope that it's going to deploy because I've already tested this configuration before creating this video so uh let's wait for this I'm I'm going to go over here so we can go to the resources we can see all these things that are happening in our project on Heroku Heroku we can use it for deploying the backend node Express mongodb project as well so it's quite awesome it is backed by Salesforce platform okay so let's see this one it's still deploying uh now we can see all the matrices we can see the activities what's happening so here it's all Al showing that build in progress so we have successfully synced over GitHub repository with Heroku and uh it's it's currently processing so we have this access I have the access we can add more collaborators in Hoku and we can change the settings as well for this product we can change the name uh we can add the configuration variables and all these things okay and one more thing that uh if you have your custom domain uh you can add your custom domain over here and for that you need to configure the DNS this is another topic if you might have uh purchased your new domain from AWS or the host getter or GoDaddy uh you will need to add the DNS settings uh over there and add your custom domain over here your app will be deployed to that custom domain automatically and uh you can go through its documentation how we can do that all right so let's see all right so it's showing the the green icon and uh seems like our app is successfully deployed so now let's go over here let's go to the overview uh this is the deploy Tab and I'm going to click on the open app now again all right let's see all right guys this is awesome over nexts app is successfully deployed on Hoku using the continuous deployment workflow using GitHub actions and we are done with it all right one more thing I want to let you know if you are just learning it for development uh go to this overview this Source uh where is that I'm just figuring out so metrics uh activity access and these settings uh I just wanted to show you one thing yes all right so this resources currently it is set to this uh 0.010 are expected to be charged from your account per hour but if you have tested it your app is successfully deployed you have learned how things are working uh you still want to keep it uh over here okay and you you don't want to delete the apps from Heroku platform you can click on this added you can just click on it and you can confirm it and uh it will not be live now because it will charge the $0 per hour okay and if I click on here and it will not be working anymore so nothing will be charged uh because you have learned how to deploy using cicd on Heroku platform using the GitHub repository using GitHub workflows or actions whatever you want to say all right so I hope that you have learned something new I'm putting a lot of effort building these videos for you guys do subscribe I'm just uh asking you if you subscribe my channel it will really encourage me to make more videos for you guys because more subscriber means that I will have more people to watch my videos and they will be able to learn more from my videos so next I will be creating another video on cicd and in that video I will be configuring a full stack project maybe first a backend project like node Express and mongodb and I will be deploying that project on Hoku so let me know in the comment below what you want me to do in the next video in terms of uh deployment continuous integration continuous deployment uh along with the docker configurations as well I've already created videos on that I want to combine both of these Concepts like Docker and the cicd concepts and I want to show you the whole deployment process so thank you so much for watching guys see you in the next video

Channel: Programming with Umair

Views: 1,572

Keywords: ci cd pipeline github, github actions, github actions ci/cd, next.js 14 ci/cd, nextjs 14 continuous integration, next.js 14 deploy on heroku, eslint in next.js 14, prettier in next.js 14, husky pre commit hook in next.js 14, commit lint rules in next.js 14, javascript, react, next.js 14 tutorials, next.js 14 deployment, how to deploy next.js 14 on heroku, ci.yml file github, deploy.yml in github workflows, commit message rules using commitlint

Id: JXGljLzvL2w

Length: 56min 14sec (3374 seconds)

Published: Mon Dec 25 2023