React Studio + Xano No-code Backend Builder = ❤️
We have some news that all you app builders are going to LOVE!
We’ve just launched a new integration with Xano, the no-code backend that lets you have a complete backend for your project within minutes.
Some highlights of this integration:
- Connect your React Studio project to a robust backend in just a few clicks.
- Create robust apps with login screens linked to a powerful backend that is ready to scale when you need it.
- File upload plugin lets you easily and safely upload files from your React app to your Xano backend.
- You’re in control. Easily spin up a fully hosted backend with server-side business logic, and a true “no code” experience.
- React Studio generates high quality source code from your designs. You can always edit an exported project manually without breaking anything. Plugins let you build a code library that can be assembled visually.
The essentials of Xano:
1. Lightning-fast development speed
2. Creates basic API endpoints automatically
3. Create business logic rules without code
4. Integrated with React Studio
So how does it work?
Open the React Studio app, create a new project and head to the Data tab.
You’ll see the Connect to Xano button. Click it and sign up for Xano. Their free plan lets you explore all the features. (Of course if you already have an Xano account, then simply login to your account.)
After signup, a sample backend was created for you. You can find it in the Xano dashboard at app.xano.com.
Now comes the part of linking your Xano backend with this React Studio project. This happens through the “Connect to Xano” window, as shown below.
To keep track of your backend projects and their access levels, Xano uses the terms “instance”, “workspace” and “API group”. Don’t worry if these seem unfamiliar at this point — just select the defaults.
Here you can also select some tables that you want to access in your app. The example backend project created for you contains the tables “restaurants” and “user”. (See screenshot above.)
Put a checkmark next to them, and click Ok.
The tables from Xano are reflected in React Studio as data sheets:
Red arrows in the above screenshot show how these generated data sheets are automatically linked with the Xano backend. For example, the “restaurants” sheet is linked to a Xano API endpoint called “/restaurants”.
Xano’s automatically generated API endpoints are powerful, as they support all standard database operations (Create / Read / Update / Delete, a.k.a. CRUD).
Custom endpoints
Accessing an entire table from the back-end is awfully convenient to set up, but often you need to get more specific about what data is accessed and how. Xano and React Studio play well together to let you define these fine-grained endpoints.
You can make a new data sheet in React Studio and link it with a Xano endpoint very easily. Click “Add Sheet”, then activate the Xano plugin for this new sheet (it’s under the heading “Live Data from Web Service”; you can see the setting in the above screenshot).
In the textbox titled “API endpoint”, you can enter a string that matches a custom endpoint in your Xano backend, like this:
Note that this endpoint string can be dynamic! In other words, the path used to access this data can change while your app is running, depending on data within your app. (Imagine a user selects an item, and then you want to load some further data about that item. That’s a very common use for this kind of dynamic API endpoint string.)
React Studio offers “data slots” for storing and accessing this kind of dynamic data. The current value of a data slot is “injected” into your API endpoint string. And presto — whenever the data slot value changes, the data for this endpoint will automatically get reloaded if needed. The above screenshot shows this in action with an endpoint string composed of “restaurants/” followed by the value of a data slot. (As you might guess, this setting fills out the sheet with the data for a specific restaurant.)
One thing to keep in mind when designing your Xano endpoints. To make the data easy to access in React Studio, the output JSON should be “shallow” (no nested arrays etc.). React Studio’s data sheets are not yet friends with the deeply nested JSON data but we’ll look into this matter in the near future.
Designing your backend in Xano is easy and fun once you know the essentials about keeping it Studio-friendly. We have a video series to help you get off the ground. Check out this “Getting started” episode:
Can I add Login and signup screens to your app?
Yes! However, at the moment React Studio’s Login Gate screen supports just only one of the signup options (regular email signup) offered by the Xano backend. We’ll dive into other authentication options in the near future.
Can I upload files to Xano with app build with React Studio?
Yes you can!
Just use the Xano Upload plugin. Check out this video:
Questions and feedback
Any questions about the Xano integration? Head to our forum at https://discuss.reactstudio.com/
We’d love to hear from you on how to make this backend magic as easy as possible to use for your projects.
Downloads and links
Download React Studio for free: www.reactstudio.com
(Only for macOS)
Xano, the state-of-the-art no-code backend, is at: www.xano.com
