Methodology
Database
Database deployment for Stapleton Group apps.
Neon
Stapleton group has chosen to use Neon as the database provider. It is primarily a postgresql provider.
Drizzle
Acceessing and managing databases with Drizzle ORM.
Watch this introduction video on youtube Realworld example with Drizzle
Example
There is an example codeline on github at database.
This was initially created with
npm create nuxt@latest database
I added some additional configuration in nuxt.config.ts to give access to the database URL.
nuxt.config.ts
export default defineNuxtConfig({
runtimeConfig: {
// Private keys are only available on the server
DATABASE_URL: process.env.DATABASE_URL,
},
});
Added configuration for drizzle.
drizzle.config.ts
import { defineConfig } from 'drizzle-kit';
export default defineConfig({
dialect: 'postgresql',
schema: './server/database/schema.ts',
out: './server/database/migrations',
url: process.env.DATABASE_URL!,
});
Added node packages
npm install zod postgres @types/pg drizzle-orm
npm install -D drizzle-kit
Added commands to package.json to support database migration.
{
"scripts": {
"db:generate": "drizzle-kit generate",
"db:push": "drizzle-kit push"
}
}
Created a schema.
server/database/schema.ts
import {} from 'drizzle-orm/postgres-core';
import { pgTable, serial, text, timestamp } from 'drizzle-orm/pg-core';
export const users = pgTable('users', {
id: serial('id').primaryKey(),
name: text('name').notNull(),
email: text('email').notNull().unique(),
password: text('password').notNull(),
createdAt: timestamp('created_at').defaultNow().notNull(),
updatedAt: timestamp('updated_at').defaultNow().notNull(),
});
Accessing Data from Client
And finally, to display the data on the client side I created a vue page with the following content:
app/pages/index.vue
<script setup lang='ts'>
const {data: users, error} = useFetch('/api/users')
</script>
<template>
<h1>Users</h1>
<ul>
<li v-for='user in users'>
{{user.name}} {{user.email}}
</li>
</ul>
</template>