Difference between revisions of "Gitlab, Git and visual Studio Code"

Line 4: Line 4:
 
I created an account and created my first “Project”.  
 
I created an account and created my first “Project”.  
  
[[File:screenshot_1495.png]]
+
[[File:screenshot_1495.png|1000px]]
  
 
You need to fill in some information and when you have done this, just create the project!
 
You need to fill in some information and when you have done this, just create the project!
  
[[File:screenshot_1497.png]]
+
[[File:screenshot_1497.png|1000px]]
  
 
Once your project is created you will see that there is only a README file that we choose to create, but other than that it is empty.
 
Once your project is created you will see that there is only a README file that we choose to create, but other than that it is empty.
  
[[File:screenshot_1498.png]]
+
[[File:screenshot_1498.png|1000px]]
  
 
== Cloning your project using git ==
 
== Cloning your project using git ==
Line 19: Line 19:
 
So you need to copy the git URL from the gitlab project folder on the website:  
 
So you need to copy the git URL from the gitlab project folder on the website:  
  
[[File:screenshot_1499.png]]
+
[[File:screenshot_1499.png|1000px]]
  
 
Now we have the URL we can start the clone.
 
Now we have the URL we can start the clone.
Line 60: Line 60:
 
Open the folder you just created:  
 
Open the folder you just created:  
  
[[File:3BF210F4-05B4-4456-9BE0-D4D6BBEB6368.png]]
+
[[File:3BF210F4-05B4-4456-9BE0-D4D6BBEB6368.png|1000px]]
  
 
When you selected your folder, and click on “open” you will see the following screen.  
 
When you selected your folder, and click on “open” you will see the following screen.  
Line 66: Line 66:
 
I suggest clicking around and get yourself familiar with the GUI and the code editor a bit more.  
 
I suggest clicking around and get yourself familiar with the GUI and the code editor a bit more.  
  
[[File:screenshot_1500.png]]
+
[[File:screenshot_1500.png|1000px]]
  
 
Now that we have everything set up we are ready to create and edit some scripts.  
 
Now that we have everything set up we are ready to create and edit some scripts.  
 
Right click the explorer and select “New File”:
 
Right click the explorer and select “New File”:
  
[[File:BF4C682F-8611-46EB-AF72-8F5B328A8BC2.png]]
+
[[File:BF4C682F-8611-46EB-AF72-8F5B328A8BC2.png|1000px]]
  
 
After creating the actual file I am going to place a comment in there as a quick test and used the short keys CMD + S to save the file locally.
 
After creating the actual file I am going to place a comment in there as a quick test and used the short keys CMD + S to save the file locally.
  
[[File:screenshot_1501.png]]
+
[[File:screenshot_1501.png|1000px]]
  
 
Now make sure your new file is actually “part of the project” I needed to move my sample.tf file to the project folder.  
 
Now make sure your new file is actually “part of the project” I needed to move my sample.tf file to the project folder.  
Line 82: Line 82:
 
With “commit” we basically send our code to the [http://gitlab.com/ gitlab.com] cloud storage.  
 
With “commit” we basically send our code to the [http://gitlab.com/ gitlab.com] cloud storage.  
  
[[File:screenshot_1503.png]]
+
[[File:screenshot_1503.png|1000px]]
  
 
Notice the “U” and this has to do with that this is a new file, and the changes are “untracked.  
 
Notice the “U” and this has to do with that this is a new file, and the changes are “untracked.  
Line 89: Line 89:
 
Before we can commit we first need to “Stage Changes” by right clicking the file.  
 
Before we can commit we first need to “Stage Changes” by right clicking the file.  
  
[[File:07177978-E31E-485E-8D48-8B06E8D11642.png]]
+
[[File:07177978-E31E-485E-8D48-8B06E8D11642.png|1000px]]
  
 
We can commit the code / changes by browsing to “Source Control” by clicking on the “1”.  
 
We can commit the code / changes by browsing to “Source Control” by clicking on the “1”.  
 
And then select “check mark” button.  
 
And then select “check mark” button.  
  
[[File:screenshot_1504.png]]
+
[[File:screenshot_1504.png|1000px]]
  
 
When this is done you need to type in some kind of description with what you have changed.
 
When this is done you need to type in some kind of description with what you have changed.
  
[[File:screenshot_1505.png]]
+
[[File:screenshot_1505.png|1000px]]
  
 
When you hit enter, you will notice in the status bar a “1” with an arrow up.  
 
When you hit enter, you will notice in the status bar a “1” with an arrow up.  
Line 104: Line 104:
 
And you need to click on this arrow.  
 
And you need to click on this arrow.  
  
[[File:screenshot_1506.png]]
+
[[File:screenshot_1506.png|1000px]]
  
 
You will get a box with the actual confirmation.  
 
You will get a box with the actual confirmation.  
 
Click “OK”.  
 
Click “OK”.  
  
[[File:screenshot_1507.png]]
+
[[File:screenshot_1507.png|1000px]]
  
 
Ow when I browse to the [http://www.gitlab.com/ www.gitlab.com] website again and do a refresh I will see the new file has been uploaded.  
 
Ow when I browse to the [http://www.gitlab.com/ www.gitlab.com] website again and do a refresh I will see the new file has been uploaded.  
  
[[File:screenshot_1508.png]]
+
[[File:screenshot_1508.png|1000px]]
  
 
So now that we have learned how to use git with [http://www.gitlab.com/ www.gitlab.com] and Visual Studio Code we are ready to create some terraform scripts.  
 
So now that we have learned how to use git with [http://www.gitlab.com/ www.gitlab.com] and Visual Studio Code we are ready to create some terraform scripts.  
Line 166: Line 166:
 
https://gitlab.com/profile/keys/4983984
 
https://gitlab.com/profile/keys/4983984
  
[[File:screenshot_1518.png]]
+
[[File:screenshot_1518.png|1000px]]
  
 
Now we can test a “pull” using SSH key authentication:
 
Now we can test a “pull” using SSH key authentication:

Revision as of 19:02, 11 April 2020

So in order to start with coding scripts apparently “the” way to go is to use Git. Dale was using gitlab.com to share his scripts repository so I decided to go the same route.

I created an account and created my first “Project”.

Screenshot 1495.png

You need to fill in some information and when you have done this, just create the project!

Screenshot 1497.png

Once your project is created you will see that there is only a README file that we choose to create, but other than that it is empty.

Screenshot 1498.png

Cloning your project using git

Now that we have our project we can “clone” the project locally to our computer. So you need to copy the git URL from the gitlab project folder on the website:

Screenshot 1499.png

Now we have the URL we can start the clone. I have a MacBook Pro with OSX so for me this looked like this:

ihoogendoor-a01:~ iwanhoogendoorn$ cd Downloads/


ihoogendoor-a01:My-Local-Scripts-Directory iwanhoogendoorn$ git clone https://gitlab.com/iwanh/my-sample-project.git
Cloning into ‘my-sample-project’…
Username for ‘https://gitlab.com': iw@nhoogendoorn.nl 
Password for ‘https://iw@nhoogendoorn.nl@gitlab.com':
remote: Enumerating objects: 3, done.
remote: Counting objects: 100% (3/3), done.
remote: Total 3 (delta 0), reused 0 (delta 0), pack-reused 0
Unpacking objects: 100% (3/3), done.


ihoogendoor-a01:My-Local-Scripts-Directory iwanhoogendoorn$ ls -l
total 0
drwxr-xr-x  4 iwanhoogendoorn  staff  128 Mar 11 20:44 my-sample-project
ihoogendoor-a01:My-Local-Scripts-Directory iwanhoogendoorn$


Note

There is also a way to authenticate with an private/public SSH key, so you don’t have to put in your username and password every time you clone your project. But this is out of scope for this blog article. I will try to explain this in another blog article.

We see that the directory is still empty. 

Opening the cloned project in Visual Studio Code

Now the next step is to work with a proper code editor. And that is where Visual Studio Code comes in. So obviously you will have to install Visual Studio Code first, and this is nothing more than download it and run the install here.

Opening Visual Studio Code for the first time can be overwhelming and confusing where to start for the first time. But this blog is here to help you with that.

Open the folder you just created:

3BF210F4-05B4-4456-9BE0-D4D6BBEB6368.png

When you selected your folder, and click on “open” you will see the following screen. Notice the Explorer bar on the left. I suggest clicking around and get yourself familiar with the GUI and the code editor a bit more.

Screenshot 1500.png

Now that we have everything set up we are ready to create and edit some scripts. Right click the explorer and select “New File”:

BF4C682F-8611-46EB-AF72-8F5B328A8BC2.png

After creating the actual file I am going to place a comment in there as a quick test and used the short keys CMD + S to save the file locally.

Screenshot 1501.png

Now make sure your new file is actually “part of the project” I needed to move my sample.tf file to the project folder. Once I did that a little “1” appeared in the “Source Control” button. This means that the project has 1 change this change can be committed. With “commit” we basically send our code to the gitlab.com cloud storage.

Screenshot 1503.png

Notice the “U” and this has to do with that this is a new file, and the changes are “untracked. With an existing file you will be able to track the changes.

Before we can commit we first need to “Stage Changes” by right clicking the file.

07177978-E31E-485E-8D48-8B06E8D11642.png

We can commit the code / changes by browsing to “Source Control” by clicking on the “1”. And then select “check mark” button.

Screenshot 1504.png

When this is done you need to type in some kind of description with what you have changed.

Screenshot 1505.png

When you hit enter, you will notice in the status bar a “1” with an arrow up. This means that there is one (staged) change to push over to gitlab.com. And you need to click on this arrow.

Screenshot 1506.png

You will get a box with the actual confirmation. Click “OK”.

Screenshot 1507.png

Ow when I browse to the www.gitlab.com website again and do a refresh I will see the new file has been uploaded.

Screenshot 1508.png

So now that we have learned how to use git with www.gitlab.com and Visual Studio Code we are ready to create some terraform scripts.

Using SSH key authentication

With pushing and pulling you need to type in your credentials every time you do this. In order to make this easier you need to use authentication with SSH keys.

Enable SSH Key authentication.

Generate an RSA key:

ihoogendoor-a01:~ iwanhoogendoorn$ ssh-keygen -t rsa -b 4096 -C "iw@nhoogendoorn.nl"
Generating public/private rsa key pair.
Enter file in which to save the key (/Users/iwanhoogendoorn/.ssh/id_rsa):
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
Your identification has been saved in /Users/iwanhoogendoorn/.ssh/id_rsa.
Your public key has been saved in /Users/iwanhoogendoorn/.ssh/id_rsa.pub.
The key fingerprint is:
SHA256:XXX iw@nhoogendoorn.nl 
The key’s randomart image is:
 —[RSA 4096]——


Look at the key and copy the output:

ihoogendoor-a01:~ iwanhoogendoorn$ more ~/.ssh/id_rsa.pub
ssh-rsa XXX
THE KEY OUTPUT XXX  
my@email.nl 
ihoogendoor-a01:~ iwanhoogendoorn$


ssh-rsa XXX
THE KEY OUTPUT XXX


The key import can be verified here: https://gitlab.com/profile/keys/4983984

Screenshot 1518.png

Now we can test a “pull” using SSH key authentication:

ihoogendoor-a01:~ iwanhoogendoorn$ ssh -T git@gitlab.com 
The authenticity of host 'gitlab.com (35.231.145.151)’ can’t be established. 
ECDSA key fingerprint is SHA256:HbW3g8zUjNSksFbqTiUWPWg2Bq1x8xdGUXXXXXXXXXXX.
Are you sure you want to continue connecting (yes/no)? yes
Warning: Permanently added ‘gitlab.com,35.231.145.151’ (ECDSA) to the list of known hosts.
Welcome to GitLab, @iwanh!
ihoogendoor-a01:~ iwanhoogendoorn$


ihoogendoor-a01:~ iwanhoogendoorn$ mkdir Coding


ihoogendoor-a01:~ iwanhoogendoorn$ cd Coding/


ihoogendoor-a01:Coding iwanhoogendoorn$ git clone git@gitlab.com:iwanh/nestedlabs.git 
Cloning into ‘nestedlabs’…
remote: Enumerating objects: 106, done.
remote: Counting objects: 100% (106/106), done.
remote: Compressing objects: 100% (71/71), done.
remote: Total 106 (delta 38), reused 78 (delta 27), pack-reused 0
Receiving objects: 100% (106/106), 10.80 MiB


ihoogendoor-a01:Coding iwanhoogendoorn$ ls
nestedlabs