Discussion on "How Docker containers eliminate SPFx environment setup"

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

Serve multiple SPFx/Node.js versions on one environment without installation

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.

How Docker containers eliminate SPFx environment setup

Written by

Responses2

Search Hashnode

How Docker containers eliminate SPFx environment setup

Written by

Responses2