A Docker Image for PnP SPFx Projects

This post really should be titled The SharePoint community comes to the rescue!, but we'll get to that in a minute.  I can't dig deep into Docker in this post, but I really wanted to document how awesome this community is!

I'm relatively new to Docker but I have been digging in recently to see what the fuss is about and I am really excited about the possibilities, especially  from a development perspective.  I spent a little time getting familiar with the basics of using Docker for Development, followed some of the Docker guidance for SharePoint development documented by Waldek Mastykarz, and even created a couple Dockerfile's and images of my own.  I thought, "I'm an expert now right?"

My goal was to create a SharePoint Framework Docker image that I can use to create some demo web parts and extensions as needed.  I wanted the image to include the new PnP SPFx Yeoman generator so I could take advantage of pre-loading the property controls and react controls and other goodness from the generator.    

I had a stable Docker image that had SPFx 1.7.1 installed, so I thought it would be as simple as adding the pnp/generator-spfx npm package. However, I hit a roadblock pretty quickly with what looked like permission issues when adding the @pnp/generator-spfx@1.6.1 into the Docker RUN command. Simple enough, right?  Well, here's where being a n00b and making mistakes humbles you quickly and presents a learning opportunity!  

The RUN command below was my initial attempt. Without the @pnp/generator-spx@1.6.1 in the mix, things worked fine, but added the entry to the npm install command caused some strange errors with the docker build attempts. I'll spare you the details, since they are documented in the Github issue in the @pnp/generator-spfx issue related to this post.

RUN npm i -g gulp@3.9.1 yo@2.0.5 @microsoft/generator-sharepoint@1.7.1 @pnp/office365-cli@next @pnp/generator-spfx@1.6.1 && \
   npm cache verify

This is what failed! Keep reading :-)

So, with docker build making me shed tears and question my career choices (it's a bit late at this point!), I exercise my Google-fu,  scoured StackOverflow and reached out to  Twitter-verse!  

The Twitter-verse does NOT disappoint!   The first helping hand came from @SharePointMadam (Theresa Eller) as a boost to the Tweet.  

This quickly escalated to include several people in the SharePoint community, including Stefan Bauer (@StfBauer), one of the maintainers of the PnP SPFx generator project.

Long story short, Stefan asked me to log an issue, and within an hour I had a detailed explanation of what the issue was and the following updated Dockerfile to try.  

FROM node:8.12.0

EXPOSE 5432 4321 35729

RUN npm i -g gulp@3 yo @pnp/generator-spfx@1.6.1 --unsafe-perm

VOLUME /usr/app/spfx
WORKDIR /usr/app/spfx

RUN useradd --create-home --shell /bin/bash spfx && \
    chown -R spfx:spfx /usr/app/spfx

USER spfx

CMD /bin/bash

Stefan explained, in detail, things that were issues with my Dockerfile, and some pointers on specifics of the @pnp/generator-spfx that obviate the need for installing extra packages.  Awesome and greatly appreciated!  

I updated the Dockerfile with the above content, ran into another unrelated issue that somehow was caching my old Docker image.  I cleaned all of the local images with the docker system prune command, rebuilt the Docker image, called docker run and then called the @pnp/spfx generator.  Success!

I created a Docker image (pskelly/tw-spfx) based on Stefan's Dockerfile above that you can use to test this out.  

Open a terminal (I am on a Mac, on Windows, your mileage may vary) and create a new folder for your project. The following will create a folder and change directories into the new folder.   mkdir spfx-docker && cd $_

Next run the following command to pull and run the Docker image locally.

docker run -it --rm --name hello-spfx -v $PWD:/usr/app/spfx -p 5432:5432 -p 4321:4321 -p 35729:35729 pskelly/tw-spfx:1.7.1

This will start a Docker container with the PnP SPFx generator loaded. Once the container is running and you see the spfx@xxxx bash prompt, you are ready to get started with the @pnp/spfx generator!

I have been in the SharePoint community for more than 15 years now, I have been involved in local user groups and local SPS and other conferences, but this global community just blows my mind! This community seems to just keep getting better!  

Thanks again to everyone who assisted and especially to @StfBauer and the entire SharePoint Community! These kinds of interactions always inspire me to find ways to contribute back!

HTH someone else - and if it does let me know with a comment or let me know on Twitter!