Category: GIT and GitHub

use of .gitignore to ignore a file or folder when you already pushed it to remote version

Post author By Fran Prieto
Post date

Let´s asume we have a basic angular scaffolding with a test-folder added. You can find and download it on my github here

As we see, once we create an angular project, it usually initializes a git repository, and node_modules folder is added to .gitignore by default. If we use visual studio code editor, the files or folders added to .gitignore are colored in grey.

Note: an empty folder will be nothing to git. That means, it has to contain at least one file in order git considers it has something that can be pushed.

This way, our remote version for this local project will be like this. No node_modules folder is pushed because it is specified on our .gitignore

But now we realized that, for some reason, we don’t want “test-folder” to be on our remote repository on github anymore; but we still need it on our local version, so we can´t simply delete it.

An option is add it on our .gitignore file

There we find the already ignored files by default, for example:

So, everything should be as easy as adding our test-folder to this file and the problem should be solved…

Unfortunately it is not so easy.

Despite you add this update your .gitignore and push the changes, test-folder will still be on your remote:

The thing is, .gitignore won´t delete the ignored files or folders from your remote repository if they are already there.

To achieve what we want, once the folder or file we want to ignore is added to the .gitignore file, we should move the folder or file we want to ignore outside of the project, and then add, commit and push new changes to the remote.

First, we will move it outside our local project

Once we add, commit and push changes, we can see it also disappeared from remote

Right now, we can move again our test-folder inside our project:

Did you notice? Despite we added the folder again, now the master branch acts like nothing new is added; that is because the test-folder is on the .gitignore file.

To test if it works, we will make a change on any other file, to push changes into the remote.

Something simple, for example change the site title on the main component of the app

Now you can see, after adding, committing and pushing changes, the test-folder has been successfully ignored.

EDIT: When you try to push changes, you could see something like this:

As explained here, that can happen if you made some changes on the remote branch which are still not done on the local branch. Foe example if you deleted already existing files on remote and added them to .gitignore on local branch.

You have 2 ways to solve it, as pointed on the link:

import new changes from REMOTE and merge it with your code and then push it to remote.
You can use this command to force changes to the server with the local repository (). remote repo code will be replaced with your local repo code.
```
git push -f origin master
```
With the -f tag you will override the remote branch code with your local repo code.

Tags tips, tools, visual studio code

GIT and GitHub

How to integrate GIT + GITHUB on your visual studio code, part 2: add a local GIT project we don´t have on our GitHub

Post author By Fran Prieto
Post date

So, we come from here and we will learn now how to put one project we have on our local machine, and add it to GitHub, then we can start sync both.

On the official github documentation, we have a good article talking about it::

https://help.github.com/articles/adding-an-existing-project-to-github-using-the-command-line/

This is a very useful picture with the steps:

The git bash is a command line toolavailable when you install git, but I prefer to use Visual Studio Code. So, instead of step 2, we will open our project with VCS, where we have all the subfolders, files…

For the example we wwill use our old friend HTML 5 HERALD basic template, we can find here.

We see a basic structure folder/index.html and nothing more

Now, opened the project on VSC, we will open the integrated Terminal this wonderful IDE has, to do that go to view/Terminal

Now, on this shell, we will execute the git init command mentioned above.Sorry but I can´t get a better image. However what you can red there is what the init git command does: create en empty git repository, aka, a project which now is able to be version controlled.

As we said on the first article,we now have some directories and files which have not been added to out repo (remember? git init creates an EMPTY repo and the changes, as said on the first article, must be added and commited before sync; before you add them the will appear with a green “U” which means untracked file, not added to the repo). that will we made with the git add . (dont´t forget the point in this case) command.

git add .

Maybe you have noticed that git add . does exactly the same as the + icon we explained on first article; actually they do the same but is better you learn the command way in case some day you use another shell, terminal or IDE. And yeah, sometimes whern you execute it, nothing happens apaprently, no message to tell you changes have been added. I think there is a way to check the changes added and ready to commit but honestly I don´t remember now.

So, with our added changes ( the green “A” -added- appears now instead the green “U” -untracked-), it is time to commit the changes, preparing them with a message to be “launched” to the remote Github repo (that´s how I see it at least 🙂 ).

Again, we won´t use the thick symbol like on last article to do it. The command version to do a commit would be

git commit -m "message-to-describe-thechange"

We can see result is just the same

Now probably you will have to set the remote repo URL, because otherwise GIT doesn´t know where it is!

So now we will look for the remote URL like explained on first article (just copy the url of your project on Github), and we will set it as remote repo URL. this way, with git remote

git remote add origin REMOTE REPOSITORY URL

Here, like it happened on first article, maybe you should give your github credentials in order to have permission to sync repo.

Last step would be push the changes to the remote repository, with git push command

git push origin master

And here we have!

Hope it helped you. Maybe you have observed we made here many things we did on first article with command line instead of VSCode Icons. May is better this way, as said before.

GIT and GitHub

How to integrate GIT + GITHUB on your visual studio code, part 1: Clone a github repo to our equip

Post author By Fran Prieto
Post date

If you want to work faster and more comfortable, and you use the popular Visual Studio Code would not be nice if you can sync your project with Github?

Let´s see how to do with some easy steps, depending on if we want to do.

We have 2 options:

-Cloning and sync an existing GitHub repo to our local equip

-Uploading and sync a local GIT repo which still doesn´t exist on our GitHub

On this article we will see the first option. The second one will be for another article.

IF WE HAVE NO LOCAL REPO (CLONE AN EXISTING GITHUB PROJECT TO OUR EQUIP)

Install Git on your equip if it is the first time you do it.
Create a repository on Github. For example I will create the repo for the new REST API I will create with slim 4 (tip: to choose a license, it seems if you select no license, the default copyright applies, so it would be more restrictive than choosing an specific license, you can read more on official GitHub license guide).
Now we will have to clone the remote GitHub repo we have created, to our local equip. To do that, we go to our Visual Code and we select view/ command palette. There, on the dropdown menu, we select the command
```
git:clone
```

Now, we must enter out GitHub repository URL

4. After that, we will be asked for the local route for the cloned repo.

5. Is done!

Now we will see how to make changes on our local repo and upload them to GitHub repo. I think it is usually three steps:

add changes to repo
commit changes
sync changes.

So, to see how it works, let´s make any change on our local, for example, adding an index.html (tip: you hve a good HTML 5 basic template here).

Can you see the marks? The green “U” means it is an untracked file, and the number on the branch symbol shows us how many of them we have. Untracked file means it has been still not added to the Git repository.

To add it to our repo, we just click the + symbol, then a green A will appear, that means the change is added to our repo

Once you have done, you should be able to commit the changes (prepare them to be uploaded later); to do that, simply select the branch symbol, enter a message and click the thick symbol

WARNING: On this step, when we try to upload the changes, it can happens that GIT asks us who the hell we are (our credentials). Something like this:

Then, enter you github credentials there.

Also, probably a window will be opened where you are asked to stage the changes before comitting them. Select “always”:

Once that is done, you will see you have one (or certain) commited changes, ready to be sync.

Now, we just click on the “rolling arrows” to sync the changes. It will make a push and pull to the origin/* (where * can be “main, “master”…) branch on the GitHub repo

And now, as you can see, we have on our remote repo the new file we created on local. Once you know how to do, it is very fast to stage, commit and sync the changes

PD: Remember this blog is more a way for a noob to learn and brush up things than anything else. As I know maybe I am not the best teacher due to my lack of experience, or maybe I have explained something wrong, I will give you another link where it is explained. However I hope it was useful to someone as it was for me.

https://azuredevopslabs.com/labs/azuredevops/github/

On another article I will talk about the second option: How to add a local GIT project to GitHub.

Tags tips, visual studio code