Mintlify Sandbox

Coding Examples

Overview

Sled Tests

Go Headless

Studio Two

Dashboard Extensions

Backend Extensions

Site Extensions

Extend Websites with SDK

Wix APIs and References

Build Apps

Wix Design System (WDS)

Client (Deprecated)

API Preview

Wix CLI

Contexts

Ricos

Extend Websites with Velo

API Reference

Velo

Picasso

# Migrate from HTTP Functions to HTTP Endpoints

Migrate HTTP functions to [HTTP endpoints](fallback::https://dev.wix.com/docs/build-apps/develop-your-app/develop-an-app-with-the-cli/supported-extensions/backend/http-endpoints/about-http-endpoints) in your new Wix CLI project, as part of [migrating an app from the legacy Wix CLI](fallback::https://dev.wix.com/docs/build-apps/develop-your-app/develop-an-app-with-the-cli/migrate-an-app-to-the-new-cli/migrate-an-app-from-the-legacy-cli/migrate-a-legacy-cli-app-to-the-new-wix-cli).

## Folder structure

| Legacy path | New path |
|--------|-----|
| `src/backend/api/<name>/api.ts` | `src/api/<name>.ts` |
| `src/backend/<sharedModule>.ts` | `src/lib/<sharedModule>.ts` |

## Step 1 | Copy and rename the file

1. From your legacy project, copy `src/backend/api/<name>/api.ts` to `src/api/<name>.ts` in your new Wix CLI project.
2. If the function imports shared backend modules, copy those modules into `src/lib/` in the new project. Shared modules aren't extensions, so they don't belong under `src/api/`.

## Step 2 | Adapt the code to the new project

In `src/api/<name>.ts`:

1. Add the APIRoute type import:
   ```ts
   import type { APIRoute } from '@wix/custom-extensions/types';
   ```

2. Change method signatures from:
   ```ts
   export async function GET(req: Request) {
   ```
   To:
   ```ts
   export const GET: APIRoute = async ({ request }) => {
   ```

   Then rename every `req` in the handler's body to `request`.

   If the handler never uses `req`, drop the parameter instead:
   ```ts
   export const GET: APIRoute = async () => {
   ```

3. Update the imports of shared backend modules to their new location. The file moved from `src/backend/api/<name>/` to `src/api/`, and the modules moved to `src/lib/`. For example, `../../spotlight-store` becomes `../lib/spotlight-store`.

4. Make sure that every path through the handler returns a `Response`. The `APIRoute` type requires it, so the typecheck fails with `Type '...' is not assignable to type 'APIRoute'` for a handler that returns anything else on some path, for example a plain object on an error path. Wrap such values in a `Response`:
   ```ts
   return new Response(JSON.stringify({ error: 'Not found' }), { status: 404 });
   ```


## Update your frontend call sites as you migrate each extension

Copying the file and adapting its code moves your backend code. Your frontend call sites stay in the legacy project until you migrate the extension that holds them, so there's nothing to change here yet.

Come back to this section from [Add the extension to the new project](fallback::https://dev.wix.com/docs/build-apps/develop-your-app/develop-an-app-with-the-cli/migrate-an-app-to-the-new-cli/migrate-an-app-from-the-legacy-cli/migrate-a-legacy-cli-app-to-the-new-wix-cli#add-the-extension-to-the-new-project) in the main migration guide, once the extension's code is in the new project. Then update its calls to point at the new endpoint:

   Change from:
   ```tsx
   const res = await httpClient.fetchWithAuth(
     `${import.meta.env.BASE_API_URL}/<your-endpoint-name>`,
   );
   ```

   To:
   ```tsx
   const baseApiUrl = new URL(import.meta.url).origin;
   const res = await httpClient.fetchWithAuth(`${baseApiUrl}/<your-endpoint-name>`);
   ```

## Backend example

### Previous syntax

The following example shows the old HTTP functions syntax from your legacy project, with files located in the `src/backend/api/` directory:

```ts
export async function GET(req: Request) {
    const url = new URL(req.url);
    const id = url.searchParams.get('id');
    return new Response(JSON.stringify({ id }));
}

export async function POST(req: Request) {
    const data = await req.json();
    return new Response(JSON.stringify({ received: data }));
}
```

### Updated syntax

The following example shows the new HTTP endpoints syntax in your new Wix CLI project, with files located in the `src/api/` directory:

```ts
import type { APIRoute } from '@wix/custom-extensions/types';

export const GET: APIRoute = async ({ request }) => {
    const url = new URL(request.url);
    const id = url.searchParams.get('id');
    return new Response(JSON.stringify({ id }));
};

export const POST: APIRoute = async ({ request }) => {
    const data = await request.json();
    return new Response(JSON.stringify({ received: data }));
};
```

Legacy path	New path
`src/backend/api/<name>/api.ts`	`src/api/<name>.ts`
`src/backend/<sharedModule>.ts`	`src/lib/<sharedModule>.ts`