Connect a Sveltekit application to Neon

Pre-built prompt for connecting SvelteKit applications to Lakebase Postgres.

Copy prompt

Sveltekit is a modern JavaScript framework that compiles your code to tiny, framework-less vanilla JS. This guide explains how to connect Sveltekit with Neon using a secure server-side request.

To create a project on Neon and access it from a Sveltekit application:

1. Create a Neon project

   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.

2. Create a Sveltekit project and add dependencies

   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:

      Neon serverless driverpostgres.jsnode-postgres

      npm install @neondatabase/serverless dotenv

3. Store your Neon credentials

   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 on your Project Dashboard. For more information, see Connect from any application.

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

4. Configure the Postgres client

   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:

   Neon serverless driverpostgres.jsnode-postgres

   import 'dotenv/config';
   import { neon } from '@neondatabase/serverless';
   
   const connectionString: string = process.env.DATABASE_URL as string;
   
   const sql = neon(connectionString);
   export { sql };

   route

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

   Neon serverless driverpostgres.jsnode-postgres

   import { sql } from '../db.server';
   
   export async function load() {
     const response = await sql`SELECT version()`;
     const { version } = response[0];
     return {
       version,
     };
   }

   Page Component

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

   <script>
       export let data;
   </script>
   
   <h1>Database Version</h1>
   <p>{data.version}</p>

5. Run the app

   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

Next steps

• Set up Managed Better Auth: Add managed authentication that branches with your database
• Add Object Storage: S3-compatible file storage that branches with your database
• Deploy a Function: Run backend compute next to your database, no separate hosting needed
• Call an LLM with AI Gateway: Access foundation models from Anthropic, OpenAI, Google, and more with one credential