> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: Introduction

## Article: Introduction

## Article Link: https://dev.wix.com/docs/sdk/core-modules/web-methods/introduction.md

## Article Content:

# About the Web Methods API

> **Note:** This API is not intended for use in [self-hosted apps](https://dev.wix.com/docs/sdk/articles/get-started/about-self-hosted-apps.md), or when building [headless sites and apps](https://dev.wix.com/docs/go-headless.md).

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](https://dev.wix.com/docs/develop-websites.md) or [building apps with Blocks](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/about-wix-blocks.md), define your web methods in a backend file with the `.web.js` extension.
- When [building apps with the Wix CLI](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-cli/about-the-wix-cli-for-apps.md), define your web methods in a [web method extension](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/backend-extensions/apis/web-methods/about-web-method-extensions.md).

When building apps with the Wix CLI, web methods provide several [advantages over using http functions](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/backend-extensions/apis/web-methods/about-web-method-extensions.md) 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](https://dev.wix.com/docs/develop-websites/articles/best-practices/caching/about-web-method-caching.md).

> **Note:** The web method caching feature is currently only supported for developing sites. You cannot cache the results of an app's web methods. 

## Setup

@package_metadata:@wix/web-methods

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

### Install the package

Follow the installation instructions for your development environment. 

| Development environment    | Installation method |
| -------------------------- | ------------------- |
| Wix sites (editor or IDE)  | Use the [package manager](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/packages/work-with-npm-packages-in-the-editor.md). |
| Wix sites (local IDE)      | Run `wix install @wix/web-methods using the [Wix CLI](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/packages/work-with-npm-packages-with-the-wix-cli.md). |
| Blocks apps                | Use the same installation method as Wix sites. |
| CLI apps                   | Run `npm install @wix/web-methods` or `yarn add @wix/web-methods`. |

### Import the package

Import the `webMethod` utility and `Permissions` enum:

```js
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 [`webMethod()`](https://dev.wix.com/docs/sdk/core-modules/web-methods/web-method.md) documentation for more details. 


## Using web methods

Web methods are defined in your backend code using the [`webMethod()`](https://dev.wix.com/docs/sdk/core-modules/web-methods/web-method.md) 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

```javascript
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:

```javascript
import { multiply } from 'backend/my-web-method-file.web';

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

View a demo of how to use web methods in your site code:

`youtube:https://www.youtube.com/watch?v=qRw0atYFY4I&list=PLi3fKZF2b29g5BQJoYV1sK0nrvM1mu3vm&index=4`

### Apps example

#### Backend code

```ts
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:

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

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