Running Docker SPFx

Question

Running Docker SPFx

Mike-tech opened this issue 5 years ago · 18 comments

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

Answer 1 · 2020-01-23T18:15:21.000Z

On which OS are you using Docker?

Answer 2 · 2020-01-23T19:37:30.000Z

Windows 10 Pro

Answer 3 · 2020-01-24T18:05:03.000Z

And which version of the docker image are you using?

Answer 4 · 2020-01-25T06:48:50.000Z

Using the latest image which is 1.9.1. I've also tried 1.8.0 or 1.7.1 and I believe it was the same outcome.

Answer 5 · 2020-01-25T07:33:18.000Z

Are you getting errors only when working with List View Command Sets or are you seeing the same error no matter which component you build?

Answer 6 · 2020-01-25T10:28:28.000Z

Seems to be the same when trying to create a web part too:

I'm running docker desktop community 2.2.0.0

Answer 7 · 2020-01-25T15:57:12.000Z

The opn error could be related to the fact that gulp serve tries to start a browser which it can't do inside the docker image. As such, you should be able to ignore that error. Are you seeing any other errors further down the output?

Answer 8 · 2020-01-25T20:24:07.000Z

The problem i'm having is the server doesn't seem to be reachable or not successfully started. When I navigate the address on the browser, I get "This site can't be reached".
For web part I get this when I navigate to the workbench. And for List View, command menus are not loaded and if I navigate to https://localhost:4321/temp/manifests.js, again I get site can't be reached.

In the docker Linux host I have no error after the initial opn error, the output is as shown in the screen above with status of Finished subtask.

Answer 9 · 2020-01-26T11:40:21.000Z

Could it be that your firewall or network settings are blocking access to the container?

Answer 10 · 2020-01-27T22:50:48.000Z

I'm at a loss now... I'm using a personal machine with no special setup. I turned off my out of the box Windows Firewall and the result was the same. Not using any special network or configuration. Also in Docker can't see anything saying blocked (I know this don't proof anything).

Anyway if there is no wider issue then I will close this and park this. May be I've got some missing setup unique to my environment?

Answer 11 · 2020-01-29T18:32:49.000Z

If you wanted to verify your setup, perhaps you could try to run a different container, just to verify that you can communicate with it. You could for example try https://hub.docker.com/r/strm/helloworld-http/ to see if it works on your machine.

Answer 12 · 2020-01-29T23:45:06.000Z

Thanks for that @waldekmastykarz. Yes it does work

This is my spfx image setup environment, if this looks ok then what else could be the issue?

Answer 13 · 2020-02-03T18:40:35.000Z

Check, that brings us a step closer. I suspect HTTPS to be the issue here. Which browser are you using?

Answer 14 · 2020-02-03T23:01:51.000Z

Using Chrome, Edge and IE. All Can't connect securely to this page. So what's the pointer or where is settings required or need setting?
Thanks

Answer 15 · 2020-02-05T18:42:20.000Z

Can you access https://localhost:4321/temp/workbench.html after running gulp serve in the container? By default the SPFx toolchain navigates to https://localhost:5432/workbench which then redirects you to the workbench. In some cases, the redirect doesn't work, while accessing the workbench directly works just fine.

Answer 16 · 2020-02-10T00:55:09.000Z

Had a chance to deep dive into this today. One big step forward, I finally was able to communicate when I add "hostname": "0.0.0.0", to serve.json file. Once set, connection came alive.

But my application is not working, the debug is pointing to ?debug=true&noredir=true&debugManifestsFile=https://0.0.0.0:4321/temp/manifests.js which I cannot navigate to. When hostname is not included, then it uses this uri https://localhost:4321/temp/manifests.js which I can only navigate to when hostname is included.

How can I make my app now work when hostname is included in serve.json? Thanks

Answer 17 · 2020-02-10T01:10:30.000Z

@waldekmastykarz your fix here solved the issue i was getting after adding hostname in the serve json file.

So does that mean this issue hasn't been fixed because the your post date back to Oct 2018? Anyway this fix certainly got me going.

Phew! Glad I got to the end of this. Many thanks for your help as ever 👍

Answer 18 · 2020-02-10T18:09:59.000Z

Great to hear I could help and you got it to work! At this stage, I'm not sure if it's indeed a bug or if it's just how things are. I had conversations with the SPFx team about officially supporting docker but as far as I know they've prioritized different things first. If it's very important you, it would be good to bring it up in the issue list in the sp-dev-docs repo to get their latest stance on it.