Fullstack - ASP.NET Entwicklung mit DotNet Core und Vue.js - Teil 2 - Einbinden in GIT als Sourceverwaltung

Einführung

Dieser Artikel ist eine Serie von Artikeln, die den Aufbau einer Fullstack Applikation unter DotNet Core und Vue.js beschreiben.

Bisher sind folgende Artikel erschienen:

  • Fullstack - ASP.NET Entwicklung mit DotNet Core und Vue.js - Erste Schritte Link
  • Fullstack - ASP.NET Entwicklung mit DotNet Core und Vue.js - Teil 2 Link
  • Fullstack - ASP.NET Entwicklung mit DotNet Core und Vue.js - Teil 3 - Einbinden PostgreSQL als Datenbank Link
  • Fullstack - ASP.NET Entwicklung mit DotNet Core und Vue.js - Teil 4 - Erweiterung um ein Repository Pattern und Service Layer Link
  • Fullstack - ASP.NET Entwicklung mit DotNet Core und Vue.js - Teil 5 - Erste Schritte mit Vue.js und Typescript Link
  • Fullstack - ASP.NET Entwicklung mit DotNet Core und Vue.js - Teil 6 - Erweiterung um Vuex und Axios Link

In meinen letzten Artikel (http://vr-worlds.de/fullstack-asp-net-entwicklung-mit-dotnet-core-und-vue-js-erste-schritte/) habe ich die ersten vorbereitenden Schritte beschrieben, die notwendig sind, um eine Fullstack Entwicklung durchzuführen.

Natürlich ist es auch sehr wichtig, eine Source Verwaltung während seiner Entwicklung zu benutzten. In diesen Artikel möchte ich die hierfür notwendig Schritte näher bringen.

Warum eine Source Verwaltung verwenden?

Eine Source-Code Verwaltung ist ein zentraler Speicher, an den ein oder mehrere Entwickler ihre Änderungen ablegen können. Das aktuellste Tool ist GIT (https://git-scm.com/), aber es gibt natürlich auch andere: beispielsweise das etwas in die Jahre gekommen Subversion (https://subversion.apache.org/) oder Mercurical (https://www.mercurial-scm.org/).

Folgende Punkte vereinfacht GIT für die Entwicklung:

  • Sichere Ablage er Änderungshistorie
  • Nachvollziehbarkeit, wann ein Fehler eingebaut wurde und möglicherweise auch die Erkenntnis, wie dieser wieder zu beseitigen ist.
  • Mehrere Personen können mit einer Source-Verwaltung effizient zusammenarbeiten. Jeder arbeitet an seiner lokalen Kopie und schiebt seine Änderungen an einen zentralen Ort auf dem Server
  • Verwalten von mehreren Branches ermöglicht es, dass an mehreren Entwicklungen gleichzeitig gearbeitet werden kann. So kann das Bugfixing und pflege einer Programmversion durchgeführt werden und gleichzeitig eine neue Version mit neuen Features entwickelt werden. Zum Abschluss werden diese Änderungen anschließend gemerged.

Je nach Projekt und Auftragslage gibt es natürlich noch weitere Vorteile: Beispielsweise die lückenlose Nachweisbarkeit der Änderungen gegenüber einer Revision oder bei Open-Source Projekten eine einfache Verfügbarkeit machen von neuen Versionen für die Community.

Installation und Verwenden von GIT

Die Verwendung von GIT, wie auch bei den meisten anderen Source-Verwaltungen benötigt man zwei Kernkomponenten:

  • Einen Server auf den die Änderungen abgelegt werden
  • Lokale Entwicklungstools

Für diesen Artikel verwenden ich die populäre Plattform Server-Plattform github.com (https://github.com/). Bei Projekten, die nicht Open-Source sein sollen, verwende ich meist Gitlab (https://about.gitlab.com/), wenn ich die Source-Code Verwaltung von mir betrieben werden soll. Eine andere populäre Open-Source alternative ist Bitbucket (https://bitbucket.org).

In diesen Artikel verwende ich GitHub.com, damit der Source-Code und Änderungen nachvollziehbar zur Verfügung stehen. Es wird kein eigener Account benötigt, um von dort sich Source-Code zu holen. Möchte man dort auch Source-Code ablegen, muss man auf http://github.com sich einen neuen Account anlegen:

ACHTUNG: Insbesondere wenn man GITHUB oder eine anderen Open Source Lösung verwendet! Niemals API Keys oder Passwörter einchecken. Es gibt Hacker, die den Source-Code auswerten und diese Informationen missbrauchen. Ein interessanter Artikel ist beispielsweise hier: https://www.humankode.com/asp-net-core/asp-net-core-configuration-best-practices-for-keeping-secrets-out-of-source-control

Als nächstes sind die Kommandozeilenbefehle von GIT zu installieren. Diese sind auf folgenden Link zu finden: https://git-scm.com/downloads

Einrichten eines Repository

Nachdem wir nun einen Account auf "Github" haben, können wir dort das erste Projekt starten:

Nun sind nur noch die Eckdaten für das neue Repository anzugeben, dass für das Entwicklungsprojekt zu verwenden ist:

Anschließend hat man ein neues Repository zur Verfügung.

Nun kann man den Link ganz Einfach in die Zwischenablage kopieren:

Einrichten des Repositories in Visual Studio Code

Um nun das ASP.NET Projekt mit GIT zu verknüpfen, kann man nun in Visual Studio Code das Eingabe-Terminal öffnen:

Zunächst muss unser Projekt für GIT Initialisiert werden:

git init  

Anschließend sind alle Dateien hinzuzufügen:

git add .  

Nun sind wir bereit den ersten Commit zu definieren, der unsere Änderungen beschreibt:

git commit -m "Mein erster Commit"  

Bevor ein Upload möglich ist, muss noch das Remote Repository, das in Github angelegt wurde angegeben werden:

git remote add origin https://github.com/smoki99/DotNetVueBlog.git  

Schlussendlich kann die Änderung nun hochgeladen werden, mit folgendem Befehl:

git push origin master  

Nun sind noch Userkennung und Password von Github einzugeben und der Upload kann beginnen:

Wenn alles erfolgreich verlaufen ist, kann man den Source Code auf der Website von github.com bewundern:

Änderungen vornehmen und nach GITHUB laden

Üblicherweise hat ein Projekt auf Github eine Readme.md Datei. Über Visual Studio Code legen wir ein Beispiel an:

Anschließend kann man mit folgenden Befehlen den Upload starten:

git add .  
git commit -m "Added Readme files"  
git push origin master  

Anschließend wird der Upload gestartet:

Und "README.md" ist nun auf Github integriert:

Speichern der Userkennung und Passwort lokal

Damit nicht bei jeder Interaktion mit Github, die Userkennung und das Passwort abgefragt werden, können die Credentials einmalig abgelegt werden, in den dies mit dem folgenden Befehl gesetzt wird. Anschließend ist nur noch eine einmalige Eingabe notwendig:

git config credential.helper store  

Arbeiten mit Git über die Visual Studio Code Oberfläche

Natürlich unterstützt Visual Studio Code die Nutzung von Visual Studio Code umfangreich.

Wir eine Änderung gemacht, wird diese unter den Tab Quellcode Verwaltung angezeigt:

Anschließend kann man mit Klick auf das Plus-Zeichen die Änderung bereitstellen:

Und anschließend das Commit den gewünschten Änderungstext durchführen:

Der Upload erfolgt anschließend mit "Push":

Verwenden des Source Code an einem anderen Rechner oder Verzeichnis

Möchte man den Source Code von Github auschecken in einem anderen Verzeichnis oder auf einen anderen PC, dann geht das recht einfach mit git clone:

Zusammenfassend

Der Artikel zeigt, wie mit der Sourcecode-Verwaltung GIT umgegangen werden kann, um seinen Source-Code über Github.com auszutausen.

Die Integration in Visual Studio Code macht ein einfaches und effizientes Arbeiten mit GIT möglich.