How to Integrate Xano into Your Website and Create an App

Introduction

Xano is a powerful no-code backend-as-a-service platform that allows you to quickly build robust APIs, manage databases, and handle user authentication, all without writing server-side code. With Xano, you can focus on the frontend of your website or app while relying on the platform for the backend services. In this guide, we’ll walk you through the process of integrating Xano into your website and creating an app using Xano’s no-code backend.‍

What You Will Need:

• A Xano account (sign up for free at Xano).
• A Webflow or custom website (for front-end integration).
• (Optional) A frontend framework for creating the app, such as React or Vue.js.

Step 1: Create a Xano Account

Go to Xano and sign up for a free account if you haven’t already.

Step 2: Personalize your Xano Experience

The next step should be to create a workspace after creating your instance and account. In order to customize the Xano experience for you, they will ask you a few personal questions on the first page.  This will enable them to present you with the appropriate content throughout your Xano experience.

‍

Step 3: Set up your workspace

Next you have to name your Workspace, choose the option from the dropdown (What do you plan to connect with Xano).
Xano can connect to anything with an API, for exampleit can be front-end, a visualization tool, or another API service.
If you choose Front-end, they will ask you what front-end you plan to use, then just choose your front-end choice.

‍

How will your users log in?

Authentication is what enables users to register and access your app. By default, Xano provides authentication through email, utilizing JWE tokens for security. Additionally, you can integrate social sign-in options like Google and Facebook via OAuth, which can be set up later in the Marketplace. For simplicity, it's recommended to check the option "Set up user authentication for me" to get things started quickly.

Step 4: Create a Database Table

Creating a well-structured and optimized database is crucial for ensuring your app performs efficiently. A properly designed database helps manage data storage and retrieval in a way that minimizes latency and prevents bottlenecks, especially as your app scales. Consider indexing important columns, normalizing your data to reduce redundancy, and using appropriate data types for each field. This not only improves the speed of queries but also ensures that your app runs smoothly, even under heavy user load. Performance optimization at the database level plays a vital role in delivering a seamless user experience.

More about how to create database you can read in Xano Documentation

Step 5: Create an API Endpoint

The API acts as the bridge between your Xano backend and your front-end, enabling them to communicate. While Xano automatically creates basic CRUD (Create, Read, Update, Delete) API endpoints, its API functionality goes far beyond just these operations, offering endless possibilities for customization and complex integrations.

First, you must click on left Navigation Bar API button

A few default endpoints will be available for you to use for user information retrieval and authentication.

‍

You can click the "Add API Endpoint" button in the upper right corner to create a custom endpoint that suits your needs and can be customized however you like.

‍

‍

Now you can choose how you want to design your API Endpoint, based on what kind of operation you want to perform

‍

Step 6: Test and Publish an API Endpint

It's really important that you test each of your endpoints, so you can see if you have any kind of errors or bugs, so you can prevent later problems.

Use Run & Debug to test the API Endpoint

What you need to do to Run & Debug your API Endpoint?
First click on specific API Endpoint you want to test, then in top right cornet you have "Run & Debug" Button, after you click on it you will get the next window:

As you can see You can view the response and verify that everything functions as it should if you add the values to the properties and click Run:
‍

‍

Now, it's time to publish the API endpoint. When you added the function, you might have noticed a banner appeared, along with revertible changes and a publish button. This happens because the API endpoint enters draft mode, giving you the flexibility to make changes and publish updates without impacting the live version of your app.

‍

‍

Step 7: Connect an API to Your Front-end

Now it's time to link your API to the front-end. The API serves as the bridge, connecting your backend to the front-end.

API Endpoint URL
Every API endpoint is assigned a unique URL, which is used to make API calls. For instance, your browser acts as a front-end, so you can copy the API endpoint URL and paste it into a new tab to view the response from the API.

I'll walk you through connecting your API to both Webflow and Vanila JS.

‍

How to use Xano API in you custom code solution with JS

To retrieve data and display it in your app, you need to send a request to the specific API Endpoint. The API URL, which you will use as your base URL, will be supplied by Xano. Depending on the information and actions you want to perform, you will specify the endpoint.

‍

If you hover over the icon you will find out what isthe API Url

‍

Code example how you can perrform an API request and use your backend:

const BASE_URL = 'https://your-api-endpoint.com'; // Replace with your actual API URL

// Function to GET and display products from the database
function getProducts() {
    fetch(`${BASE_URL}/products`)
        .then(response => response.json())
        .then(data => {
            const productList = document.getElementById('product-list');
            productList.innerHTML = ''; // Clear the product list before adding new items
            data.forEach(product => {
                const productDiv = document.createElement('div');
                productDiv.innerHTML = `
                    
${product.name}
                    
${product.category}
                `;
                productList.appendChild(productDiv);
            });
        })
        .catch(error => console.error('Error fetching products:', error));
}

// Function to POST new product data to the database
function submitProduct(event) {
    event.preventDefault();
    
    // Get product data from form inputs (replace with your actual input IDs)
    const productName = document.getElementById('productName').value;
    const productCategory = document.getElementById('productCategory').value;

    // Construct the product object to be sent in the request body
    const newProduct = {
        name: productName,
        category: productCategory
    };

    // POST request to add the product to the database
    fetch(`${BASE_URL}/products`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json' // Specify that we're sending JSON data
        },
        body: JSON.stringify(newProduct) // Convert the product object to a JSON string
    })
    .then(response => {
        if (response.ok) {
            return response.json();
        } else {
            throw new Error('Failed to add product');
        }
    })
    .then(data => {
        console.log('Product added:', data);
        // Optionally update the UI to show the newly added product
        const productDiv = document.createElement('div');
        productDiv.innerHTML = `
            
${data.name}
            
${data.category}
        `;
        document.getElementById('product-list').appendChild(productDiv);
    })
    .catch(error => console.error('Error adding product:', error));
}

// Call the getProducts function to load products when the page loads
getProducts();

    

‍

How to use Xano API in you Webflow solution

If you want to use Xano backend in your webflow you can do it in a couple of ways, I will show a few of them.

How you can connect Xano and Webflow:

1. Using Embed Code in your Webflow
2. Using Wized
3. Using Webflow Connector
   ‍

Using Embed Code to connect webflow and Xano

Adding custom code to your page, where you write a few lines of code, is what you do if you want to use embedding code. The code above can be used to display the data you receive from the backend if you wish to do so; however, it should be modified according to your api parameters, classes, ids, and other factors.

Also you can do whatever operation you want you just have to write code that will performe specific operation, based on your needs;

• Get the data
• Submit form data and insert a new record in your database
• Delete data from database
• Update data
  ‍

Add Embed code element

Then add your custom code:

‍

What is the Webflow Connector?

‍
The Webflow Connector is a powerful tool that allows you to effortlessly integrate your Xano and Webflow accounts. With this integration, you can easily make requests to Webflow’s APIs, streamlining the development process between your frontend and backend like never before.

‍

Step-by-Step Guide: Connecting Xano and Webflow
Follow these straightforward steps to set up the Webflow Connector:

1. Go to Account Settings: In your Xano account, navigate to the Account Settings page.
   ‍
2. Connect to Webflow: Look for the "Connect with Webflow" button and click on it.
   ‍
3. Authorize the Connection: A pop-up will prompt you to authorize the connection between Xano and Webflow. Choose the workspaces and sites you want to link, then click "Authorize."
   ‍
4. Open the Connect Center: After successful authorization, you'll be taken to the new Connect Center. Select "Connect" from the left-hand menu.
   ‍
5. Enable the Webflow Connection: Inside the Connect Center, you'll see your Webflow connection listed as "Inactive." Simply click the "Enable" button to activate the integration between Xano and Webflow.

That’s it! You've now connected your Xano and Webflow accounts, unlocking new potential for seamless interaction between the two platforms.

Simplifying Webflow API Integration
The Webflow Connector makes working with Webflow APIs a breeze:

1. Create a New API Endpoint: In Xano, create a new API endpoint and name it (e.g., "Webflow").
   ‍
2. Add a Webflow Function: Click the "+" sign to add a function to your stack. You’ll see a new "Webflow" category.
   ‍
3. Import Webflow API Requests: Go to Webflow’s documentation, find the API endpoint you want to use, and copy the cURL command. In Xano, click "Import cURL," paste the command, and press "Import."
   ‍
4. Run the API Request: Once you've imported the API request, hit "Save" and "Run" to see the response in real time.

With this integration, working with Webflow APIs is easier and faster, making your development process more efficient.

‍

Conclusion

Integrating Xano into your website or app allows you to manage the backend without needing to write server-side code. Whether you are building a static website with Webflow or a dynamic app with React, Xano provides a powerful, scalable backend solution. By following the steps above, you can easily connect your frontend to Xano’s no-code API, manage users, and create a seamless experience for your users.

If you need further guidance, feel free to explore Xano’s documentation!