Static Web Apps CLI and Node.js 18: could not connect to API
Tags: azurestaticwebapps, node
Published: 2023-05-21 08:50:06

---
title: Static Web Apps CLI and Node.js 18: could not connect to API
published: true
tags: AzureStaticWebApps,Nodejs
canonical_url: https://johnnyreilly.com/static-web-apps-cli-node-18-could-not-connect-to-api
---
I make use of Azure Static Web Apps a lot. I recently upgraded to Node.js 18 and found that the Static Web Apps CLI no longer worked when trying to run locally; the API would not connect when running `swa start`:

`[swa] ❌ Could not connect to "http://localhost:7071/". Is the server up and running?`

This post shares a workaround.

![title image reading "Static Web Apps CLI and Node.js 18: could not connect to API" with the Static Web Apps CLI and Node.js logos](https://raw.githubusercontent.com/johnnyreilly/blog.johnnyreilly.com/main/blog-website/blog/2023-05-20-static-web-apps-cli-node-18-could-not-connect-to-api/title-image.png)

<!--truncate-->

## The issue

My own setup is a Vite front end and a Function App back end. I have a `package.json` in the folder of the front end app with the following scripts:

```json
"dev": "vite",
"start": "swa start http://localhost:5173 --run \"npm run dev\" --api-location ../FunctionApp"
```

I could see both front end and back end starting up in the console, but inevitably the SWA CLI would report:

`[swa] ❌ Could not connect to "http://localhost:7071/". Is the server up and running?`

It turned out this came down to the version of Node.js I was using. I was using Node.js 18. Or rather it was due to an issue with a dependency of the Static Web Apps CLI; the [wait-on](https://github.com/jeffbski/wait-on) library which waits for endpoints to become available. [With Node.js 18 this is broken](https://github.com/jeffbski/wait-on/issues/137). It's not clear a fix is imminent.

## The workaround

Various workarounds are suggested in [this GitHub issue](https://github.com/Azure/static-web-apps-cli/issues/663). I shared my own there, and I'm sharing it here too. (Mostly for me, I'll lay money I need this again and again.)

In the root of my project I installed [concurrently](https://www.npmjs.com/package/concurrently):

```
npm i concurrently
```

Then, again in the root of my project I added the following scripts:

```json
"debug": "concurrently -n \"staticwebapp,functionapp\" -c \"bgBlue.bold,bgMagenta.bold\" \"npm run debug:staticwebapp\" \"npm run debug:functionapp\"",
"debug:staticwebapp": "cd src/StaticWebApp && npm run debug",
"debug:functionapp": "cd src/FunctionApp && func start",
```

What's happening here is that I'm running the Static Web Apps CLI and the Function App CLI in separate processes, and running them concurrently when we run `npm run debug`. You'll note that the `debug:staticwebapp` script is running another `debug` script with the Static Web Apps CLI in the `src/StaticWebApp` folder:

```json
"debug": "swa start http://localhost:5173 --run \"npm run dev\" --api-location http://127.0.0.1:7071",
```

The `--api-location` flag is pointing to the endpoint the Function App is surfaced at. This is the key to the workaround.

## Summary

This takes us back to having a setup that will work with Node.js 18. Hopefully this is only needed for a short while, but it's good to have a workaround in the meantime.