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
@email@example.com 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!
RUN command below was my initial attempt. Without the
@firstname.lastname@example.org 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 email@example.com firstname.lastname@example.org @email@example.com @pnp/office365-cli@next @firstname.lastname@example.org && \ npm cache verify
This is what failed! Keep reading :-)
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.
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 @email@example.com --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
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!