Write data to Turso from a Netlify site

The Turso extension for Netlify enables you to read and write data to Turso in a site deployed to Netlify. The extension provides a seamless way to connect your Netlify site to your Turso project, for use in all Netlify environments.

#TL;DR

We’re going to install and configure the Turso extension, fill the database with data, and then set up an example site that reads and writes data to Turso.

The example project is a simple site that lists pets from our Turso database and enables users to “snuggle” pets.

#Deploy example site

Before we can install and apply the Turso extension, we need to have a Netlify site. Deploy the example project by clicking the button below.

The first build will likely fail because the extension hasn’t been installed yet. Let’s move on to the next section and then come back to re-deploy.

#Set up Turso database

Let’s create a new Turso project and set up a database so that we have something to work with.

#Create a new group

After signing up or signing in to your Turso account, navigate to Databases (1) and choose Create Group (2). Use Fly.io as the provider, then give your group a name and choose a primary data close to you.

#Create a new database

This will lead you to the group page. Click Create Database to open the new database modal. Fill in the details and click Create Database.

#Create the pets table

Once the database is provisioned, we can create the pets table. From your database dashboard, choose Edit Data > Outerbase.

Then navigate to the Queries tab (1), add the query below (2), then choose Run (3).

The query for creating the pets table is as follows:

CREATE TABLE
  pets (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    name TEXT NOT NULL,
    greeting TEXT NOT NULL,
    bio TEXT NOT NULL,
    image TEXT NOT NULL,
    snuggles INTEGER NOT NULL DEFAULT 0,
    created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP
  );

#Add some starter data

Let’s add some seed data to the pets table. While still in the Queries tab, run the following query to add some data.

INSERT INTO
    pets (name, greeting, image, bio)
VALUES
    ('Bubbles', 'Blub blub!', 'bubbles.jpg', "Hey there, I'm Bubbles! I swim around all day and blow bubbles. I might be small, but I have a big personality."),
    ('Chirpy', 'Tweet!', 'chirpy.jpg', "Hello, I'm Chirpy! I love singing and hopping around. My favorite thing is to wake everyone up with my cheerful tweets."),
    ('Fluffy', 'Woof!', 'fluffy.jpg', "Hi, I'm Fluffy! I love chasing my tail and barking at the mailman. My favorite pastime is napping on the couch."),
    ('Nibbles', 'Squeak!', 'nibbles.jpg', "Hi, I'm Nibbles. I love running on my wheel and nibbling on treats. I'm always up for an adventure in my little world."),
    ('Rex', 'Roar!', 'rex.jpg', "Roar! I'm Rex, the tiny dinosaur. I might be small, but I have a big roar. I love stomping around and pretending I'm a giant."),
    ('Shadow', '...', 'shadow.jpg', "Hello, I'm Shadow. I'm mysterious and love hiding in the shadows. I enjoy quiet moments and observing everything around me."),
    ('Spike', 'Arrf!', 'spike.jpg', "Hi, I'm Spike. Do I look prickly? I'm not. I'm a softie at heart. I love exploring and curling up into a ball."),
    ('Whiskers', 'Meow!', 'whiskers.jpg', "Hello, I'm Whiskers. I enjoy long naps in the sun and knocking things off the counter. I'm a master of the purr and the silent meow.");

Now if you navigate to the Tables tab (1) and choose the pets table (2), you should see the data we just added (3).

#Install the Turso extension

Now that we have the database set up, we can install the Turso extension.

Back in the Netlify UI, go to your team’s dashboard, navigate to Extensions. Locate and select the Turso extension. Click the install button to install the extension.

#Add Turso API token

Once installed, you’ll see a configuration option for an API token. This gets set at the team level. If you don’t have an API token ready to go, follow the link to get an API token. This link directs you to the Turso API token page.

Create an API token and give it a name. Copy the value and paste it into the Turso extension configuration.

#Configure the Turso extension

After the extension is installed and configured for the team, navigate to the example site that you just deployed, and go to Site configuration. In the General settings, you will see a new Turso section. Choose the database that you created earlier and save the settings.

#Deploy the site again

Now that the extension is configured, we can deploy the site again. Click the Deploy site button to deploy the site.

Once the build is complete, navigate to your production URL and you should see the pets that we just added to the database.

Give them some snuggles and watch the count go up!

#Working locally

You now have what you need to start working with Turso in a Netlify site. The extension handled injecting environment variables into your Netlify site. You can apply the same approach to any Netlify project.

You can also work locally without dealing with environment variables. To do this, all you have to do is to use Netlify Dev rather than Astro’s default development server.

Install the Netlify CLI.

npm install -g netlify-cli

Then link the site to your production site.

netlify link

The easiest way to do this is to find the site ID, which is available in the general section of you site configuration in the Netlify UI.

Then start the development server. Your environment will be automatically configured, and you’ll be able to use your Turso database locally.

netlify dev