Discussion on "How Docker containers eliminate SPFx environment setup"

$€®¥09@ · 2022-02-18T15:59:30.812Z

The SharePoint Framework (SPFx) is a package that is updated very often. On the one hand, this is very good, but on the other hand, it is also a problem. Because, depending on the version, it uses different node, npm, TypeScript, and React versions (...

Hi! Thanks for the great article. I tried but ultimately failed to convert your solution to SharePoint 2019 on-premises. Should you have time, could you publish a docker file that works with SPFx 1.4.1 and includes the fast serve package? Thanks a lot!

Hi János Nagy thank you for the comment. Yesterday I wanted to (quickly) deploy SPFx version 1.12.1 (last version supporting SP2019) as a Docker image and as alpine version. Unfortunately, there were some problems with the permissions, so that an npm i resulted in errors. When I have a bit more time, I will take a closer look. In the meantime, you can use the official Docker image version 1.12.1 (docker pull m365pnp/spfx:1.12.1) and install spfx-fast-serve manually (or modify the Dockerfile and add spfx-fast-serve).

For example:

FROM node:14.17.0

EXPOSE 5432 4321 35729

ENV NPM_CONFIG_PREFIX=/usr/app/.npm-global \
  PATH=$PATH:/usr/app/.npm-global/bin

VOLUME /usr/app/spfx
WORKDIR /usr/app/spfx
RUN useradd --create-home --shell /bin/bash spfx && \
    usermod -aG sudo spfx && \
    chown -R spfx:spfx /usr/app

USER spfx

RUN npm i -g gulp@4 yo @microsoft/generator-sharepoint@1.12.1 spfx-fast-serve

CMD /bin/bash

Hi Sergej,

Thanks a lot for your article as it helped me fix several issues I've been struggling with for hours when trying to use to the 'docker image for SPFx 1.15.0' (https--hub.docker.com/r/m365pnp/spfx/) on Windows 10.

As I'm new to docker (with WSL 2), I had a first issue (not mentioned in your article) to copy and install the trusted dev certificate:

It is generated via 'gulp trust-dev-cert' but, since the command is run in the container, it's not generated under '/usr/app/spfx' but as '/home/spfx/.rushstack/rushstack-serve.pem' file!
Therefore, to be able to install it on your host (Win10 cert store), it has to be converted as .cer file and copied first to the /usr/app/spfx' folder (which is mapped to the SPFx project folder in Win10) using the following command: openssl x509 -inform PEM -in ~/.rushstack/rushstack-serve.pem -outform DER -out ./spfx-dev-cert-docker.cer
Once accessible from the project folder in Win10, import it into the user's Trusted Root Certification Authorities store.

But that was not enough as I bumped into the 2nd issue dealing with the web part not available in the workbench (same problem as you mentioned in your article). Although that's a known issue with >=1.14.0 as reported on the 'docker m365pnp/spfx page' (https--hub.docker.com/r/m365pnp/spfx/), the proposed fix simply doesn't work (the ipAddress attribute does not exist)! After many tryouts, both fixes for 1.13.1 still applies:

add "hostname": "0.0.0.0" in serve.json
modifiy node_modules\@microsoft\spfx-heft-plugins\lib\plugins\webpackConfigurationPlugin\WebpackConfigurationGenerator.js:408 (and not line 393)

After these changes, the web part appears and run correctly in the workbench.

Note: sorry for the links but I could not include any url in my comment (as I'm new Hashnode user) :-(

Hey Franck Silvestre thank you for the comment and sorry for the late reply. I actually didn't look at how to get the certificate "trusted". For me, it was easier to go to the localhost URL and then manually click on the "trust" button (as described in the blog). Can you tell me if your solution is a permanent one or if you have to do it every time you create a new container/new project? I assume that you have to do it every time. If it is a temporal solution, then the "manual trust" is the faster solution, in my opinion.

Did I understand you correctly that under >=1.14.0 you always have to adjust the file node_modules\@microsoft\sp-build-web\node_modules\@microsoft\spfx-heft-plugins\lib\plugins\webpackConfigurationPlugin\WebpackConfigurationGenerator.js? If so, you don't have to. ipAddress-Property is just not in the schema definition, but it works. I have already used this in some projects. So you can ignore the warning in the IDE.

Just out of interest, are you using the original image or mine?

EDIT: Funny coincidence: I'm looking at how to get SPFx working with nvm and found an article that also describes your way regarding the certificate.

EDIT 2: I have just tried it out. If you create a new container for the project that already has the certificate installed, you don't have to do anything. However, if you create a new project, you have to install the certificate again. Very sad.

Search Hashnode

How Docker containers eliminate SPFx environment setup

Responses(2)