Sp-dev-docs: Cannot use 1.6 with Docker

Created on 10 Sep 2018  路  31Comments  路  Source: SharePoint/sp-dev-docs

Category

  • [x ] Question
  • [ ] Typo
  • [ x] Bug
  • [ ] Additional article idea

Expected or Desired Behavior

Follow @waldekmastykarz 's instructions at https://blog.mastykarz.nl/sharepoint-framework-docker/

Start a docker container

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

In this container create a new 1.6 project and run it

yo @microsoft/sharepoint

Add "hostname": "0.0.0.0" to config/serve.json 

gulp serve --nobrowser

Now open a browser to your local workbench https://spfx:5432/workbench

Observed Behavior

  • There is an invalid certificate
  • When you ignore this message the following error is thrown in the browser

Error: ENOENT: no such file or directory, symlink '/usr/app/spfx/node_modules/@microsoft/sp-webpart-workbench' -> '/usr/app/spfx/temp/workbench-packages/@microsoft_sp-webpart-workbench'
at Object.fs.symlinkSync (fs.js:1014:18)
at WorkbenchPage._getUrlForPackagePath (/usr/app/spfx/node_modules/@microsoft/sp-webpart-workbench/lib/api/WorkbenchPage.js:166:17)
at WorkbenchPage._generateWorkbenchPageContent (/usr/app/spfx/node_modules/@microsoft/sp-webpart-workbench/lib/api/WorkbenchPage.js:33:39)
at WorkbenchPage.handleWorkbenchRequest (/usr/app/spfx/node_modules/@microsoft/sp-webpart-workbench/lib/api/WorkbenchPage.js:25:51)
at Layer.handle [as handle_request] (/usr/app/spfx/node_modules/express/lib/router/layer.js:95:5)
at next (/usr/app/spfx/node_modules/express/lib/router/route.js:137:13)
at Route.dispatch (/usr/app/spfx/node_modules/express/lib/router/route.js:112:3)
at Layer.handle [as handle_request] (/usr/app/spfx/node_modules/express/lib/router/layer.js:95:5)
at /usr/app/spfx/node_modules/express/lib/router/index.js:281:22
at Function.process_params (/usr/app/spfx/node_modules/express/lib/router/index.js:335:12)
at next (/usr/app/spfx/node_modules/express/lib/router/index.js:275:10)
at _setJSONResponseContentTypeMiddleware (/usr/app/spfx/node_modules/@microsoft/gulp-core-build-serve/lib/ServeTask.js:120:9)
at Layer.handle [as handle_request] (/usr/app/spfx/node_modules/express/lib/router/layer.js:95:5)
at trim_prefix (/usr/app/spfx/node_modules/express/lib/router/index.js:317:13)
at /usr/app/spfx/node_modules/express/lib/router/index.js:284:7
at Function.process_params (/usr/app/spfx/node_modules/express/lib/router/index.js:335:12)

gulp serve --nobrowser output:

spfx@f991e96931c5:/usr/app/spfx$ gulp serve --nobrowser
Build target: DEBUG
[11:27:51] Using gulpfile /usr/app/spfx/gulpfile.js
[11:27:51] Starting gulp
[11:27:51] Starting 'serve'...
[11:27:51] Starting subtask 'configure-sp-build-rig'...
[11:27:51] Finished subtask 'configure-sp-build-rig' after 15 ms
[11:27:51] Starting subtask 'spfx-serve'...
[11:27:53] 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.
[11:27:53] Starting server...
Starting api server on port 5432.
Registring api: /workbench
Registring api: */*
[11:27:53] Finished subtask 'spfx-serve' after 1.79 s
[11:27:53] Starting subtask 'pre-copy'...
[11:27:53] Finished subtask 'pre-copy' after 60 ms
[11:27:53] Starting subtask 'copy-static-assets'...
[11:27:53] Starting subtask 'sass'...
[11:27:57] Server started https://0.0.0.0:4321
[11:27:57] LiveReload started on port 35729
[11:27:57] Running server
[11:27:57] Finished subtask 'copy-static-assets' after 4.14 s
[11:27:57] Finished subtask 'sass' after 4.13 s
[11:27:57] Starting subtask 'tslint'...
[11:27:57] [tslint] tslint version: 5.9.1
[11:27:57] Starting subtask 'tsc'...
[11:27:57] [tsc] typescript version: 2.4.2
[11:28:00] Finished subtask 'tsc' after 2.81 s
[11:28:00] Starting subtask 'ts-npm-lint'...
[11:28:00] Finished subtask 'ts-npm-lint' after 39 ms
[11:28:00] Starting subtask 'api-extractor'...
[11:28:00] Finished subtask 'api-extractor' after 665 渭s
[11:28:01] Finished subtask 'tslint' after 3.64 s
[11:28:01] Starting subtask 'post-copy'...
[11:28:01] Finished subtask 'post-copy' after 109 渭s
[11:28:01] Starting subtask 'collectLocalizedResources'...
[11:28:01] Finished subtask 'collectLocalizedResources' after 5.65 ms
[11:28:01] Starting subtask 'configure-webpack'...
[11:28:02] Finished subtask 'configure-webpack' after 1.48 s
[11:28:02] Starting subtask 'webpack'...
[11:28:05] Finished subtask 'webpack' after 2.37 s
[11:28:05] Starting subtask 'configure-webpack-external-bundling'...
[11:28:05] Finished subtask 'configure-webpack-external-bundling' after 860 渭s
[11:28:05] Starting subtask 'copy-assets'...
[11:28:05] Finished subtask 'copy-assets' after 47 ms
[11:28:05] Starting subtask 'write-manifests'...
[11:28:06] Finished subtask 'write-manifests' after 1.45 s
[11:28:06] Starting subtask 'reload'...
[11:28:06] Finished subtask 'reload' after 1.41 ms
  Request: [::ffff:172.17.0.1] '/workbench'
Error: ENOENT: no such file or directory, symlink '/usr/app/spfx/node_modules/@microsoft/sp-webpart-workbench' -> '/usr/app/spfx/temp/workbench-packages/@microsoft_sp-webpart-workbench'
    at Object.fs.symlinkSync (fs.js:1014:18)
    at WorkbenchPage._getUrlForPackagePath (/usr/app/spfx/node_modules/@microsoft/sp-webpart-workbench/lib/api/WorkbenchPage.js:166:17)
    at WorkbenchPage._generateWorkbenchPageContent (/usr/app/spfx/node_modules/@microsoft/sp-webpart-workbench/lib/api/WorkbenchPage.js:33:39)
    at WorkbenchPage.handleWorkbenchRequest (/usr/app/spfx/node_modules/@microsoft/sp-webpart-workbench/lib/api/WorkbenchPage.js:25:51)
    at Layer.handle [as handle_request] (/usr/app/spfx/node_modules/express/lib/router/layer.js:95:5)
    at next (/usr/app/spfx/node_modules/express/lib/router/route.js:137:13)
    at Route.dispatch (/usr/app/spfx/node_modules/express/lib/router/route.js:112:3)
    at Layer.handle [as handle_request] (/usr/app/spfx/node_modules/express/lib/router/layer.js:95:5)
    at /usr/app/spfx/node_modules/express/lib/router/index.js:281:22
    at Function.process_params (/usr/app/spfx/node_modules/express/lib/router/index.js:335:12)
    at next (/usr/app/spfx/node_modules/express/lib/router/index.js:275:10)
    at _setJSONResponseContentTypeMiddleware (/usr/app/spfx/node_modules/@microsoft/gulp-core-build-serve/lib/ServeTask.js:120:9)
    at Layer.handle [as handle_request] (/usr/app/spfx/node_modules/express/lib/router/layer.js:95:5)
    at trim_prefix (/usr/app/spfx/node_modules/express/lib/router/index.js:317:13)
    at /usr/app/spfx/node_modules/express/lib/router/index.js:284:7
    at Function.process_params (/usr/app/spfx/node_modules/express/lib/router/index.js:335:12)
  Request: [::ffff:172.17.0.1] '/favicon.ico'
Error: ENOENT: no such file or directory, stat '/usr/app/spfx/dist/public/favicon.ico'
    at Object.fs.statSync (fs.js:948:11)
    at getPublic (/usr/app/spfx/node_modules/@microsoft/sp-webpart-workbench/lib/api/getPublic.js:32:21)
    at Layer.handle [as handle_request] (/usr/app/spfx/node_modules/express/lib/router/layer.js:95:5)
    at next (/usr/app/spfx/node_modules/express/lib/router/route.js:137:13)
    at Route.dispatch (/usr/app/spfx/node_modules/express/lib/router/route.js:112:3)
    at Layer.handle [as handle_request] (/usr/app/spfx/node_modules/express/lib/router/layer.js:95:5)
    at /usr/app/spfx/node_modules/express/lib/router/index.js:281:22
    at param (/usr/app/spfx/node_modules/express/lib/router/index.js:354:14)
    at param (/usr/app/spfx/node_modules/express/lib/router/index.js:365:14)
    at param (/usr/app/spfx/node_modules/express/lib/router/index.js:365:14)
    at Function.process_params (/usr/app/spfx/node_modules/express/lib/router/index.js:410:3)
    at next (/usr/app/spfx/node_modules/express/lib/router/index.js:275:10)
    at _setJSONResponseContentTypeMiddleware (/usr/app/spfx/node_modules/@microsoft/gulp-core-build-serve/lib/ServeTask.js:120:9)
    at Layer.handle [as handle_request] (/usr/app/spfx/node_modules/express/lib/router/layer.js:95:5)
    at trim_prefix (/usr/app/spfx/node_modules/express/lib/router/index.js:317:13)
    at /usr/app/spfx/node_modules/express/lib/router/index.js:284:7
^C[11:31:25] Server stopped
About to exit with code: 0
Process terminated before summary could be written, possible error in async code not continuing!
Trying to exit with exit code 1
spfx@f991e96931c5:/usr/app/spfx$
community spfx-general question
Source
picture RobinBreman

All 31 comments

There was an issue introduced in SPFx v1.5 when the --nobrowser flag didn't work as expected and didn't include all output. Could you try running gulp serve without the --nobrowser flag and see if it's working?

waldekmastykarz picture waldekmastykarz on 10 Sep 2018

The gulp serve output is below, leaving --nobrowser out does not make a difference, the workbench is not show.

However, i do now get https errors in my console:

sp-loader-assembly_default.js:9853 [1536589318333][SPApplicationLoader.start] Error: ***Platform failed to load. Id: "4df9bb86-ab0a-4aab-ab5f-48bf167048fb", name: "@microsoft/sp-application-base".
Error: ***Failed to load component "4df9bb86-ab0a-4aab-ab5f-48bf167048fb" (SPApplicationBase).
Original error: ***Failed to load component dependency "4df9bb86-ab0a-4aab-ab5f-48bf167048fb" from component "SPApplicationBase" (***Failed to load component "f97266fb-ccb7-430e-9384-4124d05295d3" (Decorators).
Original error: ***Failed to load URL 'https://0.0.0.0:4321/node_modules/@microsoft/decorators/dist/decorators.js' for resource 'decorators' in component 'f97266fb-ccb7-430e-9384-4124d05295d3' (Decorators). There was a network problem.
This may be a problem with a HTTPS certificate. Make sure you have the right certificate.).
Original error: {3}

gulp serve output

spfx@4a7b76697ce7:/usr/app/spfx$ gulp serve
Build target: DEBUG
[14:20:36] Using gulpfile /usr/app/spfx/gulpfile.js
[14:20:36] Starting gulp
[14:20:36] Starting 'serve'...
[14:20:36] Starting subtask 'configure-sp-build-rig'...
[14:20:36] Finished subtask 'configure-sp-build-rig' after 71 ms
[14:20:36] Starting subtask 'spfx-serve'...
[14:20:45] 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.
[14:20:45] Starting server...
Starting api server on port 5432.
Registring api: /workbench
Registring api: */*
[14:20:48] Finished subtask 'spfx-serve' after 12 s
[14:20:48] Starting subtask 'pre-copy'...
[14:20:49] Finished subtask 'pre-copy' after 439 ms
[14:20:49] Starting subtask 'copy-static-assets'...
[14:20:49] Starting subtask 'sass'...
[14:21:14] Server started https://0.0.0.0:4321
[14:21:14] LiveReload started on port 35729
[14:21:14] Running server
[14:21:14] Opening https://localhost:5432/workbench using the default OS app
(node:11) 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:317:30)
    at emitTwo (events.js:126:13)
    at ChildProcess.emit (events.js:214:7)
    at maybeClose (internal/child_process.js:925:16)
    at Socket.stream.socket.on (internal/child_process.js:346:11)
    at emitOne (events.js:116:13)
    at Socket.emit (events.js:211:7)
    at Pipe._handle.close [as _onclose] (net.js:557:12)
(node:11) 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:11) [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.
[14:21:15] Finished subtask 'sass' after 26 s
[14:21:15] Starting subtask 'tslint'...
[14:21:15] [tslint] tslint version: 5.9.1
[14:21:15] Starting subtask 'tsc'...
[14:21:15] [tsc] typescript version: 2.4.2
[14:21:15] Finished subtask 'copy-static-assets' after 26 s
[14:21:22] Finished subtask 'tsc' after 6.65 s
[14:21:22] Starting subtask 'ts-npm-lint'...
[14:21:22] Finished subtask 'ts-npm-lint' after 177 ms
[14:21:22] Starting subtask 'api-extractor'...
[14:21:22] Finished subtask 'api-extractor' after 6.12 ms
[14:21:24] Finished subtask 'tslint' after 8.51 s
[14:21:24] Starting subtask 'post-copy'...
[14:21:24] Finished subtask 'post-copy' after 579 渭s
[14:21:24] Starting subtask 'collectLocalizedResources'...
[14:21:24] Finished subtask 'collectLocalizedResources' after 9.67 ms
[14:21:24] Starting subtask 'configure-webpack'...
[14:21:28] Finished subtask 'configure-webpack' after 4.48 s
[14:21:28] Starting subtask 'webpack'...
[14:21:45] Finished subtask 'webpack' after 17 s
[14:21:45] Starting subtask 'configure-webpack-external-bundling'...
[14:21:45] Finished subtask 'configure-webpack-external-bundling' after 8.47 ms
[14:21:45] Starting subtask 'copy-assets'...
[14:21:45] Finished subtask 'copy-assets' after 75 ms
[14:21:45] Starting subtask 'write-manifests'...
[14:21:47] Finished subtask 'write-manifests' after 1.96 s
[14:21:47] Starting subtask 'reload'...
[14:21:47] Finished subtask 'reload' after 1.67 ms
  Request: [::ffff:172.17.0.1] '/workbench'
  Request: '/temp/workbench.html'
  Request: '/temp/workbench-packages/@microsoft_sp-loader/dist/sp-loader-assembly_default.js'
  Request: '/temp/manifests.js'
  Request: '/temp/workbench-packages/@microsoft_sp-webpart-workbench/lib/api/workbenchInit.js'
  Request: '/temp/workbench-packages/@microsoft_sp-webpart-workbench/lib/api/assets/server-icon.png'
RobinBreman picture RobinBreman on 10 Sep 2018

Is it a docker thing to not use localhost? That part seems suspicious to me when trying to run the local workbench, but I'm somewhat ignorant in this area.

patmill picture patmill on 11 Sep 2018

@patmill in Docker, localhost maps to the Docker container not to its host, so in order to access a webserver running inside a Docker container from the host, the webserver must be mapped to 0.0.0.0 instead of to localhost.

waldekmastykarz picture waldekmastykarz on 11 Sep 2018

@RobinBreman The problem is shown in these lines:

[14:21:14] Server started https://0.0.0.0:4321
[14:21:14] LiveReload started on port 35729
[14:21:14] Running server
[14:21:14] Opening https://localhost:5432/workbench using the default OS app

As you can see, the web server is mapped as specified in serve.json to 0.0.0.0, but the workbench is still mapped to localhost. When you access https://localhost:5432/workbench in the browser, you get redirected to https://localhost:4321/temp/workbench.html which you can't access. Instead, if you change the URL to https://0.0.0.0:4321/temp/workbench.html, you should be able to open the workbench.

What's confusing though, that after you visited https://0.0.0.0:4321/temp/workbench.html, if you navigate to https://localhost:5432/workbench, you will be redirected to https://localhost:4321/temp/workbench.html which will work.

@patmill it would be helpful if workbench followed the host specified in serve.json.

waldekmastykarz picture waldekmastykarz on 11 Sep 2018

@waldekmastykarz How do i navigate to https://0.0.0.0 it reports back as an invalid address.

Deze site is niet bereikbaar
De webpagina op https://0.0.0.0:4321/temp/workbench.html is mogelijk tijdelijk uitgeschakeld of permanent verplaatst naar een nieuw webadres.
ERR_ADDRESS_INVALID

RobinBreman picture RobinBreman on 11 Sep 2018

Could it be that port 4321 is blocked by your firewall? Can you verify if a previous version of SPFx (eg. 1.4.1) works fine in Docker just to see if it's something with your Docker setup or something specific to v1.6.0?

waldekmastykarz picture waldekmastykarz on 11 Sep 2018

Hi

I get similar issue where I can no longer access SharePoint Framework from my host to docker. I temporarily abandoned use of docker until I can find an answer. However, this started in V1.5.1 and V1.6.0, which I think this may have started after updating docker.

In the host, Edge/Chrome/IE reports that its not secure and on the redirect to https://localhost:4321/temp/workbench.html I get an ERR_CONNECTION_CLOSED. When serving I can see a log entry for the https://localhost:5432/workbench address but not the redirected address.

Paul

pkbullock picture pkbullock on 12 Sep 2018

I believe that the redirect is causing an invalid dev certificate. And chrome is now actively blocking our requests to the docker container.
@waldekmastykarz no firewall issues over here, but will need to check 1.4 report on that later...

RobinBreman picture RobinBreman on 12 Sep 2018

@pkbullock have you checked the known issues section on the SPFx Docker image?

waldekmastykarz picture waldekmastykarz on 12 Sep 2018

@RobinBreman the odd thing is that I'm using the latest Chrome version myself and I can't repro your issue. We might be missing some detail

waldekmastykarz picture waldekmastykarz on 12 Sep 2018

@waldekmastykarz - the fix for 1.5.0 worked in your instructions, I dismissed this before because I thought I had 1.5.1 working previously without this. In this case, the issue was between the computer and the chair. Thank you for your help.

I've got to ask - how did you find the answer to that one?

I'm still learning SPFX and a big gap in my knowledge is understanding how to diagnose such issue and tracing back the fault. With C#, I knew what tools to use, process to diagnose in Visual Studio and debugging tools. I'm still new to the Node.js/SPFX world and I will admit I lack knowledge on how under the hood SPFX works. I'd love to know how to find answers to faults like this or where to look.

@RobinBreman - I'm running the 1.6.0 image and I've managed to get the my issue working without the V1.6.0 fix. But had to do V1.5.0 change in the docs on Waldek page in hub.docker.com. Not sure if this is helpful.

Edge Browser: https://localhost:4321/temp/workbench.html
Serve File:
{
"$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
"port": 4321,
"https": true,
"initialPage": "https://localhost:5432/workbench",
"api": {
"port": 5432,
"entryPath": "node_modules/@microsoft/sp-webpart-workbench/lib/api/"
}
}
I get certificate warnings: with DLG_FLAGS_SEC_CERT_CN_INVALID but can navigate to workbench.

Not sure if its relevant but i also get the same error about the UnhandledPromiseRejectionWarning:
(node:9) 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:317:30)
at emitTwo (events.js:126:13)
at ChildProcess.emit (events.js:214:7)
at maybeClose (internal/child_process.js:925:16)
at Socket.stream.socket.on (internal/child_process.js:346:11)
at emitOne (events.js:116:13)
at Socket.emit (events.js:211:7)
at Pipe._handle.close [as _onclose] (net.js:557:12)
(node:9) 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:9) [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.

pkbullock picture pkbullock on 12 Sep 2018

@pkbullock great to hear it's working for you! The fix in v1.6.0 does the same as v1.5.x. The main difference is, that in v1.6.0 the host property is exposed in the serve.json file, so that we don't need to hack the packages in node_modules like we had to do in v1.5.x.

Whenever there is something odd with the build I try to determine which task isn't working as expected and then I look it up in the node_modules to see how it's working. While the gulpfile.js is pretty empty which is counterintuitive if you've worked with gulp, the build toolchain is pretty well organized and you understand how it's build, you can easily find the different tasks and see how they're built.

waldekmastykarz picture waldekmastykarz on 12 Sep 2018

@pkbullock Thanks for pointing that out!
Changing the ./node_modules/gulp-connect/index.js file as referenced in the 1.5.0 instructions did the trick. So we should ignore the 1.6 docker instructions for this release.

@waldekmastykarz Adding "hostname": "0.0.0.0" to ./config/serve.json won't work on my end.
As promised i created a recording showing the 1.6 docker container error.

RobinBreman picture RobinBreman on 13 Sep 2018
👍1

@RobinBreman Thanks for the video. What is the error that you're getting in the browser? I don't think I've seen it earlier

waldekmastykarz picture waldekmastykarz on 13 Sep 2018

@waldekmastykarz It's the same error as in my first message.

Error: ENOENT: no such file or directory, symlink '/usr/app/spfx/node_modules/@microsoft/sp-webpart-workbench' -> '/usr/app/spfx/temp/workbench-packages/@microsoft_sp-webpart-workbench'
at Object.fs.symlinkSync (fs.js:1014:18)
at WorkbenchPage._getUrlForPackagePath (/usr/app/spfx/node_modules/@microsoft/sp-webpart-workbench/lib/api/WorkbenchPage.js:166:17)
at WorkbenchPage._generateWorkbenchPageContent (/usr/app/spfx/node_modules/@microsoft/sp-webpart-workbench/lib/api/WorkbenchPage.js:33:39)
at WorkbenchPage.handleWorkbenchRequest (/usr/app/spfx/node_modules/@microsoft/sp-webpart-workbench/lib/api/WorkbenchPage.js:25:51)
at Layer.handle [as handle_request] (/usr/app/spfx/node_modules/express/lib/router/layer.js:95:5)
at next (/usr/app/spfx/node_modules/express/lib/router/route.js:137:13)
at Route.dispatch (/usr/app/spfx/node_modules/express/lib/router/route.js:112:3)
at Layer.handle [as handle_request] (/usr/app/spfx/node_modules/express/lib/router/layer.js:95:5)
at /usr/app/spfx/node_modules/express/lib/router/index.js:281:22
at Function.process_params (/usr/app/spfx/node_modules/express/lib/router/index.js:335:12)
at next (/usr/app/spfx/node_modules/express/lib/router/index.js:275:10)
at _setJSONResponseContentTypeMiddleware (/usr/app/spfx/node_modules/@microsoft/gulp-core-build-serve/lib/ServeTask.js:120:9)
at Layer.handle [as handle_request] (/usr/app/spfx/node_modules/express/lib/router/layer.js:95:5)
at trim_prefix (/usr/app/spfx/node_modules/express/lib/router/index.js:317:13)
at /usr/app/spfx/node_modules/express/lib/router/index.js:284:7
at Function.process_params (/usr/app/spfx/node_modules/express/lib/router/index.js:335:12)

RobinBreman picture RobinBreman on 13 Sep 2018

@RobinBreman have you tried running gulp clean and gulp serve again?

waldekmastykarz picture waldekmastykarz on 13 Sep 2018

yes I tested gulp clean, didn't work.
I can reproduce this issue easy, create a new project with yo only change the /config/serve.json file and running gulp serve.

RobinBreman picture RobinBreman on 13 Sep 2018

The odd thing is that I'm doing exactly the same and it's working for me 馃槙 It must be something simple that we're missing

waldekmastykarz picture waldekmastykarz on 13 Sep 2018

@pkbullock Thanks a million yes your suggestion works for 1.6.
If you still get issues after the same please do a gulp clean and gulp serve.

kolliparachandra picture kolliparachandra on 26 Sep 2018

@waldekmastykarz I have the same issues as above, but I'll try to explain what I have found.

  • I'm running Docker on Windows (probably this explains the difference between our issues and you not having any, as I know you run OSX)
  • I followed the guidelines for 1.6.0 with the host 0.0.0.0 setup.
  • Took some time to figure out I needed to use https://localhost:5432/workbench instead of https://localhost:4321/temp/workbench.html
  • My errors start at this point:

    • SSL error (which I haven't figured out yet)

    • Workbench loads (I see the title in the browser tab) but stays empty..

Did a compare between the temp folder generated with your Docker image and one natively generated on Windows, and it seems that the symlinks have an issue.
dockertempfoldercompare
On the left is native Windows, on the right is Dockergenerated. For some reason they aren't behaving the same way. This gives error Error: ENOENT: no such file or directory, open '/usr/app/spfx/temp/workbench-packages/@microsoft_sp-webpart-workbench/lib/api/workbenchInit.js'

If I do gulp serve and copy over the workbench-packages folder from the Windows install, I open workbench directly with https://localhost:4321/temp/workbench.html
This gives the following errors in Chrome console:
[1538592302349][SPApplicationLoader.start] Error: ***Platform failed to load. Id: "4df9bb86-ab0a-4aab-ab5f-48bf167048fb", name: "@microsoft/sp-application-base". Error: ***Failed to load component "4df9bb86-ab0a-4aab-ab5f-48bf167048fb" (SPApplicationBase). Original error: ***Failed to load component dependency "4df9bb86-ab0a-4aab-ab5f-48bf167048fb" from component "SPApplicationBase" (***Failed to load component "f97266fb-ccb7-430e-9384-4124d05295d3" (Decorators). Original error: ***Failed to load URL 'https://0.0.0.0:4321/node_modules/@microsoft/decorators/dist/decorators.js' for resource 'decorators' in component 'f97266fb-ccb7-430e-9384-4124d05295d3' (Decorators). There was a network problem. This may be a problem with a HTTPS certificate. Make sure you have the right certificate.). Original error: {3}
It tries to load files from https://0.0.0.0 which fails.

Hope this helps the troubleshooting?

YannickRe picture YannickRe on 3 Oct 2018
👍1

Thanks for the detailed findings @YannickRe. I'll see if I can find a possible fix for this.

waldekmastykarz picture waldekmastykarz on 3 Oct 2018

I've found a solution to this issue. More details @ https://github.com/waldekmastykarz/docker-spfx/issues/15#issuecomment-429627249.

waldekmastykarz picture waldekmastykarz on 14 Oct 2018

Using Docker Desktop v2.0.0.0-win81 (29211) - created a docker image with SPFx tools from 4.7.2-runtime-windowsservercore-ltsc2019 base image.
[email protected], [email protected]
+-- @microsoft/[email protected]
+-- [email protected]
+-- [email protected]
`-- [email protected]

yo successfully scaffolds a SPFx project.
Applied fixes above prior to running gulp.
gulp serve successfully loads project. I can view Source for workbench.html but workbench.html fails to render properly.

Local workbench issue:
Issue appears to be with symbolic links on host? Is Docker Desktop with windows base image for SPFx Local workbench viable? I realize many moving parts here - just pausing to see if I should be investing any more time to make this work.

note: Success when using SharePoint Online workbench (_layouts/15/workbench.aspx)

Local workbench issue:
[09:37:05] Starting subtask 'write-manifests'...
[09:37:06] Finished subtask 'write-manifests' after 1.21 s
[09:37:06] Starting subtask 'reload'...
[09:37:06] Finished subtask 'reload' after 4.03 ms
Request: [::ffff:192.168.108.128] '/workbench'
Request: '/temp/workbench.html'
Request: '/temp/manifests.js'
Request: '/temp/workbench-packages/@microsoft_sp-loader/dist/sp-loader-assembly_default.js'
Error: UNKNOWN: unknown error, stat 'C:spfx-solutiontempworkbench-packages@microsoft_sp-loaderdistsp-loader-assembly_default.js'
Request: '/temp/workbench-packages/@microsoft_sp-webpart-workbench/lib/api/workbenchInit.js'
Error: UNKNOWN: unknown error, stat 'C:spfx-solutiontempworkbench-packages@microsoft_sp-webpart-workbenchlibapiworkbenchInit.js'
Request: '/temp/workbench-packages/@microsoft_sp-webpart-workbench/lib/api/assets/server-icon.png'
Error: UNKNOWN: unknown error, stat 'C:spfx-solutiontempworkbench-packages@microsoft_sp-webpart-workbenchlibapiassetsserver-icon.png

brassman2000 picture brassman2000 on 10 Jan 2019

In order to get around this problem I resorted to:
Add the --add-hosts=[MyMachineName.my.domian.com]:0.0.0.0 command line argument to the docker run command and setup serve.json so that the hostname value matches my fully qualified machine name.

ScottMathieson picture ScottMathieson on 15 Feb 2019
👍1

I have wasted many hours over last few months to run spfx inside dockers for my large development team. Unfortunately failed to configure one till date. Tried since SPFX 1.6 version released. After release of SPFX 1.8.0 tried again but with no luck. May be there are many issues with Docker for Windows. Anybody able to run docker on windows for SPFX > 1.6? Please help!

praveenbattula picture praveenbattula on 27 Mar 2019

I have given up on trying to get it to work with Docker on Windows. While it is an awesome idea, it just has too many issues that are related to the Core product and not the images or SPFx (at least, that鈥檚 my feeling).

I now just use the latest version of the Framework, combined with the O365 CLI to upgrade older projects.

YannickRe picture YannickRe on 27 Mar 2019

I did the same. But I am keep on trying on each release just to make sure this time I will be lucky to run on dockers. But its not happening. Right now to create environment for all dev machines and maintaining different versions of npm on dev machines is becoming tricky and time taking process. Need to find a viable solution. Thanks anyway.

praveenbattula picture praveenbattula on 27 Mar 2019

I have tried creating a Windows Server Nano image with SPFx to use in Docker for Windows, but so far no success yet.

YannickRe picture YannickRe on 27 Mar 2019

Yes, I have read from one of the issues in different thread and didn't try to create nano images my side. I believe until there is a proper solution found from someone it is not a useful thing to try and configure one. Lets save time!!!!

praveenbattula picture praveenbattula on 27 Mar 2019
👍1

This issue is being closed as part of an issue list cleanup project. Issues with no activity in the past 6 months that aren't tracked by engineering as bugs were closed as part of this inititive. If this is still an issue, please follow the steps outlined to re-open the issue.

msft-github-bot picture msft-github-bot on 22 Jan 2020
Was this page helpful?
0 / 5 - 0 ratings

Related issues

nanddeepn picture nanddeepn  路  3Comments
SteIvanov picture SteIvanov  路  3Comments
patrick-rodgers picture patrick-rodgers  路  3Comments
StfBauer picture StfBauer  路  3Comments
ken-harris picture ken-harris  路  3Comments