Skip to main content

Create your first task

Create a tasks table, write a task to it from code, and read it back — in JavaScript or Python — in about 10 minutes.

Before you begin​

You need:

  • A TaruviBase app on a Development site. Create one first if needed.
  • For JavaScript: Node.js and npm. For Python: Python 3.10 or newer.

1. Create the tasks table​

In TaruviBase Console, open your app, select Datatables, then Create New Table:

  1. Table Name: tasks
  2. Add a column title with data type Text (VARCHAR) and Required checked.
  3. Add a column done with data type Boolean and Required checked.
  4. Select Create Table.

TaruviBase adds an id column (UUID, primary key) to every table automatically.

2. Copy your connection values​

In your app, open Settings → Connect and select the Environment tab. Copy TARUVI_SITE_URL (your site's HTTPS address) and TARUVI_APP_SLUG (your app's identifier).

A browser app signs users in through TaruviBase's hosted sign-in page, so it needs no API key.

3. Set up your project​

Create a Vite project and install the SDK:

npm create vite@latest taruvi-tasks -- --template vanilla
cd taruvi-tasks
npm install
npm install @taruvi/sdk

Create .env.local in the project folder with your values:

.env.local
VITE_TARUVI_SITE_URL=https://YOUR_SITE_HOST
VITE_TARUVI_APP_SLUG=APP_SLUG

Create src/taruvi.js. It creates one TaruviBase client and the two services this tutorial uses:

src/taruvi.js
import {Auth, Client, Database} from '@taruvi/sdk';

const client = new Client({
apiUrl: import.meta.env.VITE_TARUVI_SITE_URL,
appSlug: import.meta.env.VITE_TARUVI_APP_SLUG,
// Required by SDK 1.5.3 but not sent; browser requests use the user's session.
apiKey: 'session-authenticated-client',
});

export const auth = new Auth(client);
export const database = new Database(client);

4. Create and read your first task​

Replace the contents of src/main.js:

src/main.js
import {auth, database} from './taruvi.js';

const app = document.querySelector('#app');
app.innerHTML = `
<button id="quickstart-action" type="button"></button>
<p id="quickstart-result"></p>
`;

const action = document.querySelector('#quickstart-action');
const output = document.querySelector('#quickstart-result');

action.textContent = auth.hasToken() ? 'Create task' : 'Sign in to TaruviBase';

async function handleAction() {
if (!auth.hasToken()) {
auth.login();
return;
}

action.disabled = true;

const createdTask = (
await database.from('tasks')
.create({title: 'Build with TaruviBase', done: false})
.execute()
).data[0];

const fetchedTask = (
await database.from('tasks')
.get(String(createdTask.id))
.execute()
).data;

output.textContent = `Created task ${fetchedTask.id}: ${fetchedTask.title}`;
action.textContent = 'Task created';
}

action.addEventListener('click', () => {
handleAction().catch((error) => {
output.textContent = `Request failed: ${error.message}`;
action.disabled = false;
});
});

Start the dev server and open the address it prints:

npm run dev

Keep Vite's default address, http://localhost:5173. Select Sign in to TaruviBase, sign in, and you return to the page signed in. Select Create task. The page shows the new task's ID and title.

Verify in the Console: open Datatables → tasks, select the Data tab, and refresh. You should see a row with title set to Build with TaruviBase and done set to false.

The record you read back looks like this (your id will differ):

{
"id": "550e8400-e29b-41d4-a716-446655440000",
"title": "Build with TaruviBase",
"done": false
}

Troubleshooting​

401 Unauthorized
  • JavaScript: Reload the page and sign in again.
  • Python: The API key expired or belongs to another site. Generate a new key on the same app's Settings → Connect page and export it again.
403 Forbidden

The signed-in user or the API key's owner is not allowed to create or read records in tasks. Ask an app admin for access, or see Access policies.

404 Not Found

Copy the site URL and app slug again from Settings → Connect, and check that the table is named exactly tasks.

Sign-in does not return to the app

Use Vite's default address, http://localhost:5173, while you follow this tutorial.

What's next​