#03 - Angular Tutorial - Creating a repository on Github and pushing the code

hello everyone my name is Paulo Alves and on the last videos I explained the app the idea that we are gonna build on this series of videos we also created a project with the angular framework and I had an overview about each file the structure and the folders of the project that we'll be creating so right now the project is running and it looks like this it's running only on my machine right today we are gonna talk about GitHub and we are also going to upload our project to GitHub so all of you will have access to the code that's one of the first things that you should be doing after creating your project at least that's the way I like to work create the project already push it to GitHub and to a new repository and the next step that you're gonna do on the next video is to publish it on the internet so you all will be able to access this thing here um just by going to your browser and typing the URL alright so let's talk about GitHub so if you start working for a company you probably most probably I hope at least will be using GitHub as a code hosting platform so you can do Version Control and you can collaborate with other developers by Version Control I mean that your code will have multiple versions right so the files are growing and those are the multiple versions of each of the file for example and collaboration between developers mean that those other developers will be able to take a look at your code make changes propose changes and so on so GitHub allows us to work from any place in the world in the same code so today we are going to be talking about the essentials of GitHub what we're going to be doing is we're gonna create a repository we are going to clone that repository to my machine so I can make changes to it we are gonna commit the code changes in my machine and then after that we'll push those code changes to the repository okay so let's start doing it right now so I'm gonna go to my account on GitHub which is this one uh that's my name here that's my account Paulo rsaf so if you wanna find me you can just come to Paulo rsaf and then you'll find my GitHub account that's me um so let's do it let's create our first Repository not our first because I have a lot of them let's create a new repository so I just clicked on that green button and now we can create a new repository here I will call this repository we have to give it a name so I'll call it expenses control angular good now we know that it is available I'm not going to put any description I'll leave it public and so everyone all of you can see it can see the code and can download it to your machine and I think that's pretty much it let's create the repository alright so the repository has created this is the URL to access the repository it's the same one here and we have some instructions on how to clone this repository to our machine and also how to commit how to create a branch how to also push the changes to this repository so other other users other developers can see our code this repository doesn't have any code yet and in order to send code to it I will have to clone it to my machine so in order to clone it I'll just click on this button here to copy this URL I'll come to the terminal and I will set I will type the command git clone URL of my repository but before being able to do that you actually have to install Git You can just come here to the git page and download it and it's pretty simple so basically next next next install so all right let's clone this repository I will click enter and the cloning starts it was pretty fast because there is no code inside of my repository yet you can see it here you appear to have cloned an empty repository yeah I know that so this action created a new folder here called expenses control angular so I did a little mistake here I should have uh made it put the the well you see let's go to the the folder here and this folder it has invisible a hidden folder which is this dot git this dot git folder has everything that allows us to connect to git and to do the version controls and everything so instead of having it here instead inside of this folder that has the name same name of this folder I'll just copy bring it to here let me copy and paste it here yeah replace and now I can remove this it's not necessary anymore all right you can just copy and paste and that's it now I you just delete that it's all right okay so now our code um our project is linked to our repository in git in GitHub and you can see here this Source control tab in Visual Studio code before before I cloned the repository it had like four here I think for changes and now it has 26 and it has 26 because that's the number of files that are different from what we have here in the repository which means basically all files right okay so we created a repository we cloned it now the next thing we have to do to send our code to the repository is to do a commit right so I'm just gonna select everything I'll click on this plus here so by clicking on this plus it basically adds the code of these files to the a to the ready to commit State let's say and now I will just commit um let me just give the comment comment here I could just put a comment here but and and click on this button here this check and it would commit but first time let's do it by the command line so I'll tell git to commit with a message with a comment all my files and this comment will be um Kickstart let's say so I'll click enter and you can see that all the files were committed and they are not here on the changes anymore but be aware that committing code doesn't mean that we sent the code here right to just I will refresh it and you'll see that there is still no code it's just those this basic test from text from GitHub so committing the code is basically saving your changes to the local repository which is this folder here and now all those files they are in the local repository so they are not shared with other developers as I just said to you they were not pushed in order to have our code sent all these files sent to GitHub I need to do a git push comment so it will push all the commits I did to the repository in GitHub and that's it uh 100 pushed so if I refresh this page we'll be able to see that the code is now here there's also some comments about the project which are in this readme file I'm just gonna leave it like this um it doesn't matter I I don't need to change it right now right so yeah now if you come to this URL if you come to my GitHub and then you find my repository you can just do the same steps that I did you need to clone the repository and in order to do this you come here to this green button and click on this copy button and then you can do just the same thing that I did before which is a git clone and the URL now when you do this let's just do it when you do this it's cloning everything so it says here cloning into the expenses control angular folder it's here it created a folder with the same name of the Repository got all the files and here we are it's everything but in actually in order to use this you can see here that inside of this folder we don't have the node modules folder right just to remind you not modules contains all the libraries you need in order to run the project so in order to install those libraries you need to go well you need to go inside of the project and type npm install so to install all the libraries and then after that you'll be able to run the project with the npm start command so let's do it I'll just stop this the the main project here and all right let's wait a bit until it's completes that's done so if I run npm and npm start it will start the project um just like here it will be basically it's the same because it's the same code right so that's how you can download the code come here to my repository copy the copy the URL and do a git clone then you install the modules the node modules npm install and then npm start and you have the code you have the project running on your machine let me delete this because I don't need it all right so we just talked about the essentials of GitHub we created a repository we cloned a repository we committed some code changes to our local repository and then we pushed these code changes to the remote repository there are many other things commonly used in a lot of companies like creating a branch or merging the code or rebase in the code creating a pull request but we are not gonna do any of those things here in this course because of two reasons first reason I am the only developer so I don't feel like it's necessary to create a branch or to merge the code or to rebase or to create a pull request for myself to validated the code makes sense right so we are not going to be doing this the first reason the second reason is that is because I prefer some ideas some technique called trunk based development which is basically you don't have branches all the code lives in the main branch which is main here is the main branch and then you can maybe have some short-lived branches and this is proved to be more to be more agile to be faster and to be better than having branches and that's it in the next video what we are gonna do is to publish our app in the web using Firebase hosting after I do that you'll be able to access the app from your computer or from your phone just by coming to the URL and inserting the URL of the app and that's it for today so see you on the next video

Channel: IT with Paulo Alves

Views: 6,636

Keywords: angular, real project, angular tutorial, angular tutorial for beginners, angular real app, build real app in angular, what is angular, programming in angular, web development, programming, angular project, angular material, angular overview, angular advanced project, angular course, frontend, learn angular, angular files, angular structure, angular cli, github, git, git tutorial

Id: Qvb2KqDyPk8

Length: 12min 29sec (749 seconds)

Published: Mon Jan 30 2023