> 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: About Web Modules

## Article: About Web Modules

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

## Article Content:

# About Web Modules

Web modules are backend files that allow you to write backend functions that you can easily [call from the frontend](https://dev.wix.com/docs/develop-websites-sdk/code-your-site/build-a-custom-backend/web-modules/call-backend-code-from-the-frontend.md).

Use web modules for calling backend code from the frontend:

- To protect code that may expose sensitive data, or business logic, if it runs in the frontend.
- To centralize and contain business logic such as 3rd-party API calls and database querying.
- To avoid [cross-origin resource sharing (CORS)](http://en.wikipedia.org/wiki/Cross-origin_resource_sharing) restrictions that can occur when calling 3rd-party APIs from the frontend.

You can't use web modules to export primitive values or objects that you want to import on the frontend.

## Supported IDEs

You can create web modules using:

- The Code sidebar in the editor (Wix Studio and Wix Editor)
- The Wix IDE (Wix Studio)
- Your local IDE (Wix Studio and Wix Editor).

## Web methods

To expose a function in a web module so that you can call it from the frontend, you need to wrap it in a web method. Web methods provide the mechanism that allows you to call your function asynchronously from the frontend and adds a [permissions](#permissions) check on the caller of your function.

Here is what a web method looks like when defined in the backend and called from the frontend:

```js
// In a file with the .web.js extension

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

export const myBackendFunction = webMethod(Permissions.Anyone, () => {
  // Function logic
});
```

```js
// In frontend code

import { myBackendFunction } from "backend/someFile.web";

// ...

const fromBackend = await myBackendFunction();
```

<details>
<summary>Advanced: How web methods work</summary>

When you import a web method on the frontend, you get a proxy function to the web method. This proxy uses an XMLHttpRequest to invoke the function in the backend. The runtime listens to those invocations and calls the appropriate function.

The arguments and return value are serialized and deserialized using JSON.

</details>

View a demo:

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

## Permissions

Because web modules expose a site's backend functionality, it's important to restrict who can call web methods from the frontend. Do this by setting the permissions for each web method to be as restrictive as possible.

It's especially important to set restrictive permissions when:

- Passing sensitive data from the backend to the frontend.
- Exporting functions that require [`elevation`](https://dev.wix.com/docs/develop-websites-sdk/code-your-site/authorization/about-elevation.md).

The permissions options are:

- **Anyone:** The function can be called from the frontend on behalf of any site visitor.
- **Site Member:** The function can be called from the frontend on behalf of logged-in site members.
- **Admin:** The function can be called from the frontend on behalf of logged-in site owners and collaborators.

<!-- ### Caching with web modules
Using the `webMethod()` function, you can also cache the return values of your backend function calls. Caching allows you to temporarily store the data returned from the function call so it's retrieved faster upon subsequent requests. Learn more about [function caching in the backend](https://dev.wix.com/docs/develop-websites-sdk/code-your-site/best-practices/caching/about-backend-caching.md). -->

## Debugging web modules

You can debug the code in web modules as you would [debug any backend code](https://dev.wix.com/docs/develop-websites-sdk/test-your-site/debug-your-code/about-debugging-your-code.md). Additionally, you can use `console.log()` in your web methods and the logs will appear in the Developer Console when previewing the site. For security reasons, the logs won't appear in your browser's console when previewing or on your published site.

## Deprecated `.jsw` web modules

Web modules were originally created using `.jsw` files. This method for creating web modules is now deprecated. However, existing `.jsw` web modules continue to work as expected.

## See also

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