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.
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„.
Such nun den Schalter für „Packages“ und aktiviere diesen. Danach sollte das Ganze so aussehen:
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.
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 „@“.
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/" } }
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
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.
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
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.