Privates npm package – KOSTENLOS!

      0
Privates npm package - KOSTENLOS!

Du hast eine coole Library entwickelt, die du in jedem deiner Projekte verwenden willst, möchtest sie aber nicht mit der Öffentlichkeit teilen? Unter npmjs.com dürftest du dafür monatlich 7$ blechen. Ein privates npm package und das kostenlos, können wir aber auch mit GitLab realisieren. Und wie genau das funktioniert, erkläre ich dir jetzt.

Dank der angepassten Datenschutzverordnung benötigt fast jede Seite mittlerweile einen Cookie-Banner. Wer mehr als nur eine Webseite betreut, hat schnell keine Lust mehr auf die unzähligen Konfigurationen. Auf der Arbeit haben wir deshalb eine universale Cookie-Consent-Library entwickelt, die nicht der Öffentlichkeit zur Verfügung gestellt werden soll. Um diese in jedes Projekt einzubinden, wäre es natürlich schön, wenn ein yarn add ausreichen würde. Also der perfekte Usecase für ein privates npm package.

Voraussetzung ist natürlich, dass du yarn installiert hast. Generell funktioniert das Ganze aber auch mit npm.

Dann brauchst du noch ein GitLab Repository. Auf der Arbeit haben wir einen eigenen GitLab Server, mit eigener URL. In diesem Fall musst du bei den späteren Codezeilen nur die GitLab Domain anpassen.

1. Vorbereitungen in GitLab

1.1 Packages aktivieren

Öffne dein Repository unter gitlab.com. Unter dem Repository Namen findest du die sogenannte „Project ID„. Notiere dir diese für den nächsten Schritt.

Screenshot vom GitLab Interface: Projekt ID

Nun sieh nach ob du den Tab „Packages & Registries“ sehen kannst. Falls ja, kannst du direkt zum nächsten Punkt springen.

Um den besagten Tab andernfalls zu aktivieren, navigiere zu „Settings -> General“ und klick neben „Visibility, project features, permissions“ auf „Expand„.

Screenshot vom GitLab Interface: Settings

Such nun den Schalter für „Packages“ und aktiviere diesen. Danach sollte das Ganze so aussehen:

Screenshot vom GitLab Interface: Settings Packages

1.2 Token erstellen

Damit du später dein Paket auf GitLab hochladen und in anderen Projekten eben auf dieses Paket mittels GitLab zugreifen kannst, brauchst du ein Token.

Klicke in GitLab oben rechts auf deinen Avatar und dann auf „Settings„. In der Seitenleiste findet sich der Punkt „Access Tokens„. Vergib einen Namen und hake als Scope „api“ an. Das generierte Token wird dir dann oben auf der Seite angezeigt.

Das Token musst du dir notieren, denn du kannst es danach nicht noch einmal abrufen. Falls du das Token vergisst, kannst du das alte löschen und ein neues generieren.

Alternativ kannst du auch ein sogenanntes Deploy-Token zum Abrufen deines Pakets verwenden. Dieses Token kann nur von deinem Repository lesen, nicht schreiben. Das ist zum Beispiel für einen Live-Server nützlich, da dieser zum Herunterladen des Pakets nicht dein persönliches Token verwenden sollte. In dieser Anleitung brauchen wir das Token ja aber zum Lesen und Schreiben.

Damit sind wir erst einmal fertig in GitLab und können uns dem Code widmen.

2. Konfiguration im Package Repository

2.1 package.json

Idealerweise hast du in deinem Repository bereits eine package.json erstellt. Ist dies nicht der Fall kannst du das mit dem Befehl yarn init nachholen. Dabei wirst du zunächst nach einem Namen gefragt. Dieser muss „scoped“ sein. Das heißt, dass du deinen GitLab Username vor deinen Projektnamen stellen musst. Außerdem muss an den Anfang noch ein „@“.

Beispiel: Mein GitLab Username lautet NickHatBoecker. Mein Projekt heißt cookie-consent. Mein Projektname lautet also @NickHatBoecker/cookie-consent.

Die restlichen Fragen kannst du mit der Eingabetaste überspringen oder nach deinen Wünschen ausfüllen. Am Ende kannst du dann die package.json öffnen.

Hast du alle Fragen übersprungen, sieht die minimal Ausprägung so aus:

// package.json

{
  "name": "@NickHatBoecker/cookie-consent",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT"
}

Soweit so gut. Um unser Paket nun in GitLab zu hinterlegen, muss yarn wissen, wohin es das Paket hochladen soll. Dazu müssen wir den Punkt publishConfig ergänzen:

// package.json

{
  "name": "@NickHatBoecker/cookie-consent",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "publishConfig": {
      "@NickHatBoecker:registry": "https://gitlab.com/api/v4/projects/{PROJECT_ID}/packages/npm/"
  }
}
Achtung: „registry“ muss in diesem Falle nicht durch deinen Projektnamen ersetzt werden. Die Verknüpfung zum Projekt erfolgt durch die PROJECT_ID.

Ersetze in diesem Fall „NickHatBoecker“ durch deinen eigenen Scope und {PROJECT_ID} durch die numerische Projekt-ID, die du dir im ersten Schritt notiert hast.

2.2 .npmrc

Achtung: Sensible Tokens sollten niemals versioniert werden. Am besten du legst in so einem Fall eine {dateiname}.dist oder {dateiname.example} an, die du versionieren und mit Beispieldaten befüllen kannst.

Als nächstes erstellen wir eine Datei namens „.npmrc„. In diese tragen wir folgenden Code ein:

// .npmrc

@NickHatBoecker:registry=https://gitlab.com/api/v4/projects/{PROJECT_ID}/packages/npm/
//gitlab.com/api/v4/projects/{PROJECT_ID}/packages/npm/:_authToken={YOUR_TOKEN}

Ersetze hier abermals den Scope „NickHatBoecker“ und die {PROJECT_ID}. Außerdem musst hier noch {YOUR_TOKEN} durch das Token aus dem ersten Schritt ersetzen.

Achtung: Auch hier wieder der Hinweis, dass „registry“ nicht durch deinen Paketnamen ersetzt werden muss.

Nun bist du bereit für den ersten Upload deines Pakets zu GitLab. Führe dazu einfach folgenden Befehl aus:

yarn publish

Dabei wirst du nach einer Versionsnummer gefragt. Wenn du hier eine andere als in der package.json angibst, wird deine package.json automatisch aktualisiert und comitted, aber nicht gepushed.

Sieh danach in deinem Repository unter „Packages & Registries“ nach, ob das Paket da ist.

3. Einbinden des Package

Achtung: Sensible Tokens sollten niemals versioniert werden. Am besten du legst in so einem Fall eine {dateiname}.dist oder {dateiname.example} an, die du versionieren und mit Beispieldaten befüllen kannst.

Dein Paket ist bereit in einem anderen Projekt eingebunden zu werden. Davon ausgehend, dass dieses Projekt bereits eine package.json hat, können wir direkt wieder eine Datei namens .npmrc anlegen:

@NickHatBoecker:registry=https://gitlab.com/api/v4/packages/npm
//gitlab.com/api/v4/projects/{PROJECT_ID}/packages/npm/:_authToken={YOUR_TOKEN}
//gitlab.com/api/v4/packages/npm/:_authToken={YOUR_TOKEN}

Die ersten beiden Zeilen kennst du ja bereits aus der .npmrc Datei vom Paket. Ersetze wieder „NickHatBoecker“ durch deinen Scope und ersetze {PROJECT_ID} und {YOUR_TOKEN}.

Schon fertig! Nun kannst du auf gewohntem Wege dein Paket mit yarn add hinzufügen.

yarn add @NickHatBoecker/cookie-consent

Ich hoffe die Anleitung hat dir weitergeholfen. Lass es mich gerne in den Kommentaren oder auf Twitter wissen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert