Categories
Angular GIT and GitHub Javascript

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

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:

  1. import new changes from REMOTE and merge it with your code and then push it to remote.
  2. 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.

Categories
Angular Javascript npm

Angular package.json file overview

I think this might be helpful for any novice Angular developer like me. It is important to know how this package.json works, among other things, because of possible vulnerabilities of the project.

Also it is useful to avoid a backup of the node_modules folder, making your project back up much smaller and it will allow NPM (Node Package Manager), to install all the required dependencies whenever you need it.

https://www.codestack.net/angular/getting-started/package/#:~:text=files%20and%20folders.-,package.,packages%20installed%20for%20the%20project

I also shared it on my linkedin. Visit me and tell me what you think 🙂

 

EDIT: I update with some good info which may be very helpful to you, as I asked about package.json and vulnerabilities on Stack Overflow and I received a very good answer:

https://stackoverflow.com/questions/68415239/npm-audit-force-is-not-recommended-if-you-are-not-expert-what-to-do-then-is/68416325?noredirect=1#comment120923232_68416325

 

Categories
Useful software

Useful Software: Free File Sync

FreeFileSync-logo

This little program called Free File Sync  is a very useful tool when you have to back up your files or sync then between your home device (laptop…) and an external one like a USB.

You can configure it many ways. The Way I do to ensure my work is up to date on external devices is setting sync this way:

free-file-sync-settings

Sorry for the spanish.

All you have to do is click the green gear and customize it. Assuming “left” would be for example a folder on your laptop and right, a folder on your USB device, that would mean, from left to right:

  • First green arrow means “is the element exists only on the left sid, then add it to the right”
  • Second arrow means “element exists on both sides but version on the left side is more recent, then update the element on the right side”
  • Third orange thunder means “when there is a conflict, leave it unresolved” (dont´t know what exactly means, but I guess is better let it so than corrupting a file on any of the side, and it always worked for me).
  • Grey hyphen of 4th position means “if the element exists on both sides but the right element is more recent, then do nothing”.
  • And the byn means “if the element exists only on the right side, remove it from right side”. It makes sure then that if I delete a file on my laptop, it would be also deleted on my USB.

Remember you can check what each action does depending on each case (listed on the upper row) and adapt it to your own preferences.