Tanstack Start Database Setup

First, create a database at https://neon.com. I skipped the init command neon gives you so close that pop up and then from your Project Dashboard click on Connect under the Connect to your database section. Copy the connection string and open up your env.local file to replace the placeholder string.

# Database URL for PostgreSQL
DATABASE_URL="paste your connection string here"

Test the connection by migrating your database with the demo schema already provided in src/db/schema.ts.

npx drizzle-kit push

You should get an error. That is because we need to rename are .env.local file to just .env

mv .env.local .env

Run the push command again and studio command then open up drizzle studio at https://local.drizzle.studio to view your database.

npx drizzle-kit push
npx drizzle-kit studio

Drizzle Kit Studio

Cool the database connection works! Progress. We can even add some data by going to http://localhost:3000/demo/drizzle.

I don't need the todos table so i'm going to DROP the table. In Drizzle Studio click SQL console then run the drop statement.

DROP TABLE todos;

Next I'm going to tackle Auth but before I do that I'm going to tweak the header a bit with some Tailwind.

import { Link } from "@tanstack/react-router";

export default function Header() {
	return (
		<header className="p-4 flex items-center bg-white">
			<div className="w-full max-w-2xl mx-auto">
				<h1 className="ml-4 text-xl font-semibold">
					<Link to="/">
						<img src="/logo.svg" alt="level logo" className="h-10" />
					</Link>
				</h1>
			</div>
		</header>
	);
}

There. Now onto onto Auth in the next post.