export function multiply(factor1, factor2) {  return factor1 * factor2;}
Copy to clipboard

export function multiply(factor1, factor2) {  return factor1 * factor2;}

Theexportsyntax may be familiar if you’ve used standard JavaScript modules in the past. By usingexportyou allow the function to be called in your frontend code. But unlike standard JavaScript modules, web modules can only export functions that return promises.

Putting It All Together

To call the function from the frontend, animportstatement is needed.importallows themultiply()function from theaModule.jswfile to be called.

import { multiply } from 'backend/aModule';
Copy to clipboard

import { multiply } from 'backend/aModule';

With the function imported, now themultiply()can be called from the frontend!

$w.onReady(function () {  multiply(4,5)    .then(product => {      $w('#text1').text = product.toString();		    })    .catch(error => {      console.log(error);    });});
Copy to clipboard

$w.onReady(function () {  multiply(4,5)    .then(product => {      $w('#text1').text = product.toString();		    })    .catch(error => {      console.log(error);    });});

Let’s break down the code:

• .onReady()sets the function that runs when all the page elements have finished loading.
• Themultiply()function takes 2 arguments,4and5.
• It then multiplies the arguments together, and returns a promise,product, if successful, or logs an error to the console if unsuccessful.
• The$w('#text1')element is then set to display the value ofproduct.
• Since$w('#text1')needs to be astring,.toString()is used to change it from anumberto astring.

Wix backend calling the multiply function

After callingmultiply()in the frontend, you can see the#text1element changes to a 20 when previewing the site.

While our currentmultiply()function is pretty simple, we can use the backend to handle more complex tasks. Imagine using a function that has sensitive user account information, that you don’t want exposed, or how about a website with thousands of functions in one file! Storing functions in the backend will hide the sensitive information, and enable you to keep your code clean and easy to manage.

Advanced Features

Wix’s web modules make working with the backend easy for beginners, but powerful enough for users with more experience. You can:

• Install approvednpmpackages to gain access to popular libraries of useful JavaScript code.
• Make requests to third partyAPI’swithout exposing yourAPI key. You’ll learn more about this in an upcoming material.
• Adhere toseparation of concernsprinciples. In short, maintaining and troubleshooting code is easier when it’s organized.

Recap

Congratulations, you now know how to set up a backend! You’ve learned how to create a.jswfile, export a function, import it into the code editor, and use it in your frontend code. Create some more web modules to put your new knowledge of the Wix backend to work!

'The Codecademy Team, composed of experienced educators and tech experts, is dedicated to making tech skills accessible to all. We empower learners worldwide with expert-reviewed content that develops and enhances the technical skills needed to advance and succeed in their careers.'