About Web Modules

Web modules are backend files that allow you to write backend functions that you can easily call from the frontend.

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) 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. Web methods provide the mechanism that allows your function to be called asynchronously from the frontend and adds a 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:

Copy
Copy
Advanced: How web methods work

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.

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.

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.

Debugging web modules

You can debug the code in web modules as you would debug any backend code. 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 will continue to work as expected.

See also

Call backend code from the frontend

Was this helpful?
Yes
No