> 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: Call Backend Code from the Frontend

## Article: Call Backend Code from the Frontend

## Article Link: https://dev.wix.com/docs/develop-websites-sdk/code-your-site/build-a-custom-backend/web-modules/call-backend-code-from-the-frontend.md

## Article Content:

# Call Backend Code from the Frontend

[Web modules](https://dev.wix.com/docs/develop-websites-sdk/code-your-site/build-a-custom-backend/web-modules/about-web-modules.md) allow you to write backend functions that you can easily call from the frontend. The following describes how to create, export, and call web module functions, also known as web methods.

## Step 1 | Add a web module

The way you add a web module file depends on which IDE you're using.

::::tabs

:::Editor

1. Navigate to **Public & Backend** in the Code sidebar.
2. Hover over the **Backend** heading, click the plus icon ![plus icon](https://wixmp-833713b177cebf373f611808.wixmp.com/images/174671ebdfa1dffd306ef30c4c4d4af5.png), and then select **Add web module**.

This action creates a web module file with a `.web.js` extension.

![Add web module](https://wixmp-833713b177cebf373f611808.wixmp.com/images/721daee653bbb56634e4ca349f8597c0.png)
:::
:::Wix-IDE-or-Local-IDE
Create a new file in the `backend-modules` directory and name it with the `.web.js` extension.

![alt text](https://wixmp-833713b177cebf373f611808.wixmp.com/images/1675cc7cb365bbea2f3d57bd5bf93b2b.png)
:::
::::

## Step 2 | Define a web method in the backend

Add an exported [web method](https://dev.wix.com/docs/develop-websites-sdk/code-your-site/build-a-custom-backend/web-modules/about-web-modules.md#web-methods) in the file you created above. The web method wraps an inner function that contains the logic you want to call from the frontend.

To create a web method, call the [`webMethod()`](https://dev.wix.com/docs/sdk/core-modules/web-methods/web-method.md) function and define the web method's [permissions](https://dev.wix.com/docs/develop-websites-sdk/code-your-site/build-a-custom-backend/web-modules/about-web-modules.md#permissions) and its inner function:

1. Add the necessary imports:

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

2. Call the `webMethod()` function and store its returned value in an exported variable.

   ```js
   export const myBackendFunction = webMethod();
   ```

3. Pass the `webMethod()` function a [permissions](https://dev.wix.com/docs/develop-websites-sdk/code-your-site/build-a-custom-backend/web-modules/about-web-modules.md#permissions) value as the first argument:

   ```js
   export const myBackendFunction = webMethod(Permissions.SiteMember);
   ```

4. Pass the `webMethod()` function an inner function as the second argument:

   ```javascript
   export const myBackendFunction = webMethod(
     Permissions.SiteMember,
     (someParam) => {
       // Some functionality for site members to call from the frontend
       return `You passed me ${someParam}`;
     }
   );
   ```

## Step 3 | Call the function from the frontend

To call a web method from the frontend:

1. Import the exported web method from the web module you created above:

   ```javascript
   import { myBackendFunction } from "backend/myBackendFile.web";
   ```

2. Call the imported function:

   ```js
   const fromBackend = await myBackendFunction(someValue);
   ```

   Remember, web module functions are always asynchronous.

## Complete code example

In this example, when a visitor clicks a button on the frontend, it calls the backend function and displays the returned message in a text element.

### Backend code (`backend/myBackendFile.web.js`)

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

export const myBackendFunction = webMethod(
  Permissions.SiteMember,
  (someParam) => {
    // Some functionality for site members to call from the frontend
    return `You passed me ${someParam}`;
  }
);
```

### Frontend code

```js
import { myBackendFunction } from "backend/myBackendFile.web";

$w.onReady(() => {
  $w("#myButton").onClick(async () => {
    const fromBackend = await myBackendFunction("Hello from frontend");
    $w("#resultText").text = fromBackend;
  });
});
```

## See also

- [About web modules](https://dev.wix.com/docs/develop-websites-sdk/code-your-site/build-a-custom-backend/web-modules/about-web-modules.md)
- [Web methods API reference](https://dev.wix.com/docs/sdk/core-modules/web-methods/introduction.md)