Setting Up a Backend

What is a Backend?

In contrast with a website’s frontend, where visitors see and interact with the page, the backend is the part of the website that visitors have no direct interaction with. The backend is where data, like account information, progress in a video game, or items in a shopping cart, are stored in a database. It’s also where code listens for requests from the frontend, and sends back responses when necessary. This code is often referred to as server-side code, and is necessary to have a deeper engagement with users.

You may already be aware of the way Wix has simplified data storage with database collections. Wix also has a unique way of allowing users to write server-side code straight from the editor. This is done by creating backend files called web modules. Web modules are files where we can write server-side code like functions and there are even ways of setting permissions for who can call these functions. This setup makes it easy to use the backend code in the frontend!

Setting up a Backend

Creating a web module in the backend is done by turning on Dev Mode, and clicking Add a new Web Module from the site structure sidebar.

A file named aModule.jsw will be created. The .jsw extension is exclusive to Wix, and you can think of it as a standard JavaScript file for writing backend code. The new web module contains some example code to work with, a simple function that multiplies two numbers.

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

The export syntax may be familiar if you’ve used standard JavaScript modules in the past. By using export you 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, an import statement is needed. import allows the multiply() function from the aModule.jsw file to be called.

import { multiply } from 'backend/aModule';

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

$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.
• The multiply() function takes 2 arguments, 4 and 5.
• 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 of product.
• Since $w('#text1') needs to be a string, .toString() is used to change it from a number to a string.

After calling multiply() in the frontend, you can see the #text1 element changes to a 20 when previewing the site.

While our current multiply() 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 approved npm packages to gain access to popular libraries of useful JavaScript code.
• Make requests to third party API’s without exposing your API key. You’ll learn more about this in an upcoming material.
• Adhere to separation of concerns principles. 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 .jsw file, 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!