About the Web Methods API

The Web Methods API allows you to define a method in your backend code that you can call from your frontend code. You can also define the permissions required to call the method.

Where you define your web methods, depends on the framework you are using:

• When developing sites or building apps with Blocks, define your web methods in a backend file with the .web.js extension.
• When building apps with the Wix CLI, define your web methods in a web method extension.

When building apps with the Wix CLI, web methods provide several advantages over using http functions to call your app's backend.

Additionally, you can cache the return values of these methods. Caching enables you to temporarily store the return values of your web methods on Wix's infrastructure for a specified period of time. By implementing caching, you can reduce response times, decrease server load, and enhance the overall user experience by providing faster access to your site's data. Learn more about web method caching.

Setup

To use the Web Methods API, install the @wix/web-methods package:

Install the package

To install the package, follow the instructions below based on your development environment.

Wix sites and Blocks apps

When developing with:

• Editor or Wix IDE: Use the package manager.
• Local IDE: Use the Wix CLI. Run the following command:

wix install @wix/web-methods

Wix apps

When developing CLI apps, run the following command:

npm install @wix/web-methods

or

yarn add @wix/web-methods

Import

Import the webMethod utility and Permissions enum from @wix/web-methods:

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

The Permissions enum is used to define the permissions needed to call the method in frontend code. See the webMethod() documentation for more details.

Using web methods

Web methods are defined in your backend code using the webMethod() wrapper method, then imported into and called from your frontend code.

Web methods must be defined in a file:

• With a .web.js extension when developing sites or apps in Blocks.
• With a .web.ts extension when developing apps using the CLI.

Site example

Backend code

import { webMethod, Permissions } from "@wix/web-methods";

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

Frontend code

Import the web method, then call it. For example:

import { multiply } from "backend/my-web-method-file.web";

const result = await multiply(6, 7);

Apps example

Backend code

import { webMethod, Permissions } from "@wix/web-methods";

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

Frontend code

Import the web method, then call it. For example:

import { multiply } from "<relative-path>/my-web-method-file.web";

const result = await multiply(6, 7);