Migrate from Web Methods to HTTP Endpoints

This guide explains how to migrate web methods to HTTP endpoints in your new Wix CLI project, as part of migrating an app from the legacy Wix CLI. The main changes involve updating your file structure and syntax.

Step 1 | Relocate your web method files

In your legacy project, your web method files are located at src/backend/<yourWebMethod>.web.ts.

In your new Wix 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:

HTTP endpoints use the following import:

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:

The corresponding HTTP endpoint exports the following:

Step 4 | (Optional) Manage permissions

Web methods specify permissions using the Permissions enum from @wix/web-methods. To restrict access in an HTTP endpoint, use Get Token Info to read the caller's token and inspect its subjectType.

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

Enforce the same permissions in an HTTP endpoint as follows:

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:

Call an HTTP endpoint from the frontend as follows:

Full example

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

Backend example

This example shows the backend implementation of a web method in your legacy project's src/backend/ directory:

The equivalent HTTP endpoint is in your new Wix CLI project's src/pages/api/ directory:

Frontend example

This example shows a web method called from the frontend:

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