{"id":3297,"date":"2023-12-10T18:15:00","date_gmt":"2023-12-10T17:15:00","guid":{"rendered":"https:\/\/ictknow-how.ch\/blog\/?p=3297"},"modified":"2023-12-12T12:13:57","modified_gmt":"2023-12-12T11:13:57","slug":"lidarr-wie-stellt-man-das-frontend-bereit","status":"publish","type":"post","link":"https:\/\/ictknow-how.ch\/blog\/2023\/12\/10\/lidarr-wie-stellt-man-das-frontend-bereit\/","title":{"rendered":"Lidarr – wie stellt man das Frontend bereit?"},"content":{"rendered":"\n

In diesem Artikel<\/a> habe ich beschrieben, wie man f\u00fcr das Open-Source-Projekt Lidarr<\/a> das sogenannte Backend<\/strong> in Visual Studio 2022 bereitstellt.<\/p>\n\n\n\n

Damit man in Visual Studio 2022 das Projekt durchg\u00e4ngig debuggen kann, braucht es aber auch den im Browser sichtbaren Frontend<\/strong>-Teil.<\/p>\n\n\n\n

Was braucht man um das Lidarr-Frontend<\/strong> in Visual Studio 2022 verwenden zu k\u00f6nnen?<\/p>\n\n\n\n

Auf dem Ger\u00e4t wo man sich schon Visual Studio installiert hat, kommt zus\u00e4tzlich noch Node.js<\/code> von https:\/\/nodejs.org\/<\/a> und Yarn<\/code> dazu.
Die vorgeschlagene Node.js<\/code>-LTS-Version 20.10.0 reicht. Also das node-v20.10.0-x64.msi<\/code>-Paket runterladen und (bei geschlossenem Visual Studio) installieren. Die ganzen Zus\u00e4tze wie z.B. \u00abChocolatey\u00bb sind f\u00fcr Lidarr NICHT n\u00f6tig:<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Wie in der offiziellen Lidarr-Wiki beschrieben, ist Yarn in neueren Versionen von Node.js bereits enthalten. Das gilt auch f\u00fcr die eben installierte Node.js<\/code>-v20.10.0.<\/p>\n\n\n\n

Man sucht also im Windows-Menu nach dem eben frisch erstellten Node.js<\/code>-Eintrag und f\u00fchrt den \u00abNode.js command prompt\u00bb (=Kommandozeile) als Administrator aus:<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Im ge\u00f6ffneten Kommandozeilenfenster tippt man folgenden Befehl ein:
corepack enable<\/code><\/p>\n\n\n\n

\"\"<\/a>
Eine R\u00fcckmeldung darauf gibt es nicht.<\/figcaption><\/figure>\n\n\n\n

Dann wechselt man mit dem Befehl CD<\/code> zwingend in das \\frontend-<\/code>Verzeichnis, wo man im ersten Teil mit dem Backend den kompletten Source-Code hin kopiert hat. In meinem Beispiel war das
CD %USERPROFILE%\\Documents\\Visual Studio 2022\\Code Snippets\\Visual C#\\Lidarr-develop (10.12.2023)<\/code>\\frontend<\/p>\n\n\n\n

Im \\frontend-Verzeichnis tippt man diesen Befehl ein:
yarn install<\/code><\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Man sieht den Installations-Fortschritt der 970 Yarn-Pakete fortlaufend aktualisiert.
Wenn diese Yarn-Installation abgeschlossen ist, folgt dieser Befehl am gleichen Ort:
yarn start<\/code>
(Nicht erschrecken, da passiert sichtbar erstmal rund 30 Sekunden rein gar nichts. Wenn man die aufpoppende Sicherheits-Abfrage akzeptiert, folgt wieder eine farbige, fortlaufende Fortschrittsanzeige:)<\/em><\/p>\n\n\n\n

\"\"<\/a>
Die zwischendurch auftretenden roten ERROR-Meldungen kann man ignorieren.<\/figcaption><\/figure>\n\n\n\n

Hinweis zu den Yarn-Fehlermeldungen: <\/strong>
Der Grund f\u00fcr die vereinzelten ERROR liegt darin, dass Yarn<\/code> anscheinend nicht mit dem Sonderzeichen #<\/strong> im Verzeichnisnamen „Visual C#<\/strong>“ klarkommt. Deshalb habe ich den Standard-Verzeichnisnamen den Visual Studio anlegt inzwischen manuell auf „\\Visual CS<\/code>“ f\u00fcr C<\/strong>–S<\/strong>harp abge\u00e4ndert.<\/em><\/p>\n\n\n\n

Abbrechen kann man das gestartete Yarn-Fenster durch Dr\u00fccken der Tastenkombination CTRL + C<\/p>\n\n\n\n

Wenn man nun das Backend<\/strong> wieder \u00fcber die Projektstart-Datei Lidarr.sln<\/code> in Visual Studio 2022 l\u00e4dt, kann man erneut versuchen, mit F5 oder einem Klick auf den grossen gr\u00fcnen Play-Button die Kompilierung zu starten.<\/p>\n\n\n\n

Hat man alles vollst\u00e4ndig gem\u00e4ss dieser Anleitung erledigt, wird man mit der allerersten Konfigurations-Maske von Lidarr in einem Browser empfangen. Ganz genau so, wie wenn Lidarr das allererste Mal auf seinem Ger\u00e4t installiert.<\/p>\n\n\n\n

Nun kann man nach Belieben den Backend-Code in Visual Studio \u00e4ndern und direkt im Browser sehen wie sich das auswirkt.
Nochmal zur Erinnerung: Will man sichtbare Ver\u00e4nderungen im Frontend bewirken, z.B. die Farben oder Formen oder Buttons \u00e4ndern, dann muss man in einem HTML- und\/oder Javascript-Editor die entsprechenden Codestellen anpassen.<\/p>\n\n\n\n

Wie man das genau macht, folgt in im dritten Teil <\/a>dieser Anleitung.<\/p>\n\n\n\n

Bei Fragen zu den bisherigen Teilen Backend-<\/a> <\/strong>und Frontend-Installation<\/strong>, einfach einen Kommentar hinterlassen.<\/p>\n\n\n

\n \n
\n \n
\n
\n \n\n
<\/div>\n <\/div>\n
\n \n\n
<\/div>\n <\/div>\n
\n \n\n
<\/div>\n <\/div>\n
\n \n\n
<\/div>\n <\/div>\n
\n \n\n
<\/div>\n <\/div>\n <\/div>\n \n
\n
\n \n\n
<\/div>\n <\/div>\n
\n \n\n
<\/div>\n <\/div>\n
\n \n\n
<\/div>\n <\/div>\n
\n \n\n
<\/div>\n <\/div>\n
\n \n\n
<\/div>\n <\/div>\n <\/div>\n<\/div>\n \n\n
\n Rate this post<\/span>\n <\/div>\n <\/div>\n","protected":false},"excerpt":{"rendered":"

In diesem Artikel habe ich beschrieben, wie man f\u00fcr das Open-Source-Projekt Lidarr das sogenannte Backend in Visual Studio 2022 bereitstellt. Damit man in Visual Studio 2022 das Projekt durchg\u00e4ngig debuggen kann, braucht es aber auch den im Browser sichtbaren Frontend-Teil. Was braucht man um das Lidarr-Frontend in Visual Studio 2022 verwenden zu k\u00f6nnen? Auf dem … Weiterlesen<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[28,278],"tags":[283,282,284,285,277,280,281],"class_list":["post-3297","post","type-post","status-publish","format-standard","hentry","category-software","category-visual-studio","tag-c","tag-c-sharp","tag-html","tag-javascript","tag-lidarr","tag-node-js","tag-yarn"],"_links":{"self":[{"href":"https:\/\/ictknow-how.ch\/blog\/wp-json\/wp\/v2\/posts\/3297","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ictknow-how.ch\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ictknow-how.ch\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ictknow-how.ch\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ictknow-how.ch\/blog\/wp-json\/wp\/v2\/comments?post=3297"}],"version-history":[{"count":0,"href":"https:\/\/ictknow-how.ch\/blog\/wp-json\/wp\/v2\/posts\/3297\/revisions"}],"wp:attachment":[{"href":"https:\/\/ictknow-how.ch\/blog\/wp-json\/wp\/v2\/media?parent=3297"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ictknow-how.ch\/blog\/wp-json\/wp\/v2\/categories?post=3297"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ictknow-how.ch\/blog\/wp-json\/wp\/v2\/tags?post=3297"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}