Getting Started with Xano

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.

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.

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.

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.

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.

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.

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.

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).

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.

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.

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.

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."

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.

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.

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.

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.

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.

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.