# VS Code und App Veröffentlichung
#### VS Code Installation
Die aktuellste Version von Visual Studio Code [**hier**](https://code.visualstudio.com/) herunterladen und anschließend installieren.
#### Benötigte und nützliche Extensions für VS Code
##### AL Language
Nach dem ersten Start von Visual Studio Code ist es notwendig, die AL Language Erweiterung zu installieren. Dazu bitte die folgenden Schritte in VC Code ausführen:
1. Extension Menü öffnen
2. Nach "AL Language" suchen
3. Und das entsprechende Paket installieren
[](https://docs.squeeze.one/uploads/images/gallery/2021-10/image-1633933338554.png)
##### AL Object Designer und AL Dev Tools
Weitere, praktische Erweiterungen sind z.B. der **AL Object Designer** von Márton Sági und die **AL Dev Tools** von Andrzej Zwierzchowski.
[](https://docs.squeeze.one/uploads/images/gallery/2021-10/image-1633933945695.png)
**AL Object Designer**
Mit dieser Erweiterung lassen sich, unter anderem, alle Objekte des Projektes auflisten und der entsprechende Code einsehen.
[](https://docs.squeeze.one/uploads/images/gallery/2021-10/image-1633934535479.png)
**AL Dev Tools**
Diese Erweiterung bietet, unter anderem, verschiedene Wizards und andere praktische Tools.
#### Erstellen und veröffentlichen einer ersten App aus VS Code heraus
Im Folgenden wird die Erstellung eines neuen Beispielprojektes in Visual Studio Code beschrieben sowie die Veröffentlichung der daraus resultierenden BC App gezeigt. Wir benutzen hierfür die aktuellste BC Version (Runtime Version 8, bzw. Anwendungsversion 19).
##### Projektinitialisierung
In VS Code F1 oder STRG+Shift+P drücken, um die Befehlszeile zu öffnen. Anschließend das Kommando **AL: Go!** ausführen.
[](https://docs.squeeze.one/uploads/images/gallery/2021-10/image-1633938331635.png)
Daraufhin wird der Pfad zu einem leeren Verzeichnis benötigt. Der Ordner (hier: *ExampleAppBC19*) muss im Vorfeld nicht erstellt werden.
[](https://docs.squeeze.one/uploads/images/gallery/2021-10/image-1633938516012.png)
Damit VS Code die Konfigurationsdatei **app.json** mit den korrekten Parametern erstellt, muss nun die Business Central Version ausgewählt werden, für die eine App entwickelt werden soll. In diesem Fall ist es die *Version 8.0 (Runtime)*, bzw. *Anwendungsversion 19.0.0.0*.
[](https://docs.squeeze.one/uploads/images/gallery/2021-10/image-1633939377386.png)
Die **launch.json**, also die Konfigurationsdatei mit den Startparametern für die Veröffentlichung der App aus Visual Studio heraus, wird im nächsten Schritt entsprechend der Auswahl des Servers erstellt. In diesem Fall wird mit einem On-Prem Server gearbeitet (in Docker).
[](https://docs.squeeze.one/uploads/images/gallery/2021-10/image-1633939945601.png)
Sofern noch eine Aufforderung zur Eingabe von Benutzername und Passwort folgt, kann diese mit ESC abgebrochen werden.
##### Download von Symbolen
Visual Studio Code benötigt nun noch Informationen zu den Objekten und Extensions, die in der BC Instanz existieren. Damit der Download der sogenannten Symbole möglich ist, müssen die Verbindungsdaten in der Projektdatei **launch.json** entsprechend der Konfiguration in [Docker](https://docs.squeeze.one/books/bc-docker-sandbox-und-vs-code/page/docker "Docker") angepasst werden:
[](https://docs.squeeze.one/uploads/images/gallery/2021-10/image-1633940941646.png)
Anschließend in der Befehlszeile (F1) *AL: Download symbols* ausführen.
[](https://docs.squeeze.one/uploads/images/gallery/2021-10/image-1633941374340.png)
Wenn im Anschluss [](https://docs.squeeze.one/uploads/images/gallery/2021-10/image-1633941487094.png) angezeigt wird, hat alles geklappt. VS Code hat nun auch einen neuen Ordner mit Packages erstellt:
[](https://docs.squeeze.one/uploads/images/gallery/2021-10/image-1633941599275.png)
Je nachdem, wie die App später in BC bzw. im Store angezeigt werden soll, können nun noch Anpassungen an der **app.json** vorgenommen werden. Darüber hinaus kann hier festgelegt werden, für welches Ziel (Cloud oder On-Prem) entwickelt werden soll - dazu wird der Parameter **target** entsprechend gefüllt (hier: Cloud).
[](https://docs.squeeze.one/uploads/images/gallery/2021-10/image-1633942262209.png)
##### Erstellen und Kompilieren einer Extension
VS Code hat bereits eine HelloWorld.al Datei erstellt. Die Datei kann einfach gelöscht werden. Stattdessen bietet es sich an, eine neue, den best practices von Microsoft entsprechende, Datei zu erstellen. In diesem Fall eine Extension der Page "Customer List". Die Bezeichnung der Datei ist dann *CustomerListExt.PageExt.al.* Sinnvoll ist auch die Benutzung von Unterordnern (z.B. src, pages, pageextension etc.) - in diesem Beispiel sparen wir uns das mal.
Eine neue Datei wird erstellt, indem man an den Ort, wo die Datei hinterlegt werden soll, einen Rechtklick macht (hier: root) und anschließend **New File** wählt - alternativ kann auch der **New AL File Wizard** auf den AZ AL Dev Tools benutzt werden.
[](https://docs.squeeze.one/uploads/images/gallery/2021-10/image-1633957641826.png)
Die Datei dann passend benennen und mit beliebigem Code füllen.
[](https://docs.squeeze.one/uploads/images/gallery/2021-10/image-1633958335883.png)
Die folgenden Schritte (inkl. automatischer Tests) können via CI/CD auch automatisiert ausgeführt werden (z.B. in Azure DevOps), wenn der Programmcode in einem entsprechenden Repository hinterlegt ist.
##### Kompilieren einer Extension via VS Code
Befehlszeile öffnen (F1) und **AL: Package** ausführen. Der Code wird dann als *.app Package* kompiliert (im obigen Screenshot bereits passiert) - der Name setzt sich aus einigen, in der *app.json* hinterlegten, Parametern zusammen.
##### Veröffentlichung einer Extension via VS Code
In diesem Fall reicht es, mit F5 die Veröffentlichung (mit Debugging bzw. STRG+F5 ohne Debugging) zu starten - der Kompiliervorgang ist in dem Veröffentlichungsprozess integriert. Alternativ: Befehlszeile öffnen (F1) und **AL: Publish with(out) Debugging** ausführen.
##### Veröffentlichung einer Extension via PowerShell
**Veröffentlichung in einem Docker Container:**
Das Cmdlet *Publish-BcContainerApp,* mit entsprechenden Parametern, wird benutzt, um in einer BC Containerumgebung eine App zu veröffentlichen - das Script kann [**hier**](https://github.com/microsoft/navcontainerhelper/blob/master/AppHandling/Publish-NavContainerApp.ps1) eingesehen werden.
Hier für unser Beispiel:
```Powershell
Publish-BcContainerApp -containerName "bc19onprem" -appFile "C:\Users\BerndFeddersen\Documents\AL\ExampleAppBC19\DEXPRO Solutions GmbH_DEXPRO Example App BC19_1.0.0.0.app" -install -sync –SkipVerification
```
**Veröffentlichung außerhalb eines Containers:**
Die Veröffentlichung in einer On-Prem Umgebung außerhalb eines Containers wird mit dem Cmdlet *Publish-NAVApp* realisiert. Das wird [**hier**](https://docs.microsoft.com/en-us/powershell/module/microsoft.dynamics.nav.apps.management/?view=businesscentral-ps-19 "hier") ganz gut beschrieben.
**Veröffentlichung in der BC Cloud (ohne AppSource):**
Mit entsprechenden Rechten (**EXTEND. MGT. - ADMIN** bzw. vor BC21 Wave 1 **D365 EXTENSION MGT**) kann eine Erweiterung einfach über den Webclient als "*Per Tenant Extension*" installiert werden. Die Erweiterung muss also in diesem Fall für jeden Mandanten installiert werden. Es folgt ein Beispiel anhand unserer BC Test-Cloud.
Unsere Testumgebung mit Cronus Testdaten ist unter der folgenden URL zu erreichen:
[https://businesscentral.dynamics.com/6413f818-77ac-48e7-b9f6-79adfcee41f1](https://businesscentral.dynamics.com/6413f818-77ac-48e7-b9f6-79adfcee41f1)
Als Sandbox:
[https://businesscentral.dynamics.com/6413f818-77ac-48e7-b9f6-79adfcee41f1/sandbox](https://businesscentral.dynamics.com/6413f818-77ac-48e7-b9f6-79adfcee41f1/sandbox)
In Business Central die Erweiterungsverwaltung öffnen:
[](https://docs.squeeze.one/uploads/images/gallery/2021-10/image-1633963262022.png)
Anschließend das Menü zum Hochladen von Erweiterungen öffnen:
[](https://docs.squeeze.one/uploads/images/gallery/2021-10/image-1633963337191.png)
Daraufhin die durch VS Code kompilierte .app Datei auswählen und mit den gewünschten Einstellungen hochladen und installieren:
[](https://docs.squeeze.one/uploads/images/gallery/2021-10/image-1633963531836.png)
Nach einem kurzen Moment ist die installierte Erweiterung dann in der entsprechenden Liste sichtbar (ggfs. aktualisieren, damit die Änderung sichtbar wird):
[](https://docs.squeeze.one/uploads/images/gallery/2021-10/image-1633963807184.png)
##### Ergebnis:
In der Beispiel App haben wir die Page **Customer List** erweitert, sodass jedes Mal bei der Ausführung des Triggers OnOpenPage irgendetwas passiert - dementsprechend sieht das jetzt so aus:
[](https://docs.squeeze.one/uploads/images/gallery/2021-10/image-1633963868731.png)