{"id":6615,"date":"2022-03-04T17:59:47","date_gmt":"2022-03-04T16:59:47","guid":{"rendered":"https:\/\/qdraw.nl\/blog\/?p=6615"},"modified":"2022-11-14T14:28:18","modified_gmt":"2022-11-14T13:28:18","slug":"een-eigen-npm-private-feed-maken-met-azure-devops","status":"publish","type":"post","link":"https:\/\/qdraw.nl\/blog\/technologie\/een-eigen-npm-private-feed-maken-met-azure-devops\/","title":{"rendered":"Een eigen NPM private feed maken met Azure Devops"},"content":{"rendered":"

In deze blogpost ga ik het hebben over een technische oplossing waarbij je software onderdelen kunt delen tussen verschillende applicaties. Dit is alleen relevant als je meerdere applicaties hebt en hier onderdelen tussen wil delen.<\/p>\n

There is an English version of this blog post<\/a><\/p>\n

TL;DR; (Samenvatting)<\/h2>\n

In deze blog koppelen we een private NPM-feed (Node Package Manager) om deze te gebruiken tijdens het ontwikkelen, in een container en in de Continuous Integration (CI) pipelines. Dit doe ik om versies te hebben van componenten. Ik gebruik hier de tools Azure DevOps, NPM, Nodejs en Docker. Om er voor te zorgen dat de authenticatie gebruiken we een Oath2 flow waarbij vlak voor de installatie (preinstall) tokens ophalen. Er is een Github repository aanwezig waar een werkend voorbeeld wordt gegeven<\/a><\/p>\n

Project wensen<\/h2>\n

Voor een project waar ik aan werk bestaat de wens naar losse NPM registries. NPM staat voor Node Package Manager. NPM wordt gebruikt om javascript gebaseerde projecten online te her gebruiken. Hiervoor wordt de publieke npmjs.com-feed gebruikt. Als je code wil delen tussen een beperkte set gebruikers of teams kun je private user (project) of organisation-scoped packages publiceren naar het npm registry. User (project) scoped betekent dat deze alleen binnen hetzelfde Azure DevOps project wordt gedeeld en als je organisation-scoped kiest wordt deze binnen de hele organisatie gedeeld. Deze private NPM registries hebben als voordeel dat front-end applicaties eigen ontwikkelde software onderdelen kunnen uitwisselen. <\/p>\n

Wat is Azure DevOps<\/h2>\n

Azure DevOps is een tool voor ontwikkelaars services waarmee teams werk kunnen plannen, samenwerken aan code-ontwikkeling en toepassingen kunnen bouwen en implementeren. Azure DevOps ondersteunt een samenwerkingscultuur en een reeks processen die ontwikkelaars, projectmanagers en bijdragers samenbrengen om software te ontwikkelen. Wij gebruiken de pipeline functionaliteiten het meeste. Dat is het centraal compileren van software en het releasen naar omgevingen. <\/p>\n

Azure DevOps Artifacts<\/h2>\n

Naast de pipelines bestaan er ook Artifacts. Met Azure Artifacts kunnen ontwikkelaars pakketten uit verschillende feeds en openbare registers delen en gebruiken. Pakketten kunnen worden gedeeld binnen hetzelfde team, dezelfde organisatie en zelfs openbaar. Azure Artifacts ondersteunt meerdere pakkettypen, zoals NuGet, npm, Python, Maven en Azure Universal Packages. <\/p>\n

Zo ziet een feed er bijvoorbeeld uit:<\/p>\n


\n

Docker containers<\/h2>\n

Voor het project gebruiken we Docker containers om de software te draaien.
\nEen container is een manier om software en alle dependencies van software bij elkaar te houden en makkelijk uit te wisselen tussen verschillende omgevingen. Een Docker-containerimage is een lichtgewicht, op zichzelf staand, uitvoerbaar softwarepakket dat alles bevat wat nodig is om een applicatie uit te voeren: code, runtime, systeemtools, systeembibliotheken en instellingen.<\/p>\n

Azure\u2019s Windows only oplossing<\/h2>\n

De offici\u00eble tool om de authenticatie naar je private NPM feed te regelen is vsts-npm-auth<\/a> alleen deze werkt alleen op Windows. Aangezien we in ons project een combinatie van Mac, Windows en Docker werken is dit geen werkbare oplossing in onze situatie.<\/p>\n

Personal access tokens (PAT\u2019s)<\/h2>\n

Helaas werken PAT\u2019s niet goed in combinatie met het ophalen van NPM-packages uit de Azure Artifacts feed. Ik krijg hier 401 errors op en kom er niet verder mee.<\/p>\n

Een alternatief: better-vsts-npm-auth<\/h2>\n

Ik ben verder gaan kijken en kwam het project better-vsts-npm-auth tegen. Deze tool doet een oauth2 authenticatie richting Azure DevOps en zorgt ervoor dat je als gebruiker een valide token hebt om npm packages mee op te halen<\/p>\n

In de praktijk: Stappen die vooraf nodig zijn<\/h2>\n

De volgende stappen heb je nodig om zelf een refresh token te generen.<\/p>\n

    \n
  1. Voordat je begint: Zorg ervoor dat op je ontwikkelmachine een recente versie van nodejs is ge\u00efnstalleerd<\/li>\n
  2. Zorg ervoor dat je toegang hebt tot het Azure DevOps Artifacts gedeelte: https:\/\/dev.azure.com\/YOUR_ORG\/_packaging<\/li>\n<\/ol>\n

     <\/p>\n

    Ik heb onderstaande code snippets verzameld en in een losse repository gezet. Deze is op Github te vinden en daar te downloaden.<\/a><\/p>\n

     <\/p>\n

    Maak een nieuwe feed aan in Azure Devops<\/h2>\n

    Binnen Azure DevOps valt dit onder Artifacts klik dan op \u201c+ Create Feed\u201d<\/p>\n

    Je kunt hier kiezen uit twee verschillende scopes<\/p>\n

      \n
    1. Project, dus alleen het huidige project<\/li>\n
    2. Organization: binnen de huidige Azure DevOps organization<\/li>\n<\/ol>\n

       <\/p>\n


      \n

      Installeer de global package better-vsts-npm-auth<\/code><\/h2>\n

      Op je lokale machine installeer je better-vsts-npm-auth<\/code> als globaal pakket zodat deze vanaf verschillende locaties aangeroepen kan worden<\/p>\n

      Doe dit middels het volgende commando:<\/p>\n

      \r\nnpm i -g better-vsts-npm-auth\r\n<\/code><\/pre>\n
       <\/p>\n
      Setup voor front-end library<\/h2>\n
      Ga naar je front-end library folder en zorg ervoor dat er twee dingen minimaal in staan.<\/p>\n
        \n
      1.  project .npmrc<\/code> file 
        \nDe project npmrc bevat de locaties van je eigen private feeds met een prefix van een pakketnaam. Hieronder geef ik een voorbeeld van hoe ik dat toepas.<\/li>\n
      2. package.json<\/code> bestand
        \nDit bevat de namen van alle dependencies die worden gebruikt.\n<\/li>\n<\/ol>\n
         <\/p>\n
        1. Library Project .npmrc<\/code> file<\/h3>\n
         <\/p>\n
        \r\n@qdraw-components:registry=https:\/\/pkgs.dev.azure.com\/qdraw\/_packaging\/demo\/npm\/registry\/\r\nalways-auth=true\r\n<\/code><\/pre>\n
         <\/p>\n
        2. Library Project package.json file<\/h3>\n
         <\/p>\n
        \r\n{\r\n    \"name\": \"@qdraw-components\/components\",\r\n    \"version\": \"0.0.1-rc.1\",\r\n    \"description\": \"Test front-end components\",\r\n    \"scripts\": {\r\n    },\r\n    \"author\": \"\",\r\n    \"license\": \"ISC\",\r\n    \"devDependencies\": {\r\n        \"typescript\": \"^4.5.5\"\r\n    },\r\n    \"dependencies\": {\r\n    },\r\n    \"main\": \"dist\/cjs\/index.js\",\r\n    \"module\": \"dist\/esm\/index.js\",\r\n    \"files\": [\r\n        \"dist\"\r\n    ],\r\n    \"types\": \"dist\/index.d.ts\"\r\n}\r\n<\/code><\/pre>\n
         <\/p>\n
        Authenticatie vanaf je ontwikkelmachine<\/h2>\n
        De authenticatie verloopt vervolgens via de Azure DevOps aan de hand van de recent ge\u00efnstalleerde tool. Dit doe ik binnen de front-end library folder waar ook het bovenstaande package.json en npmrc bestand staan.<\/p>\n
        \r\nbetter-vsts-npm-auth\r\n<\/code><\/pre>\n

        \n        
         <\/p>\n
        Als ik bovenstaande url kopieer in de browser krijg ik het volgende scherm te zien. Druk op Accept om verder te gaan<\/p>\n

        \n        
         <\/p>\n
        Wanneer je op Accept klikt krijg je het Succes scherm te zien. Op dit scherm staat een command met een unieke refresh token.<\/p>\n
         <\/p>\n

        \n        
         <\/p>\n
        We doen twee dingen met het token: Het command uitvoeren:<\/p>\n
        \r\nbetter-vsts-npm-auth config set refresh_token eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsIng1dCI6Im9PdmN6NU1fN3AtSGpJS2xGWHo5M3VfVjBabyJ9.eyJuYW1laW\r\n<\/code><\/pre>\n
        Kopieer het token gedeelte zonder: better-vsts-npm-auth config set refresh_token<\/code>. Zet dit als environment variable 
        DEMO_NPM_REFRESH_TOKEN<\/code>, hoe je dat doet staat hieronder beschreven. Deze variable hebben we later nodig in Docker. <\/p>\n
         <\/p>\n
        1. Op Mac OS voeg je het volgende toe aan je .zprofile of .zshrc:<\/h3>\n
        \r\nnano ~\/.zprofile\r\n<\/code><\/pre>\n
        \r\nexport DEMO_NPM_REFRESH_TOKEN=\"LongTokenHere\"\r\n<\/code><\/pre>\n
        Deze instellingen zijn pas actief na het herstarten van je terminalvenster<\/p>\n
         <\/p>\n
        2. Op Windows voeg je het volgende toe:<\/h3>\n