Connect a Sveltekit application to Neon

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

1. Navigate to the Projects page in the Neon Console.
2. Click New Project.
3. Specify your project settings and click Create Project.

1. Create a Sveltekit project using the following commands:

   npx sv create my-app --template minimal --no-add-ons --types ts
   cd my-app

2. Add project dependencies using one of the following commands:npm install @neondatabase/serverless dotenvnpm install postgres dotenvnpm install pg dotenv

Add a .env file to your project directory and add your Neon connection string to it. You can find the connection string for your database by clicking the Connect button in the Console nav. For more information, see Connect from any application.

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

There are two parts to connecting a SvelteKit application to Neon. The first is db.server.ts, which contains the database configuration. The second is the server-side route where the connection to the database will be used.

db.server

Create a db.server.ts file at the root of your /src directory and add the following code snippet to connect to your Neon database:

import 'dotenv/config';
import { neon } from '@neondatabase/serverless';

const connectionString: string = process.env.DATABASE_URL as string;

const sql = neon(connectionString);
export { sql };

import 'dotenv/config';
import postgres from 'postgres';

const connectionString: string = process.env.DATABASE_URL as string;

const sql = postgres(connectionString, { ssl: 'require' });

export { sql };

import 'dotenv/config';
import pg from 'pg';

const connectionString: string = process.env.DATABASE_URL as string;

const pool = new pg.Pool({
  connectionString,
  ssl: true,
});

export { pool };

route

Create a +page.server.ts file in your route directory and import the database configuration:

import { sql } from '../db.server';

export async function load() {
  const response = await sql`SELECT version()`;
  const { version } = response[0];
  return {
    version,
  };
}

import { sql } from '../db.server';

export async function load() {
  const response = await sql`SELECT version()`;
  const { version } = response[0];
  return {
    version,
  };
}

import { pool } from '../db.server';

export async function load() {
  const client = await pool.connect();
  try {
    const { rows } = await client.query('SELECT version()');
    const { version } = rows[0];
    return {
      version,
    };
  } finally {
    client.release();
  }
}

Page Component

Create a +page.svelte file to display the data:

<script>
    export let data;
</script>

<h1>Database Version</h1>
<p>{data.version}</p>

When you run npm run dev you can expect to see the following on localhost:5173:

Database Version
PostgreSQL 17.2 on x86_64-pc-linux-gnu, compiled by gcc (Debian 12.2.0-14) 12.2.0, 64-bit