Introduction to Wix Run Editor

Wix Run Editor is a powerful tool that allows developers to create and manage web applications with ease. It offers a plethora of APIs that provide flexibility and control over various aspects of your site. This guide will introduce you to some of the most useful APIs available in the Wix Run Editor, complete with code snippets and a sample application to illustrate their use.

Useful API Examples

1. Wix Storage API

The Wix Storage API allows you to store data locally in the user’s browser.

  import {local} from 'wix-storage';

  // Save data
  local.setItem('key', 'value');

  // Retrieve data
  const data = local.getItem('key');

  // Remove data
  local.removeItem('key');

2. Wix HTTP Functions

Manage HTTP requests and responses with ease using the HTTP functions API.

  import {ok, badRequest} from 'wix-http-functions';

  export function get_sayHello(request) {
    let response = ok({headers: {"Content-Type": "application/json"}});
    response.body = { message: "Hello, world!" };
    return response;
  }

3. Wix Users API

Handle user authentication and user data with the Users API.

  import {currentUser} from 'wix-users';

  if (currentUser.loggedIn) {
    const userId = currentUser.id;
    console.log("Logged in user ID:", userId);
  } else {
    console.log("No user is logged in.");
  }

Sample Application

Now that we have seen some of the APIs in action, let’s put them together to create a simple app that uses local storage, handles an HTTP request, and manages user authentication.

App Example: User Welcome App

This app will store a welcome message locally, handle user authentication, and serve the message via an HTTP endpoint.

Step 1: Storing Welcome Message

  import {local} from 'wix-storage';
  local.setItem('welcomeMessage', 'Welcome to our site!');

Step 2: Authenticating User

  import {currentUser} from 'wix-users';
  
  if (currentUser.loggedIn) {
    console.log("User is logged in:", currentUser.id);
  } else {
    console.log("Please log in to access the welcome message.");
  }

Step 3: Serving the Welcome Message

  import {ok} from 'wix-http-functions';
  import {local} from 'wix-storage';

  export function get_welcome(request) {
    const message = local.getItem('welcomeMessage') || 'Default Welcome Message';
    let response = ok({headers: {"Content-Type": "application/json"}});
    response.body = { message: message };
    return response;
  }

With these steps, you have created a simple Wix application that makes use of some of the powerful features offered by the Wix Run Editor.

Hash: 177507217a94759982a70d19a7d043d050a0cb3c8cdae94fdd469c139e257a4b