Hello, Waldek.
Can you put Yeoman default template inside docker's image?
The reason for that is that I want to use SPFx offline and Yeoman itself tries to pull packages from the internet.
Thanks, Alex.

Docker running, directory shared, changed to project directory, ran given command in Terminal and I get the message : Unable to find image 'waldekm/spfx:latest' locally

Hi, @waldekmastykarz
i have problem with last tag. Maybe you have a solution.

You have recently updated the version of the image with the node. From 10.22 to 12.21 (commit). With this version the command gulp serve not work. Error: ReferenceError: primordials is not defined. If i take your image with tag 1.11.0, then everything works as it should.

On the ms docs site they write that the node version should be 10.

It is more like a question: is it possible to run the docker container with a live SP portal?

I've managed to run the local workbench, but have troubles running an application customizer.

When I open the default URL:
https://tenant.sharepoint.com/sites/sitecollection/SitePages/Home.aspx?
debugManifestsFile=https%3A%2F%2Fspfx%3A5432%2Ftemp%2Fmanifests.js
&loadSPFX=true
&customActions=%7B%2261049142-3275-4d7f-af7f-01102f143f3c%22%3A%7B%22location%22%3A%22ClientSideExtension.ApplicationCustomizer%22%2C%22properties%22%3A%7B%22testMessage%22%3A%22Test%20message%22%7D%7D%7D

I get the following error:
Error: ENOENT: no such file or directory, stat '/usr/app/spfx/dist/public/temp/manifests.js'

I have registered the localhost in the hosts file.
Tried debugManifestsFile URL to both localhost:4321 and spfx:5432. The local workbench successfully opens at https://localhost:4321

Any guidance on how to run it against live SP portal?

Getting "EADDRINUSE" error while running gulp serve. Here are the gulp serve logs.

$ gulp serve
Build target: DEBUG
[18:12:19] Using gulpfile /usr/app/spfx/gulpfile.js
[18:12:19] Starting gulp
[18:12:19] Starting 'serve'...
[18:12:19] Starting subtask 'configure-sp-build-rig'...
[18:12:19] Finished subtask 'configure-sp-build-rig' after 51 ms
[18:12:19] Starting subtask 'spfx-serve'...
[18:12:19] [spfx-serve] To load your scripts, use this query string: ?debug=true&noredir=true&debugManifestsFile=https://0.0.0.0:4321/temp/manifests.js
[18:12:22] Starting server...
Starting api server on port 5432.
Registring api: /workbench
Registring api: /
[18:12:26] Finished subtask 'spfx-serve' after 7.78 s
[18:12:26] Starting subtask 'pre-copy'...
[18:12:27] Finished subtask 'pre-copy' after 676 ms
[18:12:27] Starting subtask 'copy-static-assets'...
[18:12:27] Starting subtask 'sass'...
{ Error: listen EADDRINUSE: address already in use :::5432
at Server.setupListenHandle [as _listen2] (net.js:1280:14)
at listenInCluster (net.js:1328:12)
at Server.listen (net.js:1415:7)
at SpfxServeTask.executeTask (/usr/app/spfx/node_modules/@microsoft/gulp-core-build-serve/lib/ServeTask.js:70:65)
at SpfxServeTask.executeTask (/usr/app/spfx/node_modules/@microsoft/sp-build-core-tasks/lib/spfxServe/SpfxServeTask.js:41:22)
at Promise (/usr/app/spfx/node_modules/@microsoft/gulp-core-build/lib/tasks/GulpTask.js:171:31)
at new Promise ()
at SpfxServeTask.execute (/usr/app/spfx/node_modules/@microsoft/gulp-core-build/lib/tasks/GulpTask.js:163:16)
at _executeTask (/usr/app/spfx/node_modules/@microsoft/gulp-core-build/lib/index.js:356:44)
at output.then (/usr/app/spfx/node_modules/@microsoft/gulp-core-build/lib/index.js:254:44)
at process._tickCallback (internal/process/next_tick.js:68:7)
at Function.Module.runMain (internal/modules/cjs/loader.js:834:11)
at startup (internal/bootstrap/node.js:283:19)
at bootstrapNodeJSCore (internal/bootstrap/node.js:623:3)
code: 'EADDRINUSE',
errno: 'EADDRINUSE',
syscall: 'listen',
address: '::',
port: 5432 }
[18:12:27] Error - Unknown
listen EADDRINUSE: address already in use :::5432
{ Error: listen EADDRINUSE: address already in use 0.0.0.0:4321
at Server.setupListenHandle [as _listen2] (net.js:1280:14)
at listenInCluster (net.js:1328:12)
at doListen (net.js:1461:7)
at process._tickCallback (internal/process/next_tick.js:63:19)
at Function.Module.runMain (internal/modules/cjs/loader.js:834:11)
at startup (internal/bootstrap/node.js:283:19)
at bootstrapNodeJSCore (internal/bootstrap/node.js:623:3)
code: 'EADDRINUSE',
errno: 'EADDRINUSE',
syscall: 'listen',
address: '0.0.0.0',
port: 4321 }
[18:12:27] Error - Unknown
listen EADDRINUSE: address already in use 0.0.0.0:4321
[18:12:27] Opening https://localhost:5432/workbench using the default OS app
(node:252) UnhandledPromiseRejectionWarning: Error: Exited with code 3
at ChildProcess.cp.once.code (/usr/app/spfx/node_modules/opn/index.js:84:13)
at Object.onceWrapper (events.js:286:20)
at ChildProcess.emit (events.js:198:13)
at maybeClose (internal/child_process.js:982:16)
at Socket.stream.socket.on (internal/child_process.js:389:11)
at Socket.emit (events.js:198:13)
at Pipe._handle.close (net.js:607:12)
(node:252) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:252) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
[18:12:27] Finished subtask 'copy-static-assets' after 278 ms
[18:12:28] ==================[ Finished ]==================
Error - Unknown
listen EADDRINUSE: address already in use :::5432
Error - Unknown
listen EADDRINUSE: address already in use 0.0.0.0:4321
[18:12:28] Finished subtask 'sass' after 1.23 s
[18:12:28] Starting subtask 'tslint'...
[18:12:38] [tslint] tslint version: 5.12.1
[18:12:38] Starting subtask 'tsc'...
[18:12:38] [tsc] typescript version: 3.3.4000
[18:12:38] Project spfx version:0.0.1
[18:12:38] Build tools version:3.12.1
[18:12:38] Node version:v10.18.1
[18:12:38] Total duration:1.55 min
[18:12:38] Task errors:4
[18:12:58] Finished subtask 'tsc' after 21 s
[18:12:59] Finished subtask 'tslint' after 31 s
[18:12:59] Starting subtask 'post-copy'...
[18:12:59] Finished subtask 'post-copy' after 580 μs
[18:12:59] Starting subtask 'collectLocalizedResources'...
[18:12:59] Finished subtask 'collectLocalizedResources' after 7.76 ms
[18:12:59] Starting subtask 'configure-webpack'...
[18:13:08] Finished subtask 'configure-webpack' after 8.55 s
[18:13:08] Starting subtask 'webpack'...
[18:13:32] Finished subtask 'webpack' after 24 s
[18:13:32] Starting subtask 'configure-webpack-external-bundling'...
[18:13:32] Finished subtask 'configure-webpack-external-bundling' after 1.43 ms
[18:13:32] Starting subtask 'copy-assets'...
[18:13:32] Finished subtask 'copy-assets' after 103 ms
[18:13:32] Starting subtask 'write-manifests'...
[18:13:45] Finished subtask 'write-manifests' after 13 s
[18:13:45] Starting subtask 'reload'...
[18:13:45] Finished subtask 'reload' after 1.85 ms

Hi there, I can not understand where is my mistake:

OS: Windows 10

Docker Desktop v3.5.2 setting > General > Use the WLS 2 based engine is ticked

Using Windows Terminal which has been running as administrator, I ran this command in a Ubuntu terminal:

docker run -it --rm --name ${PWD##*/} -v $PWD:/usr/app/spfx -p 5432:5432 -p 4321:4321 -p 35729:35729 waldekm/spfx:1.4.1

And then after running the container, using this command: npm -g ls -depth=0 checked it, but got this error:

npm ERR! invalid: [email protected] /usr/local/lib/node_modules/npm/node_modules/tar/node_modules/minizlib

After running gulp serve I got this error:

[10:06:01] Error - 'copy-static-assets' sub task errored after 14 s
EPERM: operation not permitted, chmod '/usr/app/spfx/lib/webparts/scriptEditor/ScriptEditorWebPart.manifest.json'
{ Error: EPERM: operation not permitted, chmod '/usr/app/spfx/lib/webparts/scriptEditor/components/ScriptEditor.module.css'
errno: -1,
code: 'EPERM',
syscall: 'chmod',
path: '/usr/app/spfx/lib/webparts/scriptEditor/components/ScriptEditor.module.css' }
[10:06:01] Error - Unknown
EPERM: operation not permitted, chmod '/usr/app/spfx/lib/webparts/scriptEditor/components/ScriptEditor.module.css'
{ Error: EPERM: operation not permitted, chmod '/usr/app/spfx/src/webparts/scriptEditor/components/ScriptEditor.module.scss.ts'
errno: -1,
code: 'EPERM',
syscall: 'chmod',
path: '/usr/app/spfx/src/webparts/scriptEditor/components/ScriptEditor.module.scss.ts' }
[10:06:01] Error - Unknown
EPERM: operation not permitted, chmod '/usr/app/spfx/src/webparts/scriptEditor/components/ScriptEditor.module.scss.ts'
[10:06:01] ==================[ Finished ]==================
Warning - [spfx-serve] When serving in HTTPS mode, a PFX cert path or a cert path and a key path must be provided, or a dev certificate must be generated and trusted. If a SSL certificate isn't provided, a default, self-signed certificate will be used. Expect browser security warnings.
Error - 'copy-static-assets' sub task errored after 14 s
EPERM: operation not permitted, chmod '/usr/app/spfx/lib/webparts/scriptEditor/ScriptEditorWebPart.manifest.json'
Error - Unknown
EPERM: operation not permitted, chmod '/usr/app/spfx/lib/webparts/scriptEditor/components/ScriptEditor.module.css'
Error - Unknown
EPERM: operation not permitted, chmod '/usr/app/spfx/src/webparts/scriptEditor/components/ScriptEditor.module.scss.ts'
[10:06:02] Project pnp-script-editor version: 1.0.0
[10:06:02] Build tools version: 3.2.7
[10:06:02] Node version: v8.9.4
[10:06:02] Total duration: 1.33 min
[10:06:02] Task warnings: 1
[10:06:02] Task errors: 5
[10:06:02] Error - 'undefined' errored after
"orchestration aborted"
[10:06:02] Error - 'undefined' errored after
"orchestration aborted"

And finaly in browser I get this error:

manifests.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
sp-loader-assembly_en-us.js:16841 Beacon: To disable logging to the console set "window.disableBeaconLogToConsole = true" in the debug window
sp-loader-assembly_en-us.js:20952 Beacon: To disable logging to the console set "window.disableBeaconLogToConsole = true" in the debug window
workbenchInit.js:8 Uncaught TypeError: Cannot read property 'getManifests' of undefined
at workbenchInit.js:8
sp-loader-assembly_en-us.js:5428 Uncaught (in promise) Error: ***Invalid preloaded data.
at sp-loader-assembly_en-us.js:5428
DevTools failed to load source map: Could not load content for https://localhost:4321/node_modules/@microsoft/sp-webpart-workbench/node_modules/@microsoft/sp-loader/dist/sp-core-library_en-us.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

Hi,

I'm facing an error while initializing a project with yeoman in the 1.7.0 image.

i'm getting the following error

====================================================

[email protected] install /usr/app/spfx/node_modules/node-sass
node scripts/install.js

fs.js:646
return binding.open(pathModule._makeLong(path), stringToFlags(flags), mode);
^

Error: EINVAL: invalid argument, open '/usr/app/spfx/node_modules/node-sass/package.json'
at Object.fs.openSync (fs.js:646:18)
at Object.fs.readFileSync (fs.js:551:33)
at Object.Module._extensions..json (module.js:670:20)
at Module.load (module.js:566:32)
at tryModuleLoad (module.js:506:12)
at Function.Module._load (module.js:498:3)
at Module.require (module.js:597:17)
at require (internal/module.js:11:18)
at Object. (/usr/app/spfx/node_modules/node-sass/lib/extensions.js:7:9)
at Module._compile (module.js:653:30)

=========================================================

i tried with the 1.6 and the 1.5.1 image and it works fine.

thanks to find below the choice done during the yo man wizard

https://pbs.twimg.com/media/DrvDtx4WsAAZadq.jpg

Regards,

Hi, Waldek:

I probably have an unique issue. I tried to use your image, however I can't share my drive directly in docker settings due to enterprise policy. I suspected GPO disabled SMB V1.

Through some research, I tried to manually map my D drive to docker host.

1. Share D drive
   net share D=D:\ /grant:"{domain}{user}",FULL /CACHE:None

2. Map D drive to docker host, and force SMB V2
   docker run --rm -it --privileged --userns=host --pid=host --network=host --ipc=host --uts=host osexp2000/nsenter-dockerd sh

   /# mnt=/var/lib/docker/D
   /# [ -e $mnt ] || mkdir $mnt
   /# mount -t cifs //192.168.65.2/D $mnt -o user={user}, dom={domain}, vers=2.0

3. Run container with mapped folder
   docker run -it --rm --name SPXProjects -v /var/lib/docker/D/SPXProjects/1.6.0:/usr/app/spfx -p 5432:5432 -p 4321:4321 -p 35729:35729 waldekm/spfx:1.6.0

   spfx@1a1f69103ec0:/usr/app/spfx$ ls
   test.txt
   spfx@1a1f69103ec0:/usr/app/spfx$ mkdir test
   mkdir: cannot create directory 'test': Permission denied
   spfx@1a1f69103ec0:/usr/app/spfx$

As you can see, in the container, I can view the folder, but can't change anything inside it. I am wondering if there is a way to elevate user spfx's permission.

When I mapped a folder to a container based on image ubuntu, I don't see any issue.

docker run -it --rm -v /var/lib/docker/D/Docker/learningLinux:/learningLinux ubuntu

root@2cc90e2287f0:/# cd learningLinux
root@2cc90e2287f0:/learningLinux# ls
test1.txt test2.txt test3.txt test4.txt
root@2cc90e2287f0:/learningLinux# mkdir test
root@2cc90e2287f0:/learningLinux# ls
test test1.txt test2.txt test3.txt test4.txt
root@2cc90e2287f0:/learningLinux#

Thanks
Tony Huang

Let's update this image with the latest SPFx version?

I am using a Windows 10 Pro host (10.0.19043) with WSL 2 and Windows Docker (Docker Desktop 4.3.0 (71786).

Running under WSL 2 is an instance of Ubuntu. I have two images within Docker waldekm/spfx:latest and waldekm/spfx:1.12.1

Within the Ubuntu instance running under WSL 2 I have created a folder in /home/rob/projects/sp-dev-demo and git cloned my SPfx project there.

I then start Windows Docker by using
docker run -it --rm --name SPfx-Development-Demo -v $PWD:/usr/app/spfx -p 4321:4321 -p 35729:35729 waldekm/spfx:1.12.1

This starts the Docker Container

If I run npm install to install the local dependencies I get the following error message

spfx@207b798a3966:/usr/app/spfx$ npm install
npm WARN checkPermissions Missing write access to /usr/app/spfx
npm ERR! code EACCES
npm ERR! syscall access
npm ERR! path /usr/app/spfx
npm ERR! errno -13
npm ERR! Error: EACCES: permission denied, access '/usr/app/spfx'
npm ERR! [Error: EACCES: permission denied, access '/usr/app/spfx'] {
npm ERR! errno: -13,
npm ERR! code: 'EACCES',
npm ERR! syscall: 'access',
npm ERR! path: '/usr/app/spfx'
npm ERR! }
npm ERR!
npm ERR! The operation was rejected by your operating system.
npm ERR! It is likely you do not have the permissions to access this file as the current user
npm ERR!
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator.

npm ERR! A complete log of this run can be found in:
npm ERR! /home/spfx/.npm/_logs/2021-12-09T12_11_30_775Z-debug.log

If I type whoami I get the response of spfx

If I try and create a file as the spfx user using touch file.txt I get permission denied.

If I try and edit the code with VS Code and save a file I also get permission denied errors.

If I list the files in the folder using ls -l I see the following

spfx@207b798a3966:/usr/app/spfx$ ls -l
total 836
-rw-r--r-- 1 node node 2553 Dec 8 19:21 README.md
drwxr-xr-x 2 node node 4096 Dec 8 19:21 config
-rw-r--r-- 1 node node 407 Dec 8 19:21 gulpfile.js
-rw-r--r-- 1 node node 823269 Dec 8 19:21 package-lock.json
-rw-r--r-- 1 node node 956 Dec 8 19:21 package.json
drwxr-xr-x 3 node node 4096 Dec 8 19:21 src
drwxr-xr-x 2 node node 4096 Dec 8 19:21 teams
-rw-r--r-- 1 node node 772 Dec 8 19:21 tsconfig.json
-rw-r--r-- 1 node node 826 Dec 8 19:21 tslint.json

To me (and I'm no Linux expert) it looks like the spfx account created as part of the Docker container doesn't have permissions to write to my project files.

I also get permission denied issues if I try and use yo @microsoft/sharepoint to create a new project in a new project folder.

I have done some reading around this and I've seen a number of people talk about adding a shared drive to Docker. Unfortunately this isn't an option as that feature does not exist in the Windows version of Docker.

If I try the same from the Windows Host and connect to the same Docker container the SPfx user has the correct permissions to complete installing the local dependencies when I run NPM Install. Additionally @yo @microsoft/sharepoint works as you would expect it.

Any help greatly appreciated.

Best wishes,
Rob Ireland

New spfx app gets created without any problem with yomen generator. But facing problem with gulp serve command. It says local gulp not found in /usr/app/spfx.

My host is Windows 10 enterprise.

spfx@8aeab8fef1fd:/usr/app/spfx$ gulp serve
[14:33:30] Local gulp not found in /usr/app/spfx
[14:33:30] Try running: npm install gulp
spfx@8aeab8fef1fd:/usr/app/spfx$

When trying installing gulp it says

ENOSYS: function not implemented, scandir '/usr/app/spfx/node_modules/.staging/source-map-88fecb73/lib'

I ran the script docker Run command as follows
docker run -it --rm --name spfx-helloworld -v /C/"Docker Containers"/spfx-helloworld:/usr/app/spfx -p 5432:5432 -p 4321:4321 -p 35729:35729 waldekm/spfx

It downloaded packages to node_modules -> .staging folder in chunk but the merging all these chunks and copying final modules to the node_modules folder gets failed and throws following error.

npm ERR! code EINTEGRITY npm ERR! sha512-WUyEExfSROSn5XIQudmVpo8cXV2h7RVvGDZTFIbWAEwh2gyxQjHegzoGDLeoTWy0ulD6+RM3vonrQNE5c629AQ== integrity checksum failed when using sha512: wanted sha512-WUyEExfSROSn5XIQudmVpo8cXV2h7RVvGDZTFIbWAEwh2gyxQjHegzoGDLeoTWy0ulD6+RM3vonrQNE5c629AQ== but got sha512-fgHk6vaSnfLEnMfr6yjjev2/BSs3KfGfnrPBJgVD8uKoFiCBQ99OxIWl1mERP6v0v542QS12qFnLZhMrkbCgtQ==. (6322813 bytes)

Any help, please.

Thanks.

Does SPFX debug work with docker container?

I think it started with @microsoft/[email protected]:
SPWebBuildRig.js changed significantly and I couldn't find how to apply the workaround anymore.

I did a few (unsuccessful) tests:
In node_modules/@microsoft_sp-webpart-workbench/local-workbench/manifests.js, I tried to replace this:

manifest.loaderConfig.internalModuleBaseUrls = [manifestsFileUrl];

by this:

manifest.loaderConfig.internalModuleBaseUrls = ["https://localhost:4321/dist/"];

But sadly it has no effect.
I have very little experience with node/npm/bundle, so it's possible I missed something very simple or obvious :)

Should we release a new one?

Using the current Dockerfile, it looks like the self-signed Dev cert is expired as of 28 March 2020:

It's not necessary to explicitly list the folder path for volume mapping on Windows, the ${PWD} token can be used

1. Should we always try to inherit from the latest node image when we update the docker-spfx image for other reasons?
2. Should we always update the docker-spfx image when there is a new node image?

Running on Ubuntu 20.04 in WSL2.

Docker container started from the SPFx solution root folder using...

docker run -it --rm --name ${PWD##*/} -v $PWD:/usr/app/spfx -p 5432:5432 -p 4321:4321 -p 35729:35729 waldekm/spfx:1.11.0

When running npm i, error is thrown...

npm WARN checkPermissions Missing write access to /usr/app/spfx
npm ERR! code EACCES
npm ERR! syscall access
npm ERR! path /usr/app/spfx
npm ERR! errno -13
npm ERR! Error: EACCES: permission denied, access '/usr/app/spfx'
npm ERR!  { [Error: EACCES: permission denied, access '/usr/app/spfx']
npm ERR!   stack: 'Error: EACCES: permission denied, access \'/usr/app/spfx\'',
npm ERR!   errno: -13,
npm ERR!   code: 'EACCES',
npm ERR!   syscall: 'access',
npm ERR!   path: '/usr/app/spfx' }
npm ERR! 
npm ERR! The operation was rejected by your operating system.
npm ERR! It is likely you do not have the permissions to access this file as the current user
npm ERR! 
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/spfx/.npm/_logs/2020-12-10T12_45_58_532Z-debug.log

Any ideas?

If you have issues using the container, please check out the known issues first.

Hi Waldek

I've used SPFx in the past for many implementations on full Vm. Now I'm trying to use Docker with SPFx for the first time because it make sense. But i just can't get this to work.

First i had issue with the install of yo @microsoft/sharepoint, but found the workaround you mentioned on here: #19.

That seems to now install as expected. In my case i'm installing ListView Command Set. When i then run gulp serve, after entering my list url in the serve.json in config, i get below error when the package is trying to run:

Then when i paste the url in the browser in my host machine, i get the usual Allow debug scripts, when i click Load debug scripts, i then get this below:

I've tried to run the gulp trust-dev-cert in the docker host, but made no difference. What am i doing wrong or is this a wider issue? I've also replicate this on another separate machine and tried few older images with the same error.

My knowledge on docker is very basic so let me know if there are steps i'm missing. But looking at the video you did back in 2018 on this topic, i can't see anything different to what i'm doing.

Thanks in advance

The local workbench is deprecated in SPFx v1.13, so should we remove the reference from README?

I'm getting the following error message when I try to run gulp trust-dev-cert from PowerShell Windows 10. I have tried SPFx 1.8.2 and SPFx 1.7.0 and I receive the message with both images. Is there something I'm missing?

spfx@cfc024890ffa:/usr/app/spfx$ gulp trust-dev-cert
module.js:550
    throw err;
    ^

Error: Cannot find module '@microsoft/sp-build-web'
    at Function.Module._resolveFilename (module.js:548:15)
    at Function.Module._load (module.js:475:25)
    at Module.require (module.js:597:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/usr/app/spfx/gulpfile.js:4:15)
    at Module._compile (module.js:653:30)
    at Object.Module._extensions..js (module.js:664:10)
    at Module.load (module.js:566:32)
    at tryModuleLoad (module.js:506:12)
    at Function.Module._load (module.js:498:3)
spfx@cfc024890ffa:/usr/app/spfx$

Hi,

I'm running your docker image on Windows 10 1809 and Docker 2.0.3

When i try to create a new project, i receive the following error messages:

spfx@1b6041cceef8:/usr/app/spfx$ yo @microsoft/sharepoint
? ==========================================================================
We're constantly looking for ways to make yo better!
May we anonymously report usage statistics to improve the tool over time?
More info: https://github.com/yeoman/insight & http://yeoman.io
========================================================================== No

 _-----_
|       |    .--------------------------.
|--(o)--|    |      Welcome to the      |

---------´ | SharePoint Client-side | ( _´U_ ) | Solution Generator |
/A\ '--------------------------'
| ~ |
'..'_
´ |° ´ Y

Let's create a new SharePoint solution.
? What is your solution name? spfx-test
? Which baseline packages do you want to target for your component(s)? SharePoint Online only (latest)
? Where do you want to place the files? Use the current folder
Found npm version 6.4.1
? Do you want to allow the tenant admin the choice of being able to deploy the solution to all sites immediately without running any feature deployment or adding apps in sites? No
? Will the components in the solution require permissions to access web APIs that are unique and not shared with other components in the tenant? No
? Which type of client-side component to create? WebPart
Add new Web part to solution spfx-test.
? What is your Web part name? HelloWorld
? What is your Web part description? HelloWorld description
? Which framework would you like to use? React

create package.json
create config/package-solution.json
create config/config.json
create config/serve.json
create tsconfig.json
create .vscode/extensions.json
create .vscode/launch.json
create .vscode/settings.json
create config/copy-assets.json
create config/deploy-azure-storage.json
create config/write-manifests.json
create src/index.ts
create README.md
create .editorconfig
create .gitignore
create gulpfile.js
create tslint.json
create src/webparts/helloWorld/components/IHelloWorldProps.ts
create src/webparts/helloWorld/components/HelloWorld.module.scss
create src/webparts/helloWorld/components/HelloWorld.tsx
create src/webparts/helloWorld/HelloWorldWebPart.ts
create src/webparts/helloWorld/loc/en-us.js
create src/webparts/helloWorld/loc/mystrings.d.ts
create src/webparts/helloWorld/HelloWorldWebPart.manifest.json
create teams/772ee4a5-3d9d-4677-b4dd-a51cc705ea50_outline.png
create teams/772ee4a5-3d9d-4677-b4dd-a51cc705ea50_color.png

npm WARN deprecated [email protected]: gulp-util is deprecated - replace it, following the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5
npm WARN deprecated [email protected]: please upgrade to graceful-fs 4 for compatibility with current and future versions of Node.js
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated [email protected]: This module relies on Node.js's internals and will break at some point. Do not use it, and update to [email protected].
npm WARN deprecated [email protected]: core-js@<2.6.5 is no longer maintained. Please, upgrade to core-js@3 or at least to actual version of core-js@2.
npm WARN deprecated [email protected]: not actively maintained anymore
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated [email protected]: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated [email protected]: Please upgrade to kleur@3 or migrate to 'ansi-colors' if you prefer the old syntax. Visit https://github.com/lukeed/kleur/releases/tag/v3.0.0\ for migration path(s).
npm WARN deprecated [email protected]: please upgrade to graceful-fs 4 for compatibility with current and future versions of Node.js

[email protected] install /usr/app/spfx/node_modules/deasync
node ./build.js

linux-x64-node-8 exists; testing
Binary is fine; exiting

[email protected] install /usr/app/spfx/node_modules/node-sass
node scripts/install.js

fs.js:646
return binding.open(pathModule._makeLong(path), stringToFlags(flags), mode);
^

Error: EINVAL: invalid argument, open '/usr/app/spfx/node_modules/node-sass/package.json'
at Object.fs.openSync (fs.js:646:18)
at Object.fs.readFileSync (fs.js:551:33)
at Object.Module._extensions..json (module.js:670:20)
at Module.load (module.js:566:32)
at tryModuleLoad (module.js:506:12)
at Function.Module._load (module.js:498:3)
at Module.require (module.js:597:17)
at require (internal/module.js:11:18)
at Object. (/usr/app/spfx/node_modules/node-sass/lib/extensions.js:7:9)
at Module._compile (module.js:653:30)
npm WARN rollback Rolling back [email protected] failed (this is probably harmless): ENOTEMPTY: directory not empty, rmdir '/usr/app/spfx/node_modules/sass-graph/node_modules/cliui'
npm WARN rollback Rolling back [email protected] failed (this is probably harmless): ENOTEMPTY: directory not empty, rmdir '/usr/app/spfx/node_modules/are-we-there-yet/node_modules/isarray'
npm WARN rollback Rolling back [email protected] failed (this is probably harmless): ENOTEMPTY: directory not empty, rmdir '/usr/app/spfx/node_modules/gauge/node_modules/string-width'
npm WARN rollback Rolling back [email protected] failed (this is probably harmless): ENOTEMPTY: directory not empty, rmdir '/usr/app/spfx/node_modules/sass-graph/node_modules/camelcase'
npm WARN rollback Rolling back [email protected] failed (this is probably harmless): ENOTEMPTY: directory not empty, rmdir '/usr/app/spfx/node_modules/gauge/node_modules/is-fullwidth-code-point'
npm WARN rollback Rolling back [email protected] failed (this is probably harmless): ENOTEMPTY: directory not empty, rmdir '/usr/app/spfx/node_modules/node-sass/node_modules/oauth-sign'
npm WARN rollback Rolling back [email protected] failed (this is probably harmless): ENOTEMPTY: directory not empty, rmdir '/usr/app/spfx/node_modules/stdout-stream/node_modules/isarray'
npm WARN rollback Rolling back [email protected] failed (this is probably harmless): ENOTEMPTY: directory not empty, rmdir '/usr/app/spfx/node_modules/sass-graph/node_modules/is-fullwidth-code-point'
npm WARN rollback Rolling back [email protected] failed (this is probably harmless): ENOTEMPTY: directory not empty, rmdir '/usr/app/spfx/node_modules/abbrev'
npm WARN rollback Rolling back [email protected] failed (this is probably harmless): ENOTEMPTY: directory not empty, rmdir '/usr/app/spfx/node_modules/node-sass/node_modules/lru-cache'
npm WARN rollback Rolling back [email protected] failed (this is probably harmless): ENOTEMPTY: directory not empty, rmdir '/usr/app/spfx/node_modules/sass-graph/node_modules/os-locale'
npm WARN rollback Rolling back [email protected] failed (this is probably harmless): ENOTEMPTY: directory not empty, rmdir '/usr/app/spfx/node_modules/amdefine'
npm WARN rollback Rolling back [email protected] failed (this is probably harmless): ENOTEMPTY: directory not empty, rmdir '/usr/app/spfx/node_modules/node-sass/node_modules/chalk'
npm WARN rollback Rolling back [email protected] failed (this is probably harmless): ENOTEMPTY: directory not empty, rmdir '/usr/app/spfx/node_modules/sass-graph/node_modules/string-width'
npm WARN rollback Rolling back [email protected] failed (this is probably harmless): ENOTEMPTY: directory not empty, rmdir '/usr/app/spfx/node_modules/aproba'
npm WARN rollback Rolling back [email protected] failed (this is probably harmless): ENOTEMPTY: directory not empty, rmdir '/usr/app/spfx/node_modules/sass-graph/node_modules/which-module'
npm WARN rollback Rolling back [email protected] failed (this is probably harmless): ENOTEMPTY: directory not empty, rmdir '/usr/app/spfx/node_modules/has-unicode'
npm WARN rollback Rolling back [email protected] failed (this is probably harmless): ENOTEMPTY: directory not empty, rmdir '/usr/app/spfx/node_modules/console-control-strings'
npm WARN rollback Rolling back [email protected] failed (this is probably harmless): ENOTEMPTY: directory not empty, rmdir '/usr/app/spfx/node_modules/block-stream'
npm WARN rollback Rolling back [email protected] failed (this is probably harmless): ENOTEMPTY: directory not empty, rmdir '/usr/app/spfx/node_modules/lodash.clonedeep'
npm WARN rollback Rolling back [email protected] failed (this is probably harmless): ENOTEMPTY: directory not empty, rmdir '/usr/app/spfx/node_modules/lodash.mergewith'
npm WARN rollback Rolling back [email protected] failed (this is probably harmless): ENOTEMPTY: directory not empty, rmdir '/usr/app/spfx/node_modules/npmlog'
npm WARN rollback Rolling back [email protected] failed (this is probably harmless): ENOTEMPTY: directory not empty, rmdir '/usr/app/spfx/node_modules/wide-align'
npm WARN rollback Rolling back [email protected] failed (this is probably harmless): ENOTEMPTY: directory not empty, rmdir '/usr/app/spfx/node_modules/node-sass/node_modules/punycode'
npm WARN rollback Rolling back [email protected] failed (this is probably harmless): ENOTEMPTY: directory not empty, rmdir '/usr/app/spfx/node_modules/true-case-path'
npm WARN rollback Rolling back [email protected] failed (this is probably harmless): ENOTEMPTY: directory not empty, rmdir '/usr/app/spfx/node_modules/sass-graph/node_modules/yargs'
npm WARN rollback Rolling back [email protected] failed (this is probably harmless): ENOTEMPTY: directory not empty, rmdir '/usr/app/spfx/node_modules/node-sass/node_modules/har-validator'
npm WARN rollback Rolling back [email protected] failed (this is probably harmless): ENOTEMPTY: directory not empty, rmdir '/usr/app/spfx/node_modules/delegates'
npm WARN rollback Rolling back [email protected] failed (this is probably harmless): ENOTEMPTY: directory not empty, rmdir '/usr/app/spfx/node_modules/async-foreach'
npm WARN rollback Rolling back [email protected] failed (this is probably harmless): ENOTEMPTY: directory not empty, rmdir '/usr/app/spfx/node_modules/node-sass/node_modules/request'
npm WARN rollback Rolling back [email protected] failed (this is probably harmless): ENOTEMPTY: directory not empty, rmdir '/usr/app/spfx/node_modules/node-sass/node_modules/tough-cookie'
npm WARN rollback Rolling back [email protected] failed (this is probably harmless): ENOTEMPTY: directory not empty, rmdir '/usr/app/spfx/node_modules/node-sass/node_modules/gaze'
npm WARN rollback Rolling back [email protected] failed (this is probably harmless): ENOTEMPTY: directory not empty, rmdir '/usr/app/spfx/node_modules/in-publish'
npm WARN rollback Rolling back [email protected] failed (this is probably harmless): ENOTEMPTY: directory not empty, rmdir '/usr/app/spfx/node_modules/are-we-there-yet/node_modules/string_decoder'
npm WARN rollback Rolling back [email protected] failed (this is probably harmless): ENOTEMPTY: directory not empty, rmdir '/usr/app/spfx/node_modules/nan'
npm WARN rollback Rolling back [email protected] failed (this is probably harmless): ENOTEMPTY: directory not empty, rmdir '/usr/app/spfx/node_modules/stdout-stream/node_modules/string_decoder'
npm WARN rollback Rolling back [email protected] failed (this is probably harmless): ENOTEMPTY: directory not empty, rmdir '/usr/app/spfx/node_modules/sass-graph/node_modules/yargs-parser'
npm WARN rollback Rolling back [email protected] failed (this is probably harmless): ENOTEMPTY: directory not empty, rmdir '/usr/app/spfx/node_modules/node-gyp/node_modules/semver'
npm WARN rollback Rolling back [email protected] failed (this is probably harmless): ENOTEMPTY: directory not empty, rmdir '/usr/app/spfx/node_modules/nopt'
npm WARN rollback Rolling back [email protected] failed (this is probably harmless): ENOTEMPTY: directory not empty, rmdir '/usr/app/spfx/node_modules/fstream'
npm WARN rollback Rolling back [email protected] failed (this is probably harmless): ENOTEMPTY: directory not empty, rmdir '/usr/app/spfx/node_modules/node-sass/node_modules/globule'
npm WARN rollback Rolling back [email protected] failed (this is probably harmless): ENOTEMPTY: directory not empty, rmdir '/usr/app/spfx/node_modules/tar'
npm WARN rollback Rolling back [email protected] failed (this is probably harmless): ENOTEMPTY: directory not empty, rmdir '/usr/app/spfx/node_modules/node-sass/node_modules/cross-spawn'
npm WARN rollback Rolling back @microsoft/[email protected] failed (this is probably harmless): ENOTEMPTY: directory not empty, rmdir '/usr/app/spfx/node_modules/@microsoft/sp-build-web'
npm WARN rollback Rolling back [email protected] failed (this is probably harmless): ENOTEMPTY: directory not empty, rmdir '/usr/app/spfx/node_modules/scss-tokenizer/node_modules/source-map'
npm WARN rollback Rolling back [email protected] failed (this is probably harmless): ENOTEMPTY: directory not empty, rmdir '/usr/app/spfx/node_modules/stdout-stream/node_modules/readable-stream'
npm WARN rollback Rolling back [email protected] failed (this is probably harmless): ENOTEMPTY: directory not empty, rmdir '/usr/app/spfx/node_modules/are-we-there-yet/node_modules/readable-stream'
npm WARN rollback Rolling back [email protected] failed (this is probably harmless): ENOTEMPTY: directory not empty, rmdir '/usr/app/spfx/node_modules/node-sass/node_modules/chalk'
npm WARN rollback Rolling back [email protected] failed (this is probably harmless): ENOTEMPTY: directory not empty, rmdir '/usr/app/spfx/node_modules/sass-graph/node_modules/camelcase'
npm WARN rollback Rolling back @microsoft/[email protected] failed (this is probably harmless): ENOTEMPTY: directory not empty, rmdir '/usr/app/spfx/node_modules/@microsoft/gulp-core-build-sass/node_modules/glob'
npm WARN rollback Rolling back [email protected] failed (this is probably harmless): ENOTEMPTY: directory not empty, rmdir '/usr/app/spfx/node_modules/are-we-there-yet/node_modules/isarray'
npm WARN rollback Rolling back [email protected] failed (this is probably harmless): ENOTEMPTY: directory not empty, rmdir '/usr/app/spfx/node_modules/stdout-stream/node_modules/string_decoder'
npm WARN rollback Rolling back [email protected] failed (this is probably harmless): ENOTEMPTY: directory not empty, rmdir '/usr/app/spfx/node_modules/gauge/node_modules/is-fullwidth-code-point'
npm WARN rollback Rolling back [email protected] failed (this is probably harmless): ENOTEMPTY: directory not empty, rmdir '/usr/app/spfx/node_modules/node-gyp/node_modules/semver'
npm WARN rollback Rolling back [email protected] failed (this is probably harmless): ENOTEMPTY: directory not empty, rmdir '/usr/app/spfx/node_modules/scss-tokenizer/node_modules/source-map'
npm WARN [email protected] requires a peer of ajv@^6.9.1 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] install: node scripts/install.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] install script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /home/spfx/.npm/_logs/2019-04-26T12_04_02_319Z-debug.log

  _=+#####!

###########| .-----------------------------------.
###/ (##|(@) | Congratulations! |

######| \ | Solution spfx-test is created. |

###/ /###| (@) | Run gulp serve to play with it! |
####### ##| / '-----------------------------------'

/##|(@)

###########|
**=+####!

Kind regards
Pascal

npm install, build or serve any command is failing to install node-sass. Tried all possibilities to clean, uninstall and install the package and with no luck.

Error: EINVAL: invalid argument, open '/usr/app/spfx/node_modules/@microsoft/gulp-core-build-sass/node_modules/node-sass/package.json'
at Object.fs.openSync (fs.js:646:18)
at Object.fs.readFileSync (fs.js:551:33)
at Object.Module._extensions..json (module.js:670:20)
at Module.load (module.js:566:32)
at tryModuleLoad (module.js:506:12)
at Function.Module._load (module.js:498:3)
at Module.require (module.js:597:17)
at require (internal/module.js:11:18)
at Object. (/usr/app/spfx/node_modules/@microsoft/gulp-core-build-sass/node_modules/node-sass/lib/extensions.js:7:9)
at Module._compile (module.js:653:30)

First of all thanks for doing a great job creating docker images for the different SPFx versions. This really helps us as developers creating SPFx solutions across different versions.

However in recent versions of the images, with the introduction of Node v8, I have noted that I need to set an environment variable NODE_NO_HTTP2=1 as discussed here SharePoint/sp-dev-docs#1002 to be able to attach to the web server from my browser.

Would it be possible to include this environment variable in the images as a default setting?

Hi @waldekmastykarz,

In the readme you mention the workaround for which you need to change a few lines in the SPWebBuildRig.js file.

I blindly copy pasted your code to lines 83-85 (never wise 😬), only to discover later that the linenumbers have changed. It's no longer 83-85, but 88-90 (using SPFx 1.8.2) that we have to change. Otherwise we're overruling the mergeConfig of the deployCdnPath.

I agree in advance, the problem here is primarily between the chair and the screen. But maybe you could, for completeness sake, update your readme accordingly? Maybe it would help for suckers like me who end up staring at a white screen and take unnecessary time retracing their steps.

Thanks in advance 😔

1. Created a hello world field customizer
2. Updated serve.json, write-manifests.js and @node module per instructions
3. Opened link as follows

https://MyTenant.sharepoint.com/sites/SiteCollection/Lists/List%20A/AllItems.aspx?debugManifestsFile=https://spfx:4321/temp/manifests.js&loadSPFX=true&fieldCustomizers={%22HelloWorld%22:{%22id%22:%225e2385b5-bfd4-44c5-97d6-a392e942a6ab%22,%22properties%22:{%22sampleText%22:%22Value%22}}}

4. Tried updating debugManifestsFile parameter with 0.0.0.0 and localhost with no success
5. Ensured that the field exists as expected

SPFX version: 1.6.0
Docker-SPFX: latest

Great image! Thanks for sharing. I've created a docker image using waldekm/spfx 1.11.0 on Windows 64 Bit. It works great.
Maybe you could pin the link to both workarounds on the top of the issues page. That would help to find the solution for all those who can not access the page https://localhost:4321/temp/workbench.html.

Using 1.5.1 I am getting an Error in Browser (firefox) when running gulp serve.


the oddest thing is when I use the browsers back button I see the workbench but the webpart does not load

tried the following but didn't make a difference
added to package.json
"scripts" {"dev": "set NODE_NO_HTTP2=1 && gulp serve"}
and changed port in config/serve.json to 8080

"$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
"port": 4321,
"https": true,
"initialPage": "https://localhost:8080/workbench",
"api": {
"port": 8080,
"entryPath": "node_modules/@microsoft/sp-webpart-workbench/lib/api/"
}

I wonder if this is just me or anyone else on Windows is having the same issue. The steps to reproduce are as follows:

1. cd to SPFx solution files
2. Run docker run -it --rm --name spfx-helloworld -v ${PWD}:/usr/app/spfx -p 5432:5432 -p 4321:4321 -p 35729:35729 waldekm/spfx
3. Run gulp trust-dev-cert in the container
4. Run gulp serve in the container
5. Open https://localhost:5432/workbench in Chrome

Outcome: user is redirected to https://localhost:4321/temp/workbench.html, that fails:

In the server log, only /workbench requests are displayed

[12:42:16] Finished subtask 'reload' after 1.89 ms
  Request: [::ffff:172.17.0.1] '/workbench'
  Request: [::ffff:172.17.0.1] '/workbench'

When I test the URL from the container itself, it works just fine:

$ curl -k https://localhost:4321/temp/workbench.html
<!doctype html>
              <html dir="ltr">
              <head>
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                <meta http-equiv="X-UA-Compatible" content="IE=edge" />
                <meta name="viewport" content="width=device-width, initial-scale=1" />

                <title>SharePoint Web Part Workbench</title>

                <link rel="shortcut icon" href="https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/lib/api/assets/server-icon.png" />

    <script type="text/javascript" src="https://localhost:4321/temp/manifests.js"></script>
    <script type="text/javascript" src="https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js"></script>
    <script type="text/javascript">
...

So it seems like some Linux firewall, or Docker ports mapping issue or maybe my Windows host firewall issue...

It can be also detected automatically, without using browser:

Requesting the https://localhost:5432/workbench fails with SSL:

PS C:\Users\asapozhkov> Invoke-WebRequest https://localhost:5432/workbench
Invoke-WebRequest : The underlying connection was closed: Could not establish trust relationship for the SSL/TLS secure channel.
At line:1 char:1
+ Invoke-WebRequest https://localhost:5432/workbench
+ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    + CategoryInfo          : InvalidOperation: (System.Net.HttpWebRequest:HttpWebRequest) [Invoke-WebRequest], WebException
    + FullyQualifiedErrorId : WebCmdletWebResponseException,Microsoft.PowerShell.Commands.InvokeWebRequestCommand

However, the https://localhost:4321/temp/workbench.html fails even with connection:

PS C:\Users\asapozhkov> Invoke-WebRequest https://localhost:4321/temp/workbench.html
Invoke-WebRequest : The underlying connection was closed: An unexpected error occurred on a send.
At line:1 char:1
+ Invoke-WebRequest https://localhost:4321/temp/workbench.html
+ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    + CategoryInfo          : InvalidOperation: (System.Net.HttpWebRequest:HttpWebRequest) [Invoke-WebRequest], WebException
    + FullyQualifiedErrorId : WebCmdletWebResponseException,Microsoft.PowerShell.Commands.InvokeWebRequestCommand

Using MacOs

Command used to install:
docker run -h spfx -it --rm --name ${PWD##*/} -v $PWD:/usr/app/spfx -p 5432:5432 -p 4321:4321 -p 35729:35729 waldekm/spfx

Let's create a new SharePoint solution.
? What is your solution name? spfx
? Where do you want to place the files? Use the current folder
? What is your webpart name? HelloWorld
? What is your webpart description? HelloWorld description
? What framework would you like to start with? React
create package.json
fs.js:640
return binding.open(pathModule._makeLong(path), stringToFlags(flags), mode);
^

Error: EACCES: permission denied, open '/usr/app/spfx/package.json'
at Error (native)
at Object.fs.openSync (fs.js:640:18)
at Object.fs.writeFileSync (fs.js:1333:33)
at write (/usr/local/lib/node_modules/@microsoft/generator-sharepoint/node_modules/mem-fs-editor/lib/actions/commit.js:14:6)
at DestroyableTransform._transform (/usr/local/lib/node_modules/@microsoft/generator-sharepoint/node_modules/mem-fs-editor/lib/actions/commit.js:43:7)
at DestroyableTransform.Transform._read (/usr/local/lib/node_modules/@microsoft/generator-sharepoint/node_modules/readable-stream/lib/_stream_transform.js:159:10)
at DestroyableTransform.Transform._write (/usr/local/lib/node_modules/@microsoft/generator-sharepoint/node_modules/readable-stream/lib/_stream_transform.js:147:83)
at doWrite (/usr/local/lib/node_modules/@microsoft/generator-sharepoint/node_modules/readable-stream/lib/_stream_writable.js:347:64)
at writeOrBuffer (/usr/local/lib/node_modules/@microsoft/generator-sharepoint/node_modules/readable-stream/lib/_stream_writable.js:336:5)
at DestroyableTransform.Writable.write (/usr/local/lib/node_modules/@microsoft/generator-sharepoint/node_modules/readable-stream/lib/_stream_writable.js:274:11)
spfx@spfx:/usr/app/spfx$

Hi, it might be sensible to consider removing the latest version of the image, mirroring the Microsoft unpublishing the framework version?

This may be just my understanding Docker (I am just learning about it now). I would think based on your Dockerfile that these should be globally installed packages after setting up the Docker container:

gulp
yo
@microsoft/generator-sharepoint
npm

However when I run this command (npm list -g --depth=0) to check the globally installed packages I only see this listed:

spfx@spfx:/usr/app/spfx$ npm list -g --depth=0
npm info it worked if it ends with ok
npm info using [email protected]
npm info using [email protected]
/usr/local/lib
+-- @microsoft/[email protected]
+-- [email protected]
`-- [email protected]

Shouldn't I be seeing gulp there, too?

Hi Waldek,

I was reading a thread elsewhere yesterday about this, but I seem to have lost it, so now I'm posting here. I was unable to solve the workbench issue for 1.6.0 using the documentation. Like some others, I tried the 1.5.0 workaround, and was able to get to the workbench via the full URL.

I'm experiencing a strange issue though. I manage to get to the workbench via https://localhost:4321/temp/workbench.html, but the page shows up completely empty. It navigates to workbench, the tab gets a title and favicon etc, but the workbench simply doesn't render. I just spun up the same project in a VM where I have the framework tools globally installed, and it served to the workbench just fine.

I wonder if you've seen anything like this before.

hi,

When I run the standard build before I even run GULP serve I get the above error message.

When I try to do s auso to install it I get told that sudo dosnet exist , is teher a root password so I can do a su - or is theer some other way to get round these issues

Thanks David

When I run this container in Linux, it throws error when trying to write to user hiles on the host, so I cannot also use spfx framework. However the same operation works in node:10.18.1 container:

aleks@vm-dev:~/projects/01$ sudo docker run -it --rm --name spfx-helloworld -v $(pwd):/usr/app/spfx -p 5432:5432 -p 4321:4321 -p 35729:35729 waldekm/spfx /bin/bash -c "mkdir 17"
mkdir: cannot create directory '17': Permission denied
aleks@vm-dev:~/projects/01$ sudo docker run -it --rm --name spfx-helloworld -v $(pwd):/usr/app/spfx -p 5432:5432 -p 4321:4321 -p 35729:35729 node:10.18.1 /bin/bash -c "mkdir /usr/app/spfx/18"
aleks@vm-dev:~/projects/01$ ls
13  15  16  18

Might it have something to do with the way we setup permissions in waldekm/spfx?

Linux machine is provisioned in Azure, from this image:

    publisher = "Canonical"
    offer     = "0001-com-ubuntu-server-focal"
    sku       = "20_04-lts-gen2"
    version   = "20.04.202007290"

Hi,

We are using your Docker images when developing SPFx. It normally works like charm, but we are experiencing some issues in the following scenario:
We run a Docker image (say 1.4.0) and creates a new SPFx solution with a webpart. Everything works as expected and we can continue our development process.

Now, a few weeks/months later, we need to add another webpart to that project. There is now image 1.4.1 available, but we would like to keep it in version 1.4.0. So we once again start Docker with the 1.4.0 image and running the yo @microsoft/sharepoint command. This is where it goes wrong. The wizard works, but we expect it to just add the new webpart - not going out using npm and downloading packages again. Here's a sceenshot of some of it:

After a few minutes it completes, but with errors:

If we run gulp build we get:

That's strange. If we run npm outdated we get:

.. thats scares me. Now the solution wants 1.4.1 - not 1.4.0, which was the Docker image that we are using for this. Any advice will be greatly appreciated. Further investigations shows me, that npm-shrinkwrap.json doesn't include the microsoft/sp-build-web package for example. Is that normal?

Please let me know, if you need more information.

I have some questions about how to run docker for spfx.
Some time ago I started a project in version SPFx 1.11.0.
I've heard of docker before, but I thought it was unnecessary, currently, I would like to develop other things, but already in the new version SPFx 1.13.1 (for the currentity of libraries, controls, etc.).

First I tried to download an existing image from:
hub.docker.com/r/waldekm/spfx/tags
Command:
docker pull waldekm / spfx: 1.11.0
a Use command:
docker run -it --rm --name spfx-helloworld -v $ {PWD}: / usr / app / spfx -p 4321: 4321 -p 35729: 35729 waldekm / spfx

There was no problem when i was trying to create a new project.
The problem occurred when gulp serve an existing folder / project:
C:\git\SPFx_OldWebpart

The problem is probably that npm install was done against / OS = Windows, while containerization is in Linux.

Procedure for attempting commissioning:
docker run -it --rm --name spfx-helloworld -v $ {PWD}: / usr / app / spfx -p 4321: 4321 -p 35729: 35729 waldekm / spfx: 1.11.0
spfx @ 98ecd3553a8d: /usr/app/spfx $ gulp serve

Error: Missing binding /usr/app/spfx/node_modules/node-sass/vendor/linux-x64-64/binding.node
Node Sass could not find a binding for your current environment: Linux 64-bit with Node.js 10.x

Found bindings for the following environments:

• Windows 64-bit with Node.js 10.x
• Windows 64-bit with Unsupported runtime (83)

This usually happens because your environment has changed since running npm install.
Run npm rebuild node-sass to download the binding for your current environment.

Npm install :
Error: EPERM: operation not permitted, unlink '/usr/app/spfx/node_modules/@pnp/common/collections.d.ts.map'

Npm rebuild node-sass:
spfx @ d0eab30de69a: / usr / app / spfx $ npm rebuild node-sass
npm ERR! Error: EPERM: operation not permitted, unlink '/usr/app/spfx/node_modules/.bin/node-sass'

Docker -> Resources -> File sharing - folder added -> permissions work because I couldn't create a new project before, but after restarting OS + docker, I could create atleast new project.

I found a similar error here (not spfx, but a general problem):
sass/node-sass#2165
You still need to do this:
sass/node-sass#2165 (comment)
??
Or I found another solution here:
https://stackoverflow.com/questions/37986800/node-sass-couldnt-find-a-binding-for-your-current-environment
https://stackoverflow.com/questions/39293636/npm-err-error-eperm-operation-not-permitted-rename

I don't know which way to go, every solution will lead me to other mistakes.

I also tried to create my own build:
from address:
https://github.com/waldekmastykarz/docker-spfx/blob/master/Dockerfile
Download DockerFile and edit it to fit the version:

FROM node: 10.22.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
    chown -R spfx: spfx / usr / app / spfx
USER spfx
RUN npm i -g gulp [email protected] @ microsoft / generator-sharepoint @ 1.11.0
CMD / bin / bash

Adding the line chown -R spfx: spfx / usr / app / spfx I found here (though for a different version):
docker-spfx/issues/19

docker build -t spfx-docker: 1.11.0.
docker run

and again leads to the same mistakes ...

Or am I completely out and doing something stupid?

In what environment am I trying to run the docker:
Docker:

spfx @ 98ecd3553a8d: / usr / app / spfx $ node --version
v10.22.0
spfx @ 98ecd3553a8d: / usr / app / spfx $ yo --version
3.1.1
spfx @ 98ecd3553a8d: / usr / app / spfx $ gulp --version
[12:32:03] CLI version 3.9.1
[12:32:03] Local version 3.9.1

Or is there a mistake in this:
I use VMware Workstation 16 Player

I currently have the latest version of docker:
Docker Desktop 4.3.2 (72729) is currently the newest version available.

OS Windows Server 2019.

Docker image will not download. Last two items retried about 5/6 times before whole thing failed

Starting from the workaround that was suggested for fixing the mapping. node_modules\@microsoft\sp-build-web\lib\SPWebBuildRig.js does not contain the lines that were suggested to replace. Hence, we cannot access the bundles.

here's how it was tested in Windows:

1. Run the following lines in PS:

md spfx112testwp02
cd spfx112testwp02
docker run -it --rm -v ${pwd}:/usr/app/spfx waldekm/spfx:1.12.0 yo @microsoft/sharepoint --solution-name helloworld --component-type webpart --component-name wello-world-webpart --component-description "HelloWorld web part" --is-domain-isolated --framework none --environment spo --skip-feature-deployment false

2. Agree to provide telemetry
3. After the project is created and modules installed, check node_modules\@microsoft\sp-build-web\lib\SPWebBuildRig.js file contents.

There is a new SPFx version released.
Should we update the image and also take the newest node image version?
I could come up with a PR

Thanks for sharing the docker spfx image. This is great, but I cannot make it work when generating an extension.

I've created a docker image using waldekm/spfx on Windows.
I then generated a SPFX an applicationcutomizer extension. I followed workaround guidelines to be able to access solution, but I am not able to get a connection to the solution. I can not to open https://localhost/temp/manifest.js.

I successfully followed same guidelines generating a webpart solution.

serve.json is different generating an extension than a webpart, so I added "hostname" = "0.0.0.0" as the only change.

{
  "$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
  "port": 4321,
  "hostname": "0.0.0.0",
  "https": true,
  "serveConfigurations": {
    "default": {
      "pageUrl": "https://myown.sharepoint.com/sites/mysites/SitePages/home.aspx",
      "customActions": {
        "acc65389-0407-4015-9558-b9d9d8764c3e": {
          "location": "ClientSideExtension.ApplicationCustomizer",
          "properties": {
            "testMessage": "Test message"
          }
        }
      }
    },
    "sendAttachmentExtension": {
      "pageUrl": "https://contoso.sharepoint.com/sites/mySite/SitePages/myPage.aspx",
      "customActions": {
        "acc65389-0407-4015-9558-b9d9d8764c3e": {
          "location": "ClientSideExtension.ApplicationCustomizer",
          "properties": {
            "testMessage": "Test message"
          }
        }
      }
    }
  }
}

warn optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules/chokidar/node_modules/fsevents):
112664 warn notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
112665 verbose notsup SKIPPING OPTIONAL DEPENDENCY: Valid OS: darwin
112665 verbose notsup SKIPPING OPTIONAL DEPENDENCY: Valid Arch: any
112665 verbose notsup SKIPPING OPTIONAL DEPENDENCY: Actual OS: linux
112665 verbose notsup SKIPPING OPTIONAL DEPENDENCY: Actual Arch: x64
112666 warn optional SKIPPING OPTIONAL DEPENDENCY: fsevents@* (node_modules/@microsoft/gulp-core-build-webpack/node_modules/fsevents):
112667 warn notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
112668 verbose notsup SKIPPING OPTIONAL DEPENDENCY: Valid OS: darwin
112668 verbose notsup SKIPPING OPTIONAL DEPENDENCY: Valid Arch: any
112668 verbose notsup SKIPPING OPTIONAL DEPENDENCY: Actual OS: linux
112668 verbose notsup SKIPPING OPTIONAL DEPENDENCY: Actual Arch: x64
112669 verbose stack Error: EPROTO: protocol error, symlink '../semver/bin/semver' -> '/usr/app/spfx/spfxAngularApp/node_modules/@microsoft/rush-lib/node_modules/.bin/semver'
112669 verbose stack at Error (native)
112670 verbose cwd /usr/app/spfx/spfxAngularApp
112671 error Linux 4.4.52-boot2docker
112672 error argv "/usr/local/bin/node" "/usr/local/bin/npm" "install" "--cache-min" "86400"
112673 error node v6.9.4
112674 error npm v3.10.10
112675 error path ../semver/bin/semver
112676 error code EPROTO
112677 error errno -71
112678 error syscall symlink
112679 error EPROTO: protocol error, symlink '../semver/bin/semver' -> '/usr/app/spfx/spfxAngularApp/node_modules/@microsoft/rush-lib/node_modules/.bin/semver'

I recently noticed that Docker was using 340% CPU when running the image in a container, this led to machine running hot most of the time. This was using Docker 2.0.0.3 (latest) on MacOS Mojave.

Issue described here and seems to be pretty common with Docker.

If you are coming across the same issue, a quick fix is to add the :cached flag to the volume mount, after doing this my CPU load has dropped massively and I have a much cooler machine.

docker run -it --rm --name <name> -v ${PWD}:/usr/app/spfx:cached -p 5432:5432 -p 4321:4321 -p 35729:35729 waldekm/spfx:1.4.1

There seems to be not enough flexibility in the WebpackConfigurationGenerator.js adjustments description in https://github.com/waldekmastykarz/docker-spfx#cant-access-bundles-in-sharepoint-framework-1121. Original contents of the file is different for different SPFx versions:

1.12.1

string 376

const debugBaseUrl = `${serveConfig.https ? 'https' : 'http'}://${serveConfig.hostname || 'localhost'}:${serveConfig.port || 4321}/dist/`;

1.13.1

string 393

const debugBaseUrl = `${serveConfig.https ? 'https' : 'http'}://${serveConfig.hostname || 'localhost'}:${serveConfig.port || 4321}/${distFolderName}/`;

A test for the future versions:

docker run --rm waldekm/spfx:1.12.1 bash -c "yo @microsoft/sharepoint --solution-name helloworld --component-type webpart --component-name wello-world-webpart --component-description 'HelloWorld web part' --is-domain-isolated --framework none --environment spo --skip-feature-deployment false; sed -n 376p /usr/app/spfx/helloworld/node_modules/@microsoft/spfx-heft-plugins/lib/plugins/webpackConfigurationPlugin/WebpackConfigurationGenerator.js"

Hi,

When I use the below code to get the docker image. I get below error on windows platform
docker pull waldekm/spfx:online

image operating system "linux" cannot be used on this platform

Even if I use the command docker run. I get the same error
docker run -it --rm --name spfx-helloworld -v /c/TTBL/Demo/DemoSPFx:/usr/app/spfx -p 5432:5432 -p 4321:4321 -p 35729:35729 waldekm/spfx:online

Hi,

I'm trying to skaffold a project using Windows 10 and Docker Desktop 2.3.0.3

The following command is stuck in about an hour, after creating 125 970 files.
When I tested one more time, it went stuck on 47 190 files.
In third test it thrown errors, but finished:

docker run -it --rm --name docker-spfx-test02 -v ${PWD}:/usr/app/spfx -p 5432:5432 -p 4321:4321 -p 35729:35729 waldekm/spfx yo @microsoft/sharepoint --solution-name docker-spfx-test02 --component-type webpart --component-name wello-world-webpart --component-description "HelloWorld web part" --is-domain-isolated --framework none --environment spo --skip-feature-deployment false

? ==========================================================================
We're constantly looking for ways to make yo better!
May we anonymously report usage statistics to improve the tool over time?
More info: https://github.com/yeoman/insight & http://yeoman.io
========================================================================== (Y/n)
     _-----_
    |       |    .--------------------------.
    |--(o)--|    |      Welcome to the      |
   `---------´   |  SharePoint Client-side  |
    ( _´U`_ )    |    Solution Generator    |
    /___A___\    '--------------------------'
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y `

A folder with solution name docker-spfx-test02 will be created for you.
A component for the spo environment will be created for you.
A web part with the name wello-world-webpart will be added to your solution.
Web part description is going to be HelloWorld web part.
Let's create a new SharePoint solution.
Found npm version 6.13.4
Add new Web part to solution docker-spfx-test-02.

   create config/package-solution.json
   create package.json
   create config/config.json
   create config/serve.json
   create tsconfig.json
   create .vscode/extensions.json
   create .vscode/launch.json
   create .vscode/settings.json
   create config/copy-assets.json
   create config/deploy-azure-storage.json
   create config/write-manifests.json
   create src/index.ts
   create README.md
   create .editorconfig
   create .gitignore
   create gulpfile.js
   create tslint.json
   create src/webparts/welloWorldWebpart/WelloWorldWebpartWebPart.module.scss
   create src/webparts/welloWorldWebpart/WelloWorldWebpartWebPart.ts
   create src/webparts/welloWorldWebpart/loc/en-us.js
   create src/webparts/welloWorldWebpart/loc/mystrings.d.ts
   create src/webparts/welloWorldWebpart/WelloWorldWebpartWebPart.manifest.json
   create teams/0761fc5d-9e40-455c-ad4a-ed51dcdfaeee_outline.png
   create teams/0761fc5d-9e40-455c-ad4a-ed51dcdfaeee_color.png

npm WARN deprecated [email protected]: gulp-util is deprecated - replace it, following the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated [email protected]: This module relies on Node.js's internals and will break at some point. Do not use it, and update to [email protected].
npm WARN deprecated [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated [email protected]: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated [email protected]: use String.prototype.padStart()
npm WARN deprecated [email protected]: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated [email protected]: not actively maintained anymore
npm WARN deprecated [email protected]: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated [email protected]: Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)
npm WARN deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated [email protected]: Please upgrade to kleur@3 or migrate to 'ansi-colors' if you prefer the old syntax. Visit <https://github.com/lukeed/kleur/releases/tag/v3.0.0\> for migration path(s).
npm WARN deprecated [email protected]: please upgrade to graceful-fs 4 for compatibility with current and future versions of Node.js
npm WARN deprecated [email protected]: This package is broken and no longer maintained. 'mkdirp' itself supports promises now, please switch to that.
npm WARN deprecated [email protected]: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.7 (node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN notsup Unsupported engine for [email protected]: wanted: {"node":"<8.10.0"} (current: {"node":"10.18.1","npm":"6.13.4"})
npm WARN notsup Not compatible with your version of node/npm: [email protected]
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.1.2 (node_modules/watchpack/node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN [email protected] requires a peer of ajv@^6.9.1 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of webpack@^1.9 || ^2 || ^2.1.0-beta || ^2.2.0-rc || ^3.0.0 but none is installed. You must install peer dependencies yourself.

npm ERR! code ENOENT
npm ERR! syscall rename
npm ERR! path /usr/app/spfx/docker-spfx-test02/node_modules/@microsoft/gulp-core-build-webpack
npm ERR! dest /usr/app/spfx/docker-spfx-test02/node_modules/@microsoft/.gulp-core-build-webpack.DELETE
npm ERR! errno -2
npm ERR! enoent ENOENT: no such file or directory, rename '/usr/app/spfx/docker-spfx-test02/node_modules/@microsoft/gulp-core-build-webpack' -> '/usr/app/spfx/docker-spfx-test02/node_modules/@microsoft/.gulp-core-build-webpack.DELETE'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/spfx/.npm/_logs/2020-06-20T10_56_08_954Z-debug.log

      _=+#####!
   ###########|       .--------------------------------------------.
   ###/    (##|(@)    |              Congratulations!              |
   ###  ######|   \   |  Solution docker-spfx-test-02 is created.  |
   ###/   /###|   (@) |       Run gulp serve to play with it!      |
   #######  ##|   /   '--------------------------------------------'
   ###     /##|(@)
   ###########|
      **=+####!

This command however works just fine, very quickly scaffolding a few solution files:

docker run -it --rm --name docker-spfx-test02 -v ${PWD}:/usr/app/spfx -p 5432:5432 -p 4321:4321 -p 35729:35729 waldekm/spfx yo @microsoft/sharepoint --solution-name docker-spfx-test02 --component-type webpart --component-name wello-world-webpart --component-description "HelloWorld web part" --is-domain-isolated --framework none --environment spo --skip-feature-deployment false --skip-install

I wonder we can make it keep installed dependencies within container itself, without mapping to host file system, do you think it might make things more stable?