Astro

Astro builds fast content sites, powerful web applications, dynamic server APIs, and everything in-between. This guide describes how to create a SerenDB Postgres database and access it from an Astro site or application.

To create a SerenDB project and access it from an Astro site or application:

Create a SerenDB project

If you do not have one already, create a SerenDB project. Save your connection details including your password. They are required when defining connection settings.

  1. Navigate to the Projects page in the SerenDB Console.

  2. Click New Project.

  3. Specify your project settings and click Create Project.

Create an Astro project and add dependencies

  1. Create an Astro project if you do not have one. For instructions, see Getting Started, in the Astro documentation.

  2. Add project dependencies using one of the following commands:

    <CodeTabs reverse={true} labels={["node-postgres", "postgres.js", "SerenDB serverless driver"]}>

    npm install pg
    npm install postgres
    npm install @serenorg/serverless

Store your SerenDB credentials

Add a .env file to your project directory and add your SerenDB connection string to it. You can find the connection string for your database by clicking the Connect button on your Project Dashboard to open the Connect to your database modal. For more information, see Connect from any application.

DATABASE_URL="postgresql://<user>:<password>@<endpoint_hostname>.serendb.com:<port>/<dbname>?sslmode=require&channel_binding=require"

Configure the Postgres client

There a multiple ways to make server side requests with Astro. See below for two of those options: astro files and Server Endpoints (API Routes).

astro files

In your .astro files, use the following code snippet to connect to your SerenDB database:

<CodeTabs reverse={true} labels={["node-postgres", "postgres.js", "SerenDB serverless driver"]}>

---
import { Pool } from 'pg';

const pool = new Pool({
  connectionString: import.meta.env.DATABASE_URL,
  ssl: true
});

const client = await pool.connect();

let data = null;

try {
  const response = await client.query('SELECT version()');
  data = response.rows[0].version;
} finally {
  client.release();
}
---

{data}
---
import postgres from 'postgres';

const sql = postgres(import.meta.env.DATABASE_URL, { ssl: 'require' });

const response = await sql`SELECT version()`;
const data = response[0].version;
---

{data}
---
import { neon } from '@serenorg/serverless';

const sql = neon(import.meta.env.DATABASE_URL);

const response = await sql`SELECT version()`;
const data = response[0].version;
---

{data}

Run the app

When you run npm run dev you can expect to see the following when you visit localhost:4321:

PostgreSQL 16.0 on x86_64-pc-linux-gnu, compiled by gcc (Debian 10.2.1-6) 10.2.1 20210110, 64-bit

Server Endpoints (API Routes)

In your server endpoints (API Routes) in Astro application, use the following code snippet to connect to your SerenDB database:

<CodeTabs reverse={true} labels={["node-postgres", "postgres.js", "SerenDB serverless driver"]}>

// File: src/pages/api/index.ts

import { Pool } from 'pg';

const pool = new Pool({
  connectionString: import.meta.env.DATABASE_URL,
  ssl: true,
});

export async function GET() {
  const client = await pool.connect();
  let data = {};
  try {
    const { rows } = await client.query('SELECT version()');
    data = rows[0];
  } finally {
    client.release();
  }
  return new Response(JSON.stringify(data), { headers: { 'Content-Type': 'application/json' } });
}
// File: src/pages/api/index.ts

import postgres from 'postgres';

export async function GET() {
  const sql = postgres(import.meta.env.DATABASE_URL, { ssl: 'require' });
  const response = await sql`SELECT version()`;
  return new Response(JSON.stringify(response[0]), {
    headers: { 'Content-Type': 'application/json' },
  });
}
// File: src/pages/api/index.ts

import { neon } from '@serenorg/serverless';

export async function GET() {
  const sql = neon(import.meta.env.DATABASE_URL);
  const response = await sql`SELECT version()`;
  return new Response(JSON.stringify(response[0]), {
    headers: { 'Content-Type': 'application/json' },
  });
}

Run the app

When you run npm run dev you can expect to see the following when you visit the localhost:4321/api route:

{ version: 'PostgreSQL 16.0 on x86_64-pc-linux-gnu, compiled by gcc (Debian 10.2.1-6) 10.2.1 20210110, 64-bit' }

Source code

You can find the source code for the applications described in this guide on GitHub.

Get started with Astro and SerenDB

Get started with Astro API Routes and SerenDB

PreviousFrameworksNextExpress

Last updated