Unable to run fast-serve in container

[bhansonfusion]

When using fast-serve and containers is set to true, I receive the following error message:

`/workspaces/HelloWorld/node_modules/spfx-fast-serve-helpers/lib/settings/containers.js:26
config.devServer.client.webSocketURL.hostname = 'localhost';
^

TypeError: Cannot set properties of undefined (setting 'hostname')
at applyContainersSetting (/workspaces/HelloWorld/node_modules/spfx-fast-serve-helpers/lib/settings/containers.js:26:59)
at applyServeSettings (/workspaces/HelloWorld/node_modules/spfx-fast-serve-helpers/lib/settings/index.js:18:45)
at createConfig (/workspaces/HelloWorld/node_modules/spfx-fast-serve-helpers/lib/webpack/configureWebPack.js:82:39)
at async resultConfig (/workspaces/HelloWorld/node_modules/spfx-fast-serve-helpers/lib/webpack/configureWebPack.js:93:28)
at async startDevServer (/workspaces/HelloWorld/node_modules/spfx-fast-serve-helpers/lib/webpack/devServer.js:19:24)

Node.js v18.20.4`

I'm using a dev container with ipAddress: 0.0.0.0 in serve.json, but fast-serve is not picking it up, so I have to explicitly set containers: true.

[s-KaiNet]

Which spfx version do you use?

[bhansonfusion]

1.19.0

[s-KaiNet]

Could you try installing npm i spfx-fast-serve-helpers@1.19.6-beta.0 -DE and check if this version fixes the issue?

[bhansonfusion]

I've installed that version, but it's not serving the files. I get the "Your web part will not appear in the toolbox. Please make sure "gulp serve" is running in a web part project. Please refresh the page once "gulp serve" is running."

I tried to access localhost:4321 and got a "server did not respond."

The log shows
[fast-serve] To load your scripts, use this query string: ?debug=true&noredir=true&debugManifestsFile=https://localhost:4321/temp/manifests.js <i> [webpack-dev-server] Project is running at: <i> [webpack-dev-server] Loopback: https://localhost:4321/, https://[::1]:4321/ <i> [webpack-dev-server] Content not from webpack is served from '/workspaces/HelloWorld/temp' directory <i> [webpack-dev-server] 404s will fallback to '/index.html'

If I run it with a config file
{ "$schema": "https://raw.githubusercontent.com/s-KaiNet/spfx-fast-serve/master/schema/config.v2.schema.json", "serve": { "containers": true } }

I get the following logs
[fast-serve] To load your scripts, use this query string: ?debug=true&noredir=true&debugManifestsFile=https://0.0.0.0:4321/temp/manifests.js <i> [webpack-dev-server] Project is running at: <i> [webpack-dev-server] Loopback: https://localhost:4321/ <i> [webpack-dev-server] Content not from webpack is served from '/workspaces/HelloWorld/temp' directory <i> [webpack-dev-server] 404s will fallback to '/index.html'

I can access localhost:4321 but I get the response "Cannot GET /"

The webaprt loads, but any changes that I make to a file does not trigger a rebuild.

It doesn't seem to automatically recognizing that I am using a container. Here is my config/serve.json

{ "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/spfx-serve.schema.json", "port": 4321, "ipAddress": "0.0.0.0", "https": true, "initialPage": "https://{tenantDomain}/_layouts/workbench.aspx" }

gulp serve works and shows this in the logs
Server started https://0.0.0.0:4321

I'm not sure if any of that helps; let me know if you need anything else.

[s-KaiNet]

but any changes that I make to a file does not trigger a rebuild.

I have the same behavior, but also for regular gulp serve, so I thought that's something related to my setup, because I don't use docker for spfx dev. When you run gulp serve and make changes to a file, does it trigger rebuild?

[bhansonfusion]

When you run gulp serve and make changes to a file, does it trigger rebuild?

It does not.

[s-KaiNet]

Then it seems it's more related to docker setup. Maybe it's something with volumes mappings, but tbh my knowledge here is quite limited.