Playground client can't connect to playground server (all localhost)

Question

I am on an Intel based iMac Pro running Big Sur (11.6.1) I have followed every variant of the local playground setup I can find (all are some version of page 2 in this document https://docs.google.com/document/d/13112LHG9vVvNUs40oZSqZ-DF6_yFiT_SJZ2NaEmjMM4/edit#heading=h.orxckbtlhnnq) and while I can get both the playground client and server to start, and I can load up the playground client web page in my browser, I can't "compile" the code in the playground because of the web page receives 504 connection errors. So, here is what the playground web page looks like:

And I see these errors in the Plutus-playground-client console when I do anything in the UI:

[HPM] Error occurred while trying to proxy request /api/oauth/status from localhost:8009 to http://localhost:8080 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)

[HPM] Error occurred while trying to proxy request /api/contract from localhost:8009 to http://localhost:8080 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)

Interestingly enough, if I copy the "compile" request from the chrome inspector as a curl command and adjust the URL to be the playground-server port, The connection to the playground-server is successful and the code compiles, so something seems broken with the client.

Also, using lsof, I have verified that both the server and client are listening on the correct ports.

Answer 1

Not sure if answering my own question is some sort of faux pas, but, figure I will put it in here because I have been banging my head on this one for hours and the fix appears to be very simple.

edit Plutus-apps/plutus-playground-client/webpack.config.js,adding a 'host' param as well as turning off HTTPS (its local dev, https isn't critical here):

devServer: {
    contentBase: path.join(__dirname, "dist"),
    compress: true,
    port: 8009,
    host: '0.0.0.0',<-- Add this
    https: false, <-- Change this from 'true' to 'false'
    stats: "errors-warnings",
    proxy: {
        "/api": {
            target: "http://127.0.0.1:8080",
        },
    },
},

Additionally, I need to specifically build the Plutus-playground-client:

cd plutus-apps
nix-build -A plutus-playground.client
nix-shell
cd plutus-apps/plutus-playground-client
npm run start