Coding Examples

Sled Tests

Go Headless

Develop Websites (SDK)

Build Apps

Client (Deprecated)

API Preview

Wix CLI

Ricos

Develop Websites

API Reference

Velo

Picasso

GraphQL (Alpha)

# Migrate from Web Methods to HTTP Endpoints

If you're upgrading from the [Legacy Wix CLI for Apps](fallback::https://dev.wix.com/docs/wix-cli/legacy-clis/legacy-wix-cli-for-apps/about-the-legacy-wix-cli-for-apps), this guide helps you migrate your existing [Web method extensions](fallback::https://dev.wix.com/docs/build-apps/develop-your-app/extensions/backend-extensions/apis/web-methods/about-web-method-extensions) to [HTTP endpoints](fallback::https://dev.wix.com/docs/wix-cli/guides/development/http-endpoints/about-http-endpoints). The main changes involve updating your file structure and syntax.

## Step 1 | Relocate your web method files

Your web method files are located at `src/backend/<yourWebMethod>.web.ts`. 

In your CLI project, create a new file in the `src/pages/api/` directory with the name `<yourWebMethod>.ts`. 

## Step 2 | Replace the import statement

Replace the `@wix/web-methods` import statement with the `APIRoute` type.

For example, the web method file uses this import:

```ts
import { webMethod, Permissions } from '@wix/web-methods';
```

HTTP endpoints use the following import:

```ts
import type { APIRoute } from 'astro';
```

## Step 3 | Replace web method exports

1. Replace each `webMethod()` export with an HTTP method handler.
2. Each handler receives a request object. Read arguments from the `request` object. For example, extract values from the query string for `GET` requests, or from the request body for `POST` requests.
3. Implement the relevant logic and return a `Response` object with the result.

For example, the web method file exports the following:

```ts
import { webMethod, Permissions } from '@wix/web-methods';

export const multiply = webMethod(
  Permissions.Anyone,
  (a: number, b: number) => a * b,
);
```

The corresponding HTTP endpoint exports the following:

```ts
import type { APIRoute } from 'astro';

export const POST: APIRoute = async ({ request }) => {
  const { a, b } = await request.json();
  return new Response(JSON.stringify({ result: a * b }));
};
```

## Step 4 | (Optional) Manage permissions

Web methods specify [permissions](fallback::https://dev.wix.com/docs/build-apps/develop-your-app/extensions/backend-extensions/apis/web-methods/about-web-method-extensions#web-method-permissions) using the `Permissions` enum from `@wix/web-methods`. To restrict access in an HTTP endpoint, use [Get Token Info](portalId::b85dea5b-341b-493b-b99e-4d4ca12baaa2resourceId::d42cd8da-42cc-42c3-bb82-6b3fa21fc836slug::auth#gettokeninfo*fallback::https://dev.wix.com/docs/sdk/core-modules/essentials/auth#gettokeninfo) to read the caller's token and inspect its `subjectType`.

> **Note:** 
> To enforce permissions, use [`httpClient.fetchWithAuth()`](portalId::b85dea5b-341b-493b-b99e-4d4ca12baaa2resourceId::d42cd8da-42cc-42c3-bb82-6b3fa21fc836slug::http-client#fetchwithauth*fallback::https://dev.wix.com/docs/sdk/core-modules/essentials/http-client#fetchwithauth) when [calling from your frontend](fallback::#step-5--replace-web-method-imports-in-your-frontend). This passes your access token in the request to your HTTP endpoint. Without this, Get Token Info won't have a token to inspect.  

For example, the following web method limits access to site members:  

```ts
import { webMethod, Permissions } from '@wix/web-methods';

export const multiply = webMethod(
  Permissions.SiteMember,
  (a: number, b: number) => a * b,
);
```

Enforce the same permissions in an HTTP endpoint as follows:

```ts
import type { APIRoute } from 'astro';
import { auth } from '@wix/essentials';

export const POST: APIRoute = async ({ request }) => {
  const tokenInfo = await auth.getTokenInfo();

  // Restrict to site members (same intent as `Permissions.SiteMember` on the web method).
  if (tokenInfo.subjectType !== 'MEMBER') {
    return new Response('Forbidden', { status: 403 });
  }

  // ...handler logic
};
```

## Step 5 | Replace web method imports in your frontend

In your frontend code, replace web method imports with HTTP calls.

For example, the web method is called from the frontend as follows:

```ts
import { multiply } from '<relative-path>/multiply.web';

const result = await multiply(6, 7);
```

Call an HTTP endpoint from the frontend as follows:

```ts
import { httpClient } from '@wix/essentials';

const baseApiUrl = new URL(import.meta.url).origin;
const res = await httpClient.fetchWithAuth(`${baseApiUrl}/api/multiply`, {
  method: 'POST',
  body: JSON.stringify({ a: 6, b: 7 }),
});
const { result } = await res.json();
```

## Full example

The following is a full example of migrating web methods to HTTP endpoints on the backend and frontend.

### Backend

This example shows the backend implementation of a web method located in the `src/backend/` directory:

```ts
import { webMethod, Permissions } from '@wix/web-methods';

export const multiply = webMethod(
  // Restrict to site members
  Permissions.SiteMember,
  (a: number, b: number) => a * b,
);
```

The equivalent HTTP endpoint is located in the `src/pages/api/` directory:

```ts
import type { APIRoute } from 'astro';
import { auth } from '@wix/essentials';

export const POST: APIRoute = async ({ request }) => {
  const tokenInfo = await auth.getTokenInfo();

  // Restrict to site members (same intent as `Permissions.SiteMember` on the web method).
  if (tokenInfo.subjectType !== 'MEMBER') {
    return new Response('Forbidden', { status: 403 });
  }

  const { a, b } = await request.json();
  return new Response(JSON.stringify({ result: a * b }));
};
```

### Frontend

This example shows a web method called from the frontend:

```ts
import { multiply } from '<relative-path>/multiply.web';

const result = await multiply(6, 7);
```

The equivalent HTTP endpoint is called from the frontend as follows:

```ts
import { httpClient } from '@wix/essentials';

const baseApiUrl = new URL(import.meta.url).origin;
const res = await httpClient.fetchWithAuth(`${baseApiUrl}/api/multiply`, {
  method: 'POST',
  body: JSON.stringify({ a: 6, b: 7 }),
});
const { result } = await res.json();
```

## See also

- [About HTTP endpoints](fallback::https://dev.wix.com/docs/wix-cli/guides/development/http-endpoints/about-http-endpoints)
- [About web method extensions](fallback::https://dev.wix.com/docs/build-apps/develop-your-app/extensions/backend-extensions/apis/web-methods/about-web-method-extensions)