pnp/docker-spfx

SPFx:1.11.0 - Run docker for an existing project - Permission Denied

necik11 opened this issue ยท 22 comments

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 yo@3.1.1 @ 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.

Have you tried removing node_modules (or move it somewhere for the backup) and trying to run npm install in the container?

I've tried that before. After deleting the folder node_modules and then the npm install command.
I get a thousand lines of warnings and finally an error.

npm WARN tar ENOENT: no such file or directory, open '/usr/app/spfx/node_modules/.staging/office-ui-fabric-react-b64a72f4/lib-amd/Foundation.js'
npm WARN tar ENOENT: no such file or directory, open '/usr/app/spfx/node_modules/.staging/office-ui-fabric-react-b64a72f4/lib-commonjs/Foundation.js'
npm WARN tar ENOENT: no such file or directory, open '/usr/app/spfx/node_modules/.staging/office-ui-fabric-react-b64a72f4/lib/Foundation.js'
npm ERR! code ENOTEMPTY
npm ERR! syscall rmdir
npm ERR! path /usr/app/spfx/node_modules/.staging/typescript-950cdf73/lib/fr
npm ERR! errno -39
npm ERR! ENOTEMPTY: directory not empty, rmdir '/usr/app/spfx/node_modules/.staging/typescript-950cdf73/lib/fr'
npm ERR! A complete log of this run can be found in:
npm ERR! /home/spfx/.npm/_logs/2022-01-19T13_10_45_655Z-debug.log

directory not empty, rmdir '/usr/app/spfx/node_modules/.staging/typescript-950cdf73/lib/fr'
this folder really does exist there, but I deleted the whole folder ..
Maybe it's because I'm running it in Windows Powershell administrator.

Now I'm still trying to delete the node_modules folder again and run npm install directly from the CLI docker, unfortunately the speed is very slow, so I'll let you know as soon as possible.

Do I get it correctly:

  1. you remove node_modules entirely, so it is gone.
  2. you run npm install in Docker
  3. it actually creates node_modules directory but outputs a lot of errors about permissions

Is that about right?

I just got a similar error with another folder / library:

verbose stack Error: ENOTEMPTY: directory not empty, rmdir '/usr/app/spfx/node_modules/.staging/@microsoft/sp-webpart-workbench-cd026fb2/local-workbench'
verbose cwd /usr/app/spfx
verbose Linux 5.10.76-linuxkit
verbose argv "/usr/local/bin/node" "/usr/local/bin/npm" "install"
verbose node v10.22.0
verbose npm  v6.14.6
error code ENOTEMPTY
error syscall rmdir
error path /usr/app/spfx/node_modules/.staging/@microsoft/sp-webpart-workbench-cd026fb2/local-workbench
error errno -39
error ENOTEMPTY: directory not empty, rmdir '/usr/app/spfx/node_modules/.staging/@microsoft/sp-webpart-workbench-cd026fb2/local-workbench'
verbose exit [ -39, true ]
  1. Yes
  2. Yes
  3. I'm not sure if it's permission, but probably yes

I also noticed that node_modules is created, packages are loaded and extracted.
At the end, only in node_modules is only the folder that ended in error (and is empty).

Could be that permissions of the project directory on your host computer does not include "Write" for "Users" group?

Permissions of the project directory on your host computer does not include "Write" for "Users" group?
Yes, I added permissions and it's already working. ๐Ÿ‘

So I still had to add -p 5432: 5432 to the docker run port
I can't run a workbrench without it (in usage https://hub.docker.com/ it's missing, but on some websites it's written :).

Unfortunately, I have now tried it on my second VM on git/project folder and here again the same problem:

npm ERR! code ENOTEMPTY
npm ERR! syscall rmdir
npm ERR! path /usr/app/spfx/node_modules/.staging/@microsoft/sp-webpart-workbench-cd026fb2/local-workbench
npm ERR! errno -39
npm ERR! ENOTEMPTY: directory not empty, rmdir '/usr/app/spfx/node_modules/.staging/@microsoft/sp-webpart-workbench-cd026fb2/local-workbench'

I will try to add permissions to the root folder and possibly restart the OS ... it behaves quite randomly, but there will probably be some formula in it.
At times, I find it better to write down the versions for each new project and reinstall them manually each time ๐Ÿ˜ž.
Anyway, thank you for the advice :)

Yes, we removed this port parameter because SPFx v.1.13.0 does not include workbench. I guess we might want to return it back to readme where we describe known issues...

Yes, we removed this port parameter because SPFx v.1.13.0 does not include workbench. I guess we might want to return it back to readme where we describe known issues...

This is a good point @shurick81: since there are older versions that do support local workbench, we should consider extending the guidance to accommodate different versions.

Unfortunately, I have to reopen this issue,
I found that the problem is in the folder where I'm downloading the project from git:

So if I run:
C:\git\Folder\modules\project1
npm install

I get an error:
npm ERR! code ENOTEMPTY
npm ERR! syscall rmdir
npm ERR! path /usr/app/spfx/node_modules/.staging/@microsoft/sp-webpart-workbench-cd026fb2/local-workbench
npm ERR! errno -39
npm ERR! ENOTEMPTY: directory not empty, rmdir '/usr/app/spfx/node_modules/.staging/@microsoft/sp-webpart-workbench-cd026fb2/local-workbench'

but if I create a folder:
C: \anything
and copy everything from project1
and I'll give npm install everything works as it should ...

I'm already desperate, maybe I'm doing something wrong, but I thought the whole development might work as follows, correct me if I'm wrong:

  1. Download "Project1" from my own server (GIT):
    a) go to cd C: \ git
    git clone http://server/_git/Project1
  2. I will go to a specific web part:
    cd C:\git\Project1\modules\WebpartA
  3. Run docker at the command prompt
    docker run
  4. Install node_modules (node_modules does not exist, because these files do not exist on git according to gitignore)
    npm install
  5. I will fill in the lines from the known issues and run
    gulp serve
  6. Ideally everything works and I can develop ...

Docker folder sharing settings
Folder permission settings

Is it possible that git somehow locks files?

Should we try together with the same repo, https://github.com/shurick81/spfx1110testwp00.

git clone https://github.com/shurick81/spfx1110testwp00
cd C:\git\spfx1110testwp00\helloworld
docker run --rm -v ${pwd}:/usr/app/spfx waldekm/spfx:1.11.0 npm install

This one worked just fine for me.

I just created it via this command:

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 --skip-install

And don't forget to check that C:\git\spfx1110testwp00\helloworld permissions allow editing to the built in "Users" group.

This went good at first, I didn't even have to set permissions for anything (folder or docker) ... interesting, right?
But the point is, it doesn't work in the git folder, but I copy the same code to another folder and then it works.

so when you clone https://github.com/shurick81/spfx1110testwp00 git repo, fix the permissions and then run npm install in docker, it does not work?

Only what i did was that i created a new folder - after i used git clone - after npm install and everything works (without any additional permisson).

@necik11, I don't get what were your actions last time, sorry.

  1. cd c:\git
  2. git clone https://github.com/shurick81/spfx1110testwp00
  3. create some folder? which one?
  4. cd C:\git\spfx1110testwp00\helloworld
  5. docker run --rm -v ${pwd}:/usr/app/spfx waldekm/spfx:1.11.0 npm install

Could you specify the sequence how it works for you?

  1. I created on c: folder github.
  2. Git clone
  3. Docker run
    Works well
    Problem is when git clone my own repository(my project) from our internally git server to folder c:\git and there try the same sequences.

I still don't get every detail but let me ask you this way then. The difference between cases when it works and does not work boils down to different git code or does it boil down to different steps (folder location, folder creation, permissions setting, etc.)

What you mean by "I created on c: folder github."?

Do I get it right that c:\git is a root folder for many different git projects on your drive?

Yes, main problem is in folder location.
cd C:
ls

Directory: C:\
Mode                LastWriteTime         Length Name
----                -------------         ------ ----
d-----       23.07.2021     11:19                git
d-----       23.01.2022     22:47                github

cd git
ls

d-----       22.07.2021     16:14                ProjectA
d-----       15.02.2021     19:20                ProjectB
d-----       25.10.2020     19:04                ProjectC

cd ProjectA
ls

d-----       21.01.2022     12:53                modules
d-----       22.07.2021     16:17                shared
-a----       22.07.2021     16:14            955 README.md

also hidden folder (.git)
cd modules
ls

d-----       21.01.2022     12:53                moduleA
d-----       23.01.2022     17:11                moduleB

cd moduleA
ls

d-----       21.01.2022     12:53                .vscode
d-----       21.01.2022     12:53                config
d-----       23.01.2022     19:31                node_modules (just for now-everytime delete)
d-----       21.01.2022     12:53                src
d-----       21.01.2022     12:53                teams
-a----       21.01.2022     12:53            499 .editorconfig
-a----       21.01.2022     12:53            358 .gitignore
-a----       21.01.2022     12:53            322 .yo-rc.json
-a----       21.01.2022     12:53            225 gulpfile.js
-a----       21.01.2022     12:53         681891 npm-shrinkwrap.json
-a----       21.01.2022     12:53           1188 package.json
-a----       21.01.2022     12:53           2590 README.md
-a----       21.01.2022     12:53            858 tsconfig.json
-a----       21.01.2022     12:53            840 tslint.json

cd github (your repo)
ls
d----- 23.01.2022 22:47 spfx1110testwp00

cd spfx1110testwp00
ls

d-----       23.01.2022     23:04                helloworld
-a----       23.01.2022     22:47            399 .yo-rc.json
-a----       23.01.2022     22:47             20 README.md

cd helloworld

d-----       23.01.2022     22:47                .vscode
d-----       23.01.2022     22:47                config
d-----       23.01.2022     23:04                node_modules
d-----       23.01.2022     22:47                src
d-----       23.01.2022     22:47                teams
-a----       23.01.2022     22:47            499 .editorconfig
-a----       23.01.2022     22:47            358 .gitignore
-a----       23.01.2022     22:47            517 .yo-rc.json
-a----       23.01.2022     22:47            225 gulpfile.js
-a----       23.01.2022     23:04         644711 package-lock.json
-a----       23.01.2022     22:47            960 package.json
-a----       23.01.2022     22:47           2590 README.md
-a----       23.01.2022     22:47            858 tsconfig.json
-a----       23.01.2022     22:47            840 tslint.json

Ok, so if I get it right, your experience can be described like this.

  • When you clone a project to c:\git, it shows access issues when npm install
  • When you clone a project to c:\githug, it woks properly

If so, please make sure that on c:\git, Users group not only has write permissions on the folder level, but also "subfolders and files":

image

The C:\github folder works, but it doesn't work in the snippet (c:\git) folder:
image
image

This particular screenshot with npm errors, is it taken from installing for your work repository? Could you take a screen of this when you clone https://github.com/shurick81/spfx1110testwp00 to git folder and then run npm install in docker?

It's hard to describe the error, but after running the Docker Desktop on host, everything works. Probably the success is about
WSL 2.

The problem only arises when I try it on a Windows Server (VMware), where I received an error despite all the settings and permissions. It is interesting that sometimes I succeeded and it worked and the next day (after restarting the server) it did not work again ...

I tried this the same thing and my colleague and it behaved exactly the same. I will try to describe the exact procedure, I apologize in advance if the information would converge, but it is difficult to describe:

  1. Download the code / project (from our internal git server) git clone to the C:\git folder.
  2. Docker permissions settings - shared folder
  3. Adding permissions to the git folder for "Everyone" - "Full Control"
  4. Go to specific webpartA
  5. Run npm install - get an error
  6. Create a new C:\sample folder
  7. Copy the 1:1 webpartA from the git folder to the newly created sample folder.
    Again:
  8. Add the sample folder to the docker shared folder.
  9. Adding to the sample folderfor "Everyone" - "Full Control"
  10. Running npm install - works

The only one where the bug is probably somewhere is sharing permissions between the docker and the Windows server (VMware).

Unfortunately, I no longer have time to test why this is the case, and I will develop on the desktop ...
Just if someone had the same problem and installed WSL2 on HOST, then they can't run virtualization on the VM image.
Error: "Virtualized Intel VT-x / EPT is not supported on this platform."

So workaround: I need to switch host virtualization vs. VMware.
Turn off:
bcdedit / set hypervisorlaunchtype off
Turn on:
bcdedit / set hypervisorlaunchtype auto
restart PC