Getting Started with Xano
Step-by-step guide to getting started quickly in Xano
Last updated
Step-by-step guide to getting started quickly in Xano
Last updated
This guide provides step-by-step instructions to help you familiarize yourself with the baseline basics in Xano. As you continue in the documentation you will find that Xano is a vast platform with limitless functionality. But first, let's get you started quickly:
After you create an account and your Instance, your next step should be to create a Workspace. On the first page, we'll ask you a bit about yourself so we can tailor the Xano experience to you. This will help us surface the right content to you during your Xano journey.💪
Set up your Workspace Next, name your Workspace. Your Workspace is like a container for your project or app. You can always change the name later.
What front-end will you connect to? Xano can connect to anything with an API. This can be another front-end, a visualization tool, or another API service.
How will your users log in? Authentication is the process that allows your users to sign up and log in to your app. By default, we offer the ability to authenticate via Email (using JWE tokens). We also offer Social Sign-in (OAuth) providers like Google and Facebook. These can be configured later in the Marketplace. We recommend just selecting the "Set up user authentication for me" checkbox.
When selected, we auto-generate authentication API endpoints for you, which can be used for quickly creating sign-up and log-in workflows.
We've created a very easy guided tutorial that will teach you the concepts of a database, how the API interacts with it, and how you can transform data using our No-Code API Builder. We have a comprehensive Onboarding Tutorial reference to help guide you if you get lost.
Next, let's create a database table. You may have created some tables during Step 1, if so, feel free to skip to creating columns.
Navigate to Database on the left navigation bar and select Add Table. You may already have tables that you created during step 1, feel free to select one of those instead of adding a new table.
Give the table a name. Adding basic CRUD endpoints is selected by default. It's not required but we recommend doing this (they can always be added later).
Next, a column, or schema, to the database table. Hit the plus button to open the menu of the different field types. Feel free to start with a basic column or two and continue to build the rest of the table later on.
Add a few records of data to the table. You can do this by simply clicking Add new record or using keyboard shortcuts and typing in values for each cell.
The API is the glue that connects your Xano backend to your front-end. Xano auto-generates basic CRUD API endpoints for you, but the API capabilities are limitless in Xano far beyond basic operations.
First, navigate to API on the left navigation bar.
You may already see an API group named "Default", if not please select Add API Group in the top right corner and add a new API group.
Once inside the API group, you may notice some existing API endpoints. There are likely the autogenerated CRUD endpoints and authentication endpoints that Xano created for you.
To show you the ropes, create a new API endpoint by selecting Add API Endpoint in the top right.
Then select Start From Scratch and give it a name that doesn't already exist like "my_first_api."
The Function Stack is the focal point of your API endpoint. It's where you define the business logic of what you're API endpoint is actually doing. For starters, keep it simple. Click the + button and add Query All Records. Select your newly created table from step 2.
Now that you've added a function from step 3, it's time to test the API you're building. Use Run & Debug in the top right of the screen to test the API endpoint.
Once the right panel opens, select run to get the results of the API endpoint,
If you're following along, your API won't have any inputs yet. However, if your API has inputs, this is when you're able to enter values before running it.
Next, it's time to publish the API endpoint. You'll notice when you added the function to the API endpoint, a banner popped up, revertible changes, and a publish button showed up. This is because the API endpoint went into draft mode, which allows you to edit and publish API endpoints without affecting the live product.
To publish the API endpoint, select the green button that says Publish.
Optionally, add a message to describe your changes (not necessary right now). If you have other drafts, they will also appear now, and you'll have the option to simultaneously publish or opt not to yet.
It's time to connect an API to your front-end. The API is the glue, the connection piece, between your backend and front-end.
Each API Endpoint has a URL, which is used to call the API endpoint. Your browser is a front-end, for example, you can copy your API endpoint URL and paste it in a new tab to see the result of your API endpoint.
While your browser is an example of a front-end, it displays the raw data from the output. Using a front-end framework or no-code tool enables you to organize and present the output in a user-friendly way.
Xano can connect to virtually any front-end via the API.
Here are some common front-ends people connect to and tutorials for how to connect.
Even more front-ends that our users connect to can be found at xano.com/connect along with various tutorials and resources.
Let us know how we can help at support@xano.com or post to us in the community.
