Velo Web Modules: Calling Backend Code from the Frontend

Visit the Velo by Wix website to onboard and continue learning.

Introduction to Web Modules

Web modules are exclusive to Velo and enable you to write functions that run server-side in the backend, and easily call them in your client-side code. With web modules you can import functions from the backend into files or scripts in page code or public files, knowing they will run server-side in the backend. Velo handles all the client-server communication required to enable this access. See the advanced tip below if you want to know how this communication is handled.

Advanced: How Web Modules Work - Behind the Scenes

Hello World Example

The following example shows how you can call a backend function in your client-side code:

1import { rotatingGreeting } from 'backend/helloModule';
2
3$w.onReady(function () {
4  let callCount = 0;
5
6  $w('#button').onClick(async () => {
7      $w('#responseText').text = await rotatingGreeting(callCount++);
8      $w('#responseText').show();
9  });
10});

And here is the above code in action:

You can experiment with this example for yourself on our Hello Web Modules example page.

When to Use Web Modules

Web module functions contain code you would typically want or need to run in the backend. Your code may have security risks if it runs in the frontend, or you may want to access other web services. For example, let's say you want to enable your site visitor to send an email via a 3rd-party provider. You would store your API key to the 3rd-party service in the Secrets Manager, and write your function that sends the email in the backend, like this:

1// Filename: backend/sendEmail.jsw  (web modules need to have a *.jsw* extension)
2
3import {getSecret} from 'wix-secrets-backend';
4import {fetch} from 'wix-fetch';  
5// wix-fetch is the API we provide to make https calls in the backend
6
7const API_KEY = await getSecret(<SECRET_NAME>);
8
9export function sendEmail (address, subject, body) {
10 return fetch("https://a-backend-service-that-sends-email.com/send?APIKey=" + API_KEY, {
11             method: 'post',
12             body: JSON.stringify({address, subject, body})
13 }).then(function(response) {
14  if (response.status >= 200 && response.status < 300)
15   return response.text();
16  else
17   throw new Error(response.statusText);
18 });
19};

You need this code to run in the backend for two reasons:

It includes your sensitive information, such as a reference to your API key to the 3rd-party service. You don't want to expose this to the client.
You are calling a 3rd-party web service, which you can only do in the backend because of cross-origin resource sharing (CORS).

You would then import the function from your web module into your frontend file and use it:

1import {sendEmail} from 'backend/sendEmail.jsw';
2
3export function sendButton_onClick(event) {
4 sendEmail(
5         $w("#addressInput").value,
6         $w("#subjectInput").value,
7         $w("#bodyInput").value)
8         .then(function() {
9            console.log("email was sent");
10        }
11     );
12}

Using Web Module Functions in Backend

You can import a web module function into another module in the backend.

Calling a Function in a Web Module

Unlike regular modules that allow you to export functions, objects, and other items, you can only export functions from web modules. Web modules also always return a promise. This is true even if, in the implementation of the function, it returns a value. For example, if your web module function returns a value, like this:

1// Filename: aModule.jsw (web modules need to have a *.jsw* extension)
2export function multiply(factor1, factor2) {
3    return factor1 * factor2;
4}

When you call the function, it still returns a promise that resolves to the value. So you need to use it like this:

1import {multiply} from 'backend/aModule';
2multiply(4,5).then(function(product) {
3    console.log(product);
4      // Logs: 20
5});

Debugging Web Modules

You can log messages to the console in web modules and they will be displayed in the client's console log, even though the code is running in the backend.

Web Module Permissions

Because Web Modules allow you to call your backend code from the frontend, it's important that you limit which visitors can access their functionality by setting their permissions. See About Web Module Permissions to learn more.