Neon Deploy: Learn how Neon helps developers ship faster with Postgres. Grab your ticket

Connect a SolidStart application to Neon

Set up a Neon project in seconds and connect from a SolidStart application

SolidStart is an open-source meta-framework designed to integrate the components that make up a web application.1. This guide explains how to connect SolidStart with Neon using a secure server-side request.

To create a Neon project and access it from a SolidStart application:

  1. Create a Neon project
  2. Create a SolidStart project and add dependencies
  3. Configure a Postgres client
  4. Run the app

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.

Create a SolidStart project and add dependencies

  1. Create a SolidStart project if you do not have one. For instructions, see Quick Start, in the SolidStart documentation.

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

    Neon serverless driver
    postgres.js
    node-postgres
    npm install @neondatabase/serverless

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 in the Connection Details widget on the Neon Dashboard. For more information, see Connect from any application.

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

Configure the Postgres client

There a multiple ways to make server-side requests with SolidStart. See below for the different implementations.

Server-Side Data Loading

To load data on the server in SolidStart, add the following code snippet to connect to your Neon database:

Neon serverless driver
postgres.js
node-postgres
import { neon } from "@neondatabase/serverless";
import { createAsync } from "@solidjs/router";

const getVersion = async () => {
    "use server";
    const sql = neon(`${process.env.DATABASE_URL}`);
    const response = await sql`SELECT version()`;
    const { version } = response[0];
    return version;
}

export const route = {
  load: () => getVersion(),
};

export default function Page() {
  const version = createAsync(() => getVersion());
  return <>{version()}</>;
}

Server Endpoints (API Routes)

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

Neon serverless driver
postgres.js
node-postgres
// File: routes/api/test.ts

import { neon } from '@neondatabase/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 on localhost:3000:

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 application described in this guide on GitHub.

Need help?

Join our Discord Server to ask questions or see what others are doing with Neon. Users on paid plans can open a support ticket from the console. For more details, see Getting Support.

Last updated on

Was this page helpful?