Open Source Geospatial Laboratory at ETHZ GitLab Tutorial

GitLab Tutorial for WebStorm and TortoiseGit

Overview
This tutorial gives a basic introduction on how to synchronize files in a GitLab repository with
WebStorm and TortoiseGit. You will learn how to create a GitLab repository, add and change
files, and upload the changes to the repository. You will simulate a merge conflict on your
computer by using two different repository locations. Note that in praxis, merge conflicts
occur when two people change a file at the same time.

Contents
1. Register at GitLab...............................................................................................................2
2. Create a new GitLab repository ..........................................................................................3
3. Connect to your GitLab repository ......................................................................................4
3.1 Connect to your GitLab repository via WebStorm ..........................................................4
3.2 Connect to your GitLab repository via TortoiseGit .........................................................8
4. Upload a file to the GitLab repository ................................................................................10
4.1 Upload a file to the GitLab repository via WebStorm ...................................................10
4.2 Upload a file to the GitLab repository via TortoiseGit...................................................14
5. Handle a merge conflict ....................................................................................................22
5.1 Handle a merge conflict via WebStorm .......................................................................22
5.2 Handle a merge conflict via TortoiseGit .......................................................................26

Tools
GitLab (https://gitlab.com/): online code repository, free usage for personal projects or small
teams, can be also self-hosted
WebStorm (https://www.jetbrains.com/webstorm/): JavaScript IDE supporting different code
repositories, free usage for students and open source projects, for Windows/Linux/Mac
TortoiseGit (https://tortoisegit.org/): GUI for Git commands including a context menu and icon
overlays, free usage, for Windows only
Notepad++ (https://notepad-plus-plus.org/): source code editor, free usage, for Windows only

1
Open Source Geospatial Laboratory at ETHZ GitLab Tutorial

1. Register at GitLab
a\ Go to https://gitlab.com/users/sign_in, choose the “Register” tab, and follow the steps to
create a GitLab account:

 Note: All ETH Students can use the GitLab repository which is hosted at ETH Zurich
(https://gitlab.ethz.ch/). You do not need to register, just enter your ETH username and
password in the “netzh LDAPS” tab.

2
Open Source Geospatial Laboratory at ETHZ GitLab Tutorial

2. Create a new GitLab repository

b\ Fill in the name of your project and press “Create project”:

 Hint: Start with a private project. You can change it later on to public if you like to.

c\ Copy the URL of your repository (here: https://gitlab.com/sraimund/osgl-tutorial.git) to the

3
Open Source Geospatial Laboratory at ETHZ GitLab Tutorial

3. Connect to your GitLab repository

a\ Start WebStorm
 Hint: In case a project is already open, close the project (“File > Close Project”).

b\ Click on “Check out from Version Control” and select “Git”:

 Hint: In case path to git.exe is not configured correctly, click on “Configure” and
search for “Git” in the search field of the settings:

4
Open Source Geospatial Laboratory at ETHZ GitLab Tutorial

 Press the “…” button and choose the path to the Git executable:

 Try to “Check out from Version Control” again

5
Open Source Geospatial Laboratory at ETHZ GitLab Tutorial

c\ Paste the copied URL of your repository and press the “Clone” button:

 Hint: In case the “Parent Directory” does not exist, you need to create it

d\ Enter your GitLab username and password:

e\ Press “Yes”:

6
Open Source Geospatial Laboratory at ETHZ GitLab Tutorial

f\ You are now connected to your repository:

7
Open Source Geospatial Laboratory at ETHZ GitLab Tutorial

3.2 Connect to your GitLab repository via TortoiseGit

a\ Right mouse click in the folder where you want to create a copy of your repository (choose
a different folder than in WebStorm) and select “Git Clone” in the context menu:

b\ Paste the URL of your repository:

8
Open Source Geospatial Laboratory at ETHZ GitLab Tutorial

c\ Press “Close”:

d\ You are now connected to your GitLab repository:

9
Open Source Geospatial Laboratory at ETHZ GitLab Tutorial

4. Upload a file to the GitLab repository

a\ Right mouse click on the root folder and select “New > File” in the context menu:

b\ Enter a file name:

c\ Press “Yes” to put the file under version control:

10
Open Source Geospatial Laboratory at ETHZ GitLab Tutorial

d\ Right mouse click on the file and select “Git > Commit File…” in the context menu:

e\ Enter a commit message and click on “Commit > Commit and Push…”:

11
Open Source Geospatial Laboratory at ETHZ GitLab Tutorial

f\ Enter your GitLab username and your email address:

g\ Press “Push”:

12
Open Source Geospatial Laboratory at ETHZ GitLab Tutorial

h\ Check in your web browser if the file has been uploaded to your GitLab repository by
refreshing your GitLab repository (here: https://gitlab.com/sraimund/osgl-tutorial):

13
Open Source Geospatial Laboratory at ETHZ GitLab Tutorial

4.2 Upload a file to the GitLab repository via TortoiseGit

a\ Right mouse click on the folder and select “TortoiseGit > Pull…” to receive the latest
changes:

b\ Press “OK”:

14
Open Source Geospatial Laboratory at ETHZ GitLab Tutorial

c\ Press “Close”:

d\ Enter the folder (here: osgl-tutorial) and right mouse click on the “README.txt” file and
select “Edit with Notepad++” in the context menu:

15
Open Source Geospatial Laboratory at ETHZ GitLab Tutorial

 Hint: If you create a new file in your Git folder, you first have to add it to the repository
by selecting “TortoiseGit > Add…”:

 Press “OK”:

16
Open Source Geospatial Laboratory at ETHZ GitLab Tutorial

 Note: This was just a hint to add a new file to the GitLab repository via TortoiseGit.
We will continue by updating the “README.txt” file.

c\ Change the contents of the “README.txt” file:

17
Open Source Geospatial Laboratory at ETHZ GitLab Tutorial

d\ Save the file in Notepad++ (shortcut: Ctrl + S), right mouse click on the file in the Explorer
and select “Git Commit -> “master””

e\ Press “Yes”:

f\ Press “OK”:

18
Open Source Geospatial Laboratory at ETHZ GitLab Tutorial

g\ Enter your GitLab username and email address (choose Local as “Config source” and
uncheck inherit next to “Name” and “Email”):

h\ To store the password in future, navigate to Credential, select “wincred – this repository
only” as a credential helper and press “Apply” and then “OK”:

19
Open Source Geospatial Laboratory at ETHZ GitLab Tutorial

i\ Enter a commit message and press “Commit & Push”:

j\ Press “Close”:

20
Open Source Geospatial Laboratory at ETHZ GitLab Tutorial

k\ Check in your web browser if the file has been changed in your GitLab repository by
refreshing your GitLab repository (here: https://gitlab.com/sraimund/osgl-tutorial):

21
Open Source Geospatial Laboratory at ETHZ GitLab Tutorial

5. Handle a merge conflict

a\ Do not pull the latest changes from your repository and change the contents of your file:

b\ Save the file (Ctrl + S), and commit and push it to your repository (see chapter 4.1)
c\ Press “Merge” when you receive this message:

22
Open Source Geospatial Laboratory at ETHZ GitLab Tutorial

d\ Press on the “Merge…” button to solve the merge conflict:

e\ Select the line you want to keep by clicking on “>>, reject the line you want to discard by
clicking on “x”. If you are done, press “Apply”:

23
Open Source Geospatial Laboratory at ETHZ GitLab Tutorial

f\ Right mouse click on the file and select “Git > Repository > Push…” to upload the merged
file to your repository:

g\ Press “Push”:

24
Open Source Geospatial Laboratory at ETHZ GitLab Tutorial

h\ Check in your web browser if the file has been changed in your GitLab repository by
refreshing your GitLab repository (here: https://gitlab.com/sraimund/osgl-tutorial):

25
Open Source Geospatial Laboratory at ETHZ GitLab Tutorial

5.2 Handle a merge conflict via TortoiseGit

a\ Do not pull the latest changes from your repository and change the contents of your file:

b\ Commit and push the file to the repository (see chapter 4.2)
c\ Press “Pull” when you receive this message:

26
Open Source Geospatial Laboratory at ETHZ GitLab Tutorial

d\ Press “OK”:

e\ Press “OK”:

27
Open Source Geospatial Laboratory at ETHZ GitLab Tutorial

f\ Press “Resolve”:

g\ Double left mouse click on the file to solve the merge conflict:

28
Open Source Geospatial Laboratory at ETHZ GitLab Tutorial

h\ Alternatively press “Cancel” and right mouse click on the conflicted file and select
“TortoiseGit > Edit conflicts”:

i\ Right mouse click on the line which you want to keep and select “Use this text block”:

29
Open Source Geospatial Laboratory at ETHZ GitLab Tutorial

j\ Press “Save”:

k\ Select “Mark as resolved”:

l\ Close the TortoiseGitMerge editor

30
Open Source Geospatial Laboratory at ETHZ GitLab Tutorial

m\ Press “Cancel”:

n\ Commit and push the merged file to the repository (see chapter 4.2)
o\ Press “OK” when you encounter this message:

p\ Press “Ignore” when you encounter this message or type in another commit message:

31
Open Source Geospatial Laboratory at ETHZ GitLab Tutorial

q\ Check in your web browser if the file has been changed in your GitLab repository by
refreshing your GitLab repository (here: https://gitlab.com/sraimund/osgl-tutorial):

Raimund Schnürer, 26.03.2018

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0

32