# Source: https://neon.com/llms/guides-solid-start.txt

# Connect a SolidStart application to Neon

> The document guides users on integrating a SolidStart application with Neon by detailing the steps to establish a connection, configure environment variables, and manage database interactions within the SolidStart framework.

## Source

- [Connect a SolidStart application to Neon HTML](https://neon.com/docs/guides/solid-start): The original HTML version of this documentation

SolidStart is an open-source meta-framework designed to integrate the components that make up a web application.<sup><a target="_blank" href="https://docs.solidjs.com/solid-start#overview">1</a></sup>. 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:

## 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](https://console.neon.tech/app/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](https://docs.solidjs.com/solid-start/getting-started), in the SolidStart documentation.

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

   Tab: node-postgres

   ```shell
   npm install pg
   ```

Tab: postgres.js

   ```shell
   npm install postgres
   ```

Tab: Neon serverless driver

   ```shell
   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 by clicking the **Connect** button on your **Project Dashboard**. For more information, see [Connect from any application](https://neon.com/docs/connect/connect-from-any-app).

```shell
DATABASE_URL="postgresql://<user>:<password>@<endpoint_hostname>.neon.tech:<port>/<dbname>?sslmode=require&channel_binding=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](https://docs.solidjs.com/solid-start/building-your-application/data-loading#data-loading-always-on-the-server) in SolidStart, add the following code snippet to connect to your Neon database:

Tab: node-postgres

```typescript
import pg from 'pg';
import { createAsync } from "@solidjs/router";

const getVersion = async () => {
    "use server";
    const pool = new pg.Pool({
        connectionString: process.env.DATABASE_URL,
    });
    const client = await pool.connect();
    const response = await client.query('SELECT version()');
    return response.rows[0].version;
}

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

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

Tab: postgres.js

```typescript
import postgres from 'postgres';
import { createAsync } from "@solidjs/router";

const getVersion = async () => {
    "use server";
    const sql = postgres(import.meta.env.DATABASE_URL, { ssl: 'require' });
    const response = await sql`SELECT version()`;
    return response[0].version;
}

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

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

Tab: Neon serverless driver

```typescript
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:

Tab: node-postgres

```javascript
// File: routes/api/test.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' } });
}
```

Tab: postgres.js

```javascript
// File: routes/api/test.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' },
  });
}
```

Tab: Neon serverless driver

```javascript
// 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](localhost:3000):

```shell
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.

- [Get started with SolidStart and Neon](https://github.com/neondatabase/examples/tree/main/with-solid-start)