Installing Private NPM Packages on AppCenter

AppCenter is a great CI platform for Mobile Apps. At Theodo we use it as the standard tool for our react-native projects.

In a recent project, we needed to have a shared NPM package between the React and React-Native applications. There is no mention of how to achieve this in the AppCenter documentation, and if you ask their support they will say it’s not possible.

Me: Hello, we’re wanting to have a shared library used in our project. This would require an npm install from a private NPM repo (through package cloud). What is the best practice for adding a private npm access on the AppCenter CI?

Microsoft: We currently only support cloud git repositories hosted on VSTS, Bitbucket and GitHub. Support for private repos is not available yet but we are building new features all the time, you can keep an eye out on our roadmap for upcoming features.

Luckily there is a way!

AppCenter provides the ability to add an `appcenter-post-clone.sh` script to run after the project is cloned. To add one, just add a file named `appcenter-post-clone.sh`, push your branch and, on the configure build screen, see it listed.

Pro Tip: You need to press “Save and Build” on the build configuration after pushing a new post-clone script on an existing branch.

Now, what to put in the script?

Having a .npmrc in the directory you run ‘npm install’ or ‘yarn install’ from allows you to pass authentication tokens for new registries.

We want a .npmrc like this:

always-auth=true
registry=https://YOUR_PACKAGE/NAME/:_authToken=XXXXXXXX

Obviously, we don’t really want to commit our read token to our source code, therefore we should use an environment variable.

So we can add to our post-clone script:

touch .npmrc
echo "always-auth=true
registry=https://YOUR_PACKAGE/NAME/:_authToken=${READ_TOKEN}" > .npmrc

Now, on AppCenter, we can go into the build configuration and add an environment variable called ‘READ_TOKEN’.

Now rebuild your branch and your package installs should pass.