Xano: how to implement in Bubble
Xano is a No Code Backend Development Platform. Xano gives you a scalable server, a flexible database, and a No-Code API builder that can transform, filter, and integrate with data from anywhere.
Xano offers the possibility for us to create a backend outside Bubble. This means having part of our app data outside of Bubble.
If there’s a way to build it in Bubble that offers good results, we should build it in Bubble. Xano is powerful but will add complexity to our build.
Similarly, if we decided to use Xano, to reduce complexity we'll store in Xano only the minimum number of tables necessary for our purposes.
To retrieve or send data from our Bubble app to Xano we’ll use API Calls, being those made using the API connector or via a plugin.
A Xano integration can be useful in the following cases (sorted ~ by importance):
- 1.Complex queries: if our app needs complex queries, difficult/impossible to build and/or slow to perform in Bubble
- 2.Transform data: if we need to transform data with complex mathematical operations or other modifications, Xano is faster than Bubble
- 3.Data heavy apps: apps that need to upload external data via csv can do it faster in Xano. If the operation is a one time thing can be done manually, if it happens often, an API call can be set up to perform the operation. Also Xano states that can support importing HUNDREDS OF MILLIONS of records via CSV import
- 4.One unified Backend: if we need a separate unified backend for multiple frontends, i.e.: bubble app + native mobile app + admin dashboard, several apps that use the same database
- 5.External services: if we need to integrate several external services to transform/modify data, that we cannot do in Bubble or it’s too slow in Bubble
- 6.Privacy: having the data in Xano and limiting the number of persons that have access to it, we’ll be able to maintain better privacy
- 7.Co-Development: complex apps need to have two teams, one for backend and one for the frontend that should or want to work separately
There could be another cases when Xano is a good fit. Each case should be carefully studied.
The goal of this article is to provide information and examples on the features and services of Xano along with steps on how to set up the service and implement it in a Bubble application.
- 1.Sign up for a Xano account if you don't already have one. You can do this at https://www.xano.io/signup.
- 2.Once you've signed up, you'll be taken through a wizard called Jumpstart. It asks you to specify a few things about your project and allows Xano to automatically create a backend to get you started. You can find all the documentation in Xano's docs website. Just for your information, you'll need:
- 1.
- 2.
- 3.Next, you'll need to create a database and set up the necessary tables and fields. To do this, click the "Database" tab in the left-hand menu of your Workspace page and then click the "Add Table" button. Give your table a name and add the fields that you want to include. The method is very similar as how you add Datatypes (equivalent to the tables at Xano) and their fields.
When creating a table (datatype), leave the ADD BASIC CRUD ENDPOINTS checkbox checked.
You'll have to set up API Calls in the API connector to connect Bubble with your Xano database endpoints.
Endpoints can be public or private. If private, you'll need to authenticate the call. Authentication is handled using the Authorization HTTP header along with the Bearer token specification.
For example. If you want to store users in Xano, Xano automatically creates the login and signup endpoints, along with a Get endpoint from which you can recuperate info from that particular user.
Your login API call (authorization not required) in Bubble from which you'll retrieve the user authToken:
Then, using the authToken, you can get the user info (authorization required):
Once we have decided that we need to use Xano, we’ll follow these best practices:
Moving data to Xano
We have to decide what data we are going to store there. To reduce complexity we have to store in Xano only the minimum number of tables necessary for our purposes.
Authentication
All tables with sensitive data should be protected with authentication.
You can require authentication for each call. Also, data in tables can be protected with roles, something like Bubble's privacy rules.
As you could see on the first video above, Xano uses the users table to handle authentication. This is the flow:
- 1.Log the user in in Xano (in the screenshot the password is not private because it'll be dynamic and only visible to the user who is authenticating itself)
- 2.You get a token
- 3.Use the token in your calls to authenticate the call and access your endpoints
If you don't store users in Xano:
- 1.In Xano: Create one user with a very complex password, like a token
- 2.In Bubble: authenticate that user sending your generated password (as private) and get a token to use for the current user in next calls. The token expires, so you should have a method to refresh it when needed.
User management
We’ll maintain the user management in Bubble. This means that our app users are going to live in our Bubble database. This will allow us to build easily and keep using the Current User in Bubble.
We can even move some user data to Xano, if that’s necessary, but continue to use Bubble’s User data type.
Privacy rules
To enforce data privacy, the Xano equivalent for Bubble’s Privacy rules is the RBAC (Role-based access control) or role-based permissions: a way to restrict access based on a user's defined role.
To learn how to use this role-based access control, please review the following video: https://docs.xano.com/building-features/role-based-access
You’ll find preconditions in Insert New Entry -> Utility functions -> Preconditions
Xano provides abundant documentation with specific videos for Bubble apps: