Step-by-step guide to getting started quickly in Xano
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:
Step 1: Complete Onboarding
When you create an account with Xano, you're taken through the onboarding 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. 💪
Help us personalize your Xano experience After you create an account and your Instance, your next step should be to create a Workspace. On the first page of Jumpstart, we'll ask you a bit about yourself so we can tailor the Xano experience to you. This will help us recommend some tutorials for you in the product.
Use the dropdowns and select Get Started.
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.
Give your Workspace a name and let us know a couple more pieces of information.
Your Database and API Next, you can enter the name of the database tables in your app - you can have as many as you want. You can always do this later if you're not sure. We recommend having a user table, but your app doesn't have to. There is the option to add CRUD endpoints for each table which are APIs that allow you to Create, Read, Update, and Delete records from your Database. We auto-check this for you because we recommend it for getting started.
Name your database tables and continue.
What features will your app support? Xano can connect to any external service via API. We have a few prebuilt connections. We recommend skipping this step for now in the spirit of getting started quickly. You can always add these laters from the Marketplace.
Skip for now.
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 Email option to get started quickly.
When selecting Email, we will also auto-generate authentication API endpoints for you, which can be used for quickly creating sign-up and log-in workflows.
Select Email and click Review.
Review Review gives you a chance to review the onboarding settings and go back to make any edits. You can always reset a workspace later on or easily make changes in the product. Once you're ready select Create Workspace to complete the onboarding wizard.
Select Create Workspace.
Step 2: Create a Database Table
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.
Add a Database Table
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.
Add a new database 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).
Name the datbase table and select Add Table.
Add Columns
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.
Hit the + button, choose a field type, and name the column.
Add Records
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.
Add records to the table.
Step 3: Create an API Endpoint
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.
Entern an existing API group or select Add API Group and add one.
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.
Click Add API Endpoint.
Then select Start From Scratch and give it a name that doesn't already exist like "my_first_api."
Create a new API endpoint.
Add a Function to the Function Stack
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.
Add a function to the function stack.
Step 4: Test and Publish an API Endpoint
Use Run & Debug to Test the API Endpoint
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.
Use Run & Debug to test your API endpoint.
Publish the API Endpoint
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.
Draft mode.
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.
Publish an API endpoint.
Step 5: Connect an API to Your Front-end
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.
API Endpoint URL
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.
Call your API in your browser.
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.
Connecting Xano to a Front-end
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.