[SWA CLI] localhost:4280 can't reach localhost:3000 (error 502)

[rubenaster]

Hi all,

I'm currently developing a React app and started to use Azure Static Web Apps since this weekend.

The problem I'm facing is that when I start the App via 'swa start' command, everything spins up correct but when I want to open the website via the SWA development server (http://localhost:4280) I get an error 502.

Here are some facts:

• I use SWA CLI 1.1.3 and Windows 10
• I have a React app and a Function v4 as API
• I can push and deploy to an Azure Static Web App successfully and the website works as expected
• I can reach the app (started via 'swa start') by directly navigating to localhost:3000 but not via localhost:4280
• Reaching the function app via localhost:4280 works fine

I get the following log when I try to reach the app via localhost:4280:
[swa] GET http://localhost:3000/ (proxy)
[swa] ✖ GET http://localhost:3000/ - 502 (Bad Gateway)

And here's a picture of my browser:

My swa-cli.config.json

{
  "$schema": "https://aka.ms/azure/static-web-apps-cli/schema",
  "configurations": {
    "react-app": {
      "appLocation": ".",
      "outputLocation": "build",
      "appBuildCommand": "npm run build",
      "run": "npm start",
      "appDevserverUrl": "http://localhost:3000"
    }
  }
}

SWA CLI start output:

***********************************************************************
* WARNING: This emulator may not match the cloud environment exactly. *
* Always deploy and test your app in Azure.                           *
***********************************************************************

[api] 
Azure Functions Core Tools
[api] Core Tools Version:       4.0.5095 Commit hash: N/A  (64-bit)
[api] Function Runtime Version: 4.16.5.20396
[api]
[run] 
[run] > [email protected] start
[run] > react-scripts start
[run]
[swa] 
[swa] Found configuration file:
[swa]   C:\Repositories\ThePlatform\src\client\staticwebapp.config.json
[swa]
[swa] - Waiting for http://localhost:3000 to be ready
[api] [2023-06-26T14:50:34.852Z] Worker process started and initialized.
[api] 
[api] Functions:
[api]
[api]   user: [GET,POST] http://localhost:7071/api/user
[api]
[api]   userProfile: [GET] http://localhost:7071/api/userProfile
[api]
[api] For detailed output, run func with --verbose flag.
[swa] ✔ Connected to http://localhost:3000 successfully
[swa] - Waiting for http://localhost:7071 to be ready
[swa] ✔ Connected to http://localhost:7071 successfully
[swa] 
[swa] Using dev server for static content:
[swa]   http://localhost:3000
[swa]
[swa] Serving API:
[swa]   C:\Repositories\ThePlatform\src\api
[swa]
[swa] Azure Static Web Apps emulator started at http://localhost:4280. Press CTRL+C to exit.
[swa]
[swa]
[run] (node:25388) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
[run] (Use `node --trace-deprecation ...` to show where the warning was created)
[run] (node:25388) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
[run] Starting the development server...
[run]
[run] Compiled successfully!
[run]
[run] You can now view falcon-react in the browser.
[run]
[run]   Local:            http://localhost:3000
[run]   On Your Network:  http://192.168.56.1:3000
[run]
[run] Note that the development build is not optimized.
[run] To create a production build, use npm run build.
[run]
[run] webpack compiled successfully

The same issues appear also in the Microsoft Train examples.

Does anybody have an idea where I can continue searching for issues? I feel a bit lost currently.

[abylouis]

I have the same issue too. I can access the app at http://localhost:3000 and the CLI at http://localhost:4280. But getting a 502 when accessing the static app through the emulator

[abylouis]

Downgraded to version node version 16.20.1 using NVM and is working now locally.

[rubenaster]

Exactly that did the trick, thanks @abylouis!

Hopefully node 18.x will be supported soon.

[phille968]

My team is experiencing the same thing, though we are building a Vue3 app.
I too hope node 18.x will get full support soon, seeing how Node 16.x is losing its LTS-status in September.

According to the MS-documentation, Node 18.x is still in preview when running the function app in node. The same probably applies to frontends which are served using node 18, even though MS don't mention it explicitly.

[phille968]

I found a temporary solution in this thread.

Try changing "appDevserverUrl": "http://localhost:3000" to "appDevserverUrl": "http://127.0.0.1:3000"

[thomasgauvin]

We're working on our Node 18 support! In the meantime, downgrading to Node 16 or using the solution of 127.0.0.1 instead of localhost works as @phille968 mentioned

[faustool-volvo]

I found a temporary solution in this thread.

Try changing "appDevserverUrl": "http://localhost:3000" to "appDevserverUrl": "http://127.0.0.1:3000"

this worked beautifully. 👍

[thomasgauvin]

The SWA CLI version 1.1.4 has been deployed, bringing with it such fixes for Node 18. Update your SWA CLI version to get this fix!