> 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/articles/coding-with-velo/backend-code/web-modules/about-web-modules.md

## Article Content:

# About Web Modules

Web modules are backend files with a `.web.js` extension. They allow you to write backend functions that you can easily [call from the frontend](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/backend-code/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. 
  
Web modules cannot be used to export primitive values or objects that you want to import on the frontend.

You can create web modules using:

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

## Web methods

To expose a function within a web module so that it can be called from the frontend, you need to wrap it in a [web method](https://dev.wix.com/docs/velo/apis/wix-web-module/introduction.md). Web methods provide the mechanism that allows your function to be called 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-module";

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

```js
// In frontend code

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

// ...

const fromBackend = await myFunction();
```

<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 your 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 is 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/velo/apis/wix-auth/elevate.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 is retrieved faster upon subsequent requests. Learn more about [function caching in the backend](https://dev.wix.com/docs/develop-websites/articles/best-practices/caching/about-web-method-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/articles/workspace-tools/testing-monitoring/testing-troubleshooting/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 your site. For security reasons, the logs will not 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](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/backend-code/web-modules/call-backend-code-from-a-jsw-web-module.md) will continue to work as expected.

## See also

[Call backend code from the frontend](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/backend-code/web-modules/call-backend-code-from-the-frontend.md)