This post is about how to create a Development Environment for SharePoint Framework (SPFx) if your box does not have access to the Internet.

Exposition

Microsoft recently published the Feature Pack 2 for SharePoint 2016. The biggest shot in this update is that it makes the long waited SharePoint Framework (SPFx) available for the on-prem customers, which was available for SharePoint Online users since 23^rd February 2017. The installation of the framework is a relatively straightforward process, you just have to install Node.JS, Visual Code, Yeoman Generator, and the SharePoint Framework specific toolkit.

The only problem is, that the instructions available currently (like this one from Vesa Juvonen) shows only how to install that if your box has access to the Internet. Of course, since if you are working with SharePoint Online, you're not likely to work on a box without access to the net, but if you are a developer in a locked-down corporate environment, you might have a bit of issue. Let's see how to get around that.

If you want to skip the drama, just jump to the Falling Action section of this post.

Climax

Act 1

To expand the action plan of the SPFx Toolkit installation on a clean machine, this is what you have to do:

1. Install the latest version of Node.JS.
2. In a PowerShell window install the Yeoman Generator.
   • npm install -g yo
3. Still in a PowerShell window install Gulp (for example) for previewing and testing your solution.
   • npm install -g gulp
4. Still in the PowerShell install the Microsoft SharePoint Framework toolkit
   • npm install -g @microsoft/generator-sharepoint
5. Finally install the Visual Studio Code (or whatever dev environment you want to use).

My first thought was that I'm just going to use Fiddler to see what is being downloaded when I run the npm installer. Oh, boy, was I wrong... While Fiddler is a great tool most of the times, certain modules are not using the INetProxy configuration, so obviously it won't be aware that there is something trying to sniff the wire, it will simply get around that, so I had to find something else.

Act 2

After a few hours of search I've found a nice little project by Glen R. Goodwin (co-authored by Dan Bornstein and a few others), called NPMBox, which is an "npm addon utility for creating and installing from an archive file of an npm install, including dependencies. This lets you create a "box" of an installable package and move it to an offline system that will only install from that box."

The tool really does work. It indeed is capable of fetching all the packages, and dependencies (almost, but let's not run that fast...), and put it into a nice little file that you can copy onto your locked-down environment and install them offline.

The installation of the Yeoman and Gulp packages went without problem, but the installation of the SharePoint Framework toolkit failed with a naughty error message:

Installing @microsoft/generator-sharepoint...
An error occurred while installing @microsoft/generator-sharepoint.
@microsoft/generator-sharepoint was not installed.

Act 3

This is where I had to come back to the original question, how can I sniff what npm is doing on the network? Fortunately Luke Brendt figured this out already. Well... Not exactly this, but how to use Node.JS behind a proxy.

npm config set strict-ssl false
npm config set registry "http://registry.npmjs.org/"
npm --proxy http://username:password@cacheaddress.com.br:80 install packagename

Given that Fiddler is nothing else, but a proxy, I could use the instructions in his blog entry to configure my machine to use Fiddler as a man in the middle. Awesome... Next installation attempt revealed that the NPMBox package is missing a single component. (http://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-1.1.0.tgz).

How to put this into the package. Well... That's not an easy job, but why would I bother with that, when Fiddler has a nice AutoResponder function? The only thing needed to be done is saving this file somewhere and creating a nice rule pointing to this file. Something like this:

Falling Action

To summarize, you have two options to install the bits required on a SharePoint Framework DEV Environment:

Method 1: Capture the whole installation network traffic and play it back with Fiddler.

• This is probably the easier way to do it, although it does not make it possible to automate the installation, should you need to create installation packages.
  1. Configure NPM to use HTTP traffic.

npm config set strict-ssl false
npm config set registry "http://registry.npmjs.org/"

1. 2. Start Fiddler and start capturing.
   3. Install your package using Fiddler as a proxy.

npm --proxy http://username:password@cacheaddress.com.br:80 install packagename

1. 4. Save all packets from Fiddler.
   5. Transfer the .SAZ file to your locked down box.
   6. Start Fiddler on the locked down box.
   7. Import the .SAZ file into the Autoresponse rules.
      
   8. Configure the locked down box as you did with the previous one (step 1 in this section).
   9. Run the installation using Fiddler as a proxy, just as you did with the previous one (step 3 in this section.)

Method 2: Use NPMBox to package most of the stuff and use Fiddler to replay only the single file that is missing from the package.

• Personally, I favor this option as this is cleaner and could be packaged in the future, when the guys fix that tiny little problem of the missing file.
  1. Install NPMBox.

npm install -g npmbox

1. 2. Create an npmbox packate for Yeoman, Gulp and the SharePoint Framework Toolkit.

npmbox --proxy='http://127.0.0.1:8888' -t c:TempYo yo
npmbox --proxy='http://127.0.0.1:8888' -t c:TempGulp gulp
npmbox --proxy='http://127.0.0.1:8888' -t c:TempSPFx @Microsoft/generator-sharepoint

1. 3. Configure NPM to use HTTP traffic.

npm config set strict-ssl false
npm config set registry "http://registry.npmjs.org/"

1. 4. Re-install the SharePoint Framework toolkit using the NPMBox package.

npmunbox --proxy='127.0.0.1:8888' -g SPFx

1. 5. Take note of the URL of the extra package that is loaded by the installer. It's going to be a version of the postcss-modules-extract-imports-1.1.0.tgz module. (Note: this step is required only until the NPMBox guys fix the issue with the missing packet.)
   6. Save the module as a file.
   7. Copy the NPMBox packages and the extra file to the locked down box.
   8. Install Fiddler and configure an AutoResponder rule for the missing packet with the URL in step 5. (Note: this step is required only until the NPMBox guys fix the issue with the missing packet.)
      
   9. Use NPMUnbox to install the offline packages.

npmunbox --proxy='127.0.0.1:8888' -g Yo
npmunbox --proxy='127.0.0.1:8888' -g Gulp
npmunbox --proxy='127.0.0.1:8888' -g SPFx

Dénouement

Now that you have a way to deploy a SharePoint Framework (SPFx) environment in any locked down environment, you can test, try, use and spread the word that this is really some good stuff for SharePoint let it be Online or On-prem installation.