Publishing and Consuming npm packages with Artifactory

Synopsis

Thinking back to my recent post surrounding the concept of “modern web development“, I’m reminded that there are always challenges and difficult decisions to make. The lessons learned in those challenges are actually a developer’s greatest assets! I believe that every developer wants a sense of perpetuity — without that drive, a developer is far less capable and willing to “go the extra mile”.

One said challenge that I have learned much from, was a recent endeavor with JavaScript packaging. The project that I’m currently working on has a need for several applications to be developed as pluggable components such that they’re consumable in a host application. The thing is, they have to also serve as full stand alone web sites as well — we can’t simply have an HTML IFrame either, so don’t get ahead of yourself!

Server-side Packaging

The server-side code is written in C# with MVC 6 and Web API 2. Packaging and consuming these parts of the application is easy, obviously NuGet comes into play.

NuGet is the package manager for the Microsoft development platform including .NET

Your ASP.NET Core 1.0 project’s property window has a Build tab. From that tab you can simply check the “Produce outputs on build”.

produce outputs on build

This option will actually create your NuGet package. One important note is that Visual Studio will no longer honor *.nuspec files, in fact the project.json file now takes the place of this metadata file and serves to define the package. The schema for this JSON file can be found here.

All of our MVC 6 views can be embedded resources that are packaged into the .dll, and when RC2 of ASP.NET Core 1.0 is released the introduction of the CompositeFileProvider will exist. This will allow for the EmbeddedFileProvider and the PhysicalFileProvider objects to work together. This means that your MVC 6 applications will be capable of consuming other packaged MVC 6 applications with ease.

Client-side Packaging

Now that we have managed to package up our server-side code, what do we need to know for doing the same for the JavaScript files. Since we are working with Angular2 and MVC 6 we can anticipate a pretty familiar file structure. Essentially everything that exists under our wwwroot\app directory are the contents of the package.

npm

While I did mention a few noteworthy things in one of my earlier posts regarding npm, I will state a few additional things that are important here. Even if you are not using Node.js for hosting your application, you will still need to familiarize yourself with its package manager, namely npm.

Artifactory

I must say that I have been impressed with the ease-of-use and the attractive user experience in working through setting up my remote npm registry through Artifactory.

” As the first, and only, universal Artifact Repository Manager on the market, JFrog Artifactory fully supports software packages created by any language or technology.

Artifactory allows for the development team to publish npm packages to a shared registry, this registry is virtual such that it also allows for public packages to be read from the public npm registry. Artifactory is seamlessly tethering the best of both worlds, we are able to resolve dependencies in our package’s package.json regardless of whether they’re private packages created from the team or public one’s such as Angular2. For a word on configuring these repositories check it out here. Additionally, Artifactory is good at caching public packages as to optimize resolution — who says you can’t have your cake and eat it too?

Configuration

Not to spoil it for you too much, but the configuration is rather straightforward.

  • Execute a cURL command against the Artifactory  npm auth API

curl -u UserName:Password 'https://insert.your.artifactory/api/npm/auth'

This command should return three lines of credentials, note the password is a Base64 encoded string.

  • Paste the returned credentials into the %USERPROFILE%\.npmrc file
  • Finally, execute the following npm command

npm config set registry 'https://insert.your.artifactory/npm/repo'

This command will set the npm registry to point to your Artifactory repository. Then you’re off to the races! At this point it is all of your standard commands, i.e.; npm install and npm push.

 

Advertisements