Editor setup
First we should install Astro extension and Prisma extension for VS Code.
Init Astro project
First run this command:
pnpm create astro@latest
Then run:
cd my-project && code .
Run Astro project
Install dependencies:
pnpm install
Inside VS Code press F5 or using pnpm dev --open to run the project.
You can config F5 shortcut in launch.json inside .vscode folder.
Add Vercel to hosting your project
Install Vercel CLI & and add @astrojs/vercel to project:
pnpm install -g vercel && pnpm add @astrojs/vercel
and config file astro.config.mjs to:
import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel/serverless';
export default defineConfig({
output: 'server',
adapter: vercel(),
});
Now run:
vercel dev
Execute this command almost like pnpm dev but at the first time it'll ask you to login to vercel and initialize it to your project.
Now when your project have no problems, you can deploy your project first time to vercel by using the command:
vercel
You can also connect your project with Github repo to auto build a deployment each time you commit and push your project to Github.
Add Vercel Postgres
Inside your Vercel dashboard select Storage tab and click on Create Database, then choose Postgres and pick a name for your database. After that, you connect it to your project.
Inside your terminal, run:
vercel env pull .env
Add Prisma
pnpm install prisma --save-dev && pnpm add @prisma/client
Your default prisma/schema.prisma look likes:
// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema
generator client {
provider = "prisma-client-js"
}
datasource db {
provider = "postgresql"
url = env("DATABASE_URL")
}
Now update datasourse and add Post model
// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema
generator client {
provider = "prisma-client-js"
}
datasource db {
provider = "postgresql"
url = env("POSTGRES_PRISMA_URL")
directUrl = env("POSTGRES_URL_NON_POOLING")
shadowDatabaseUrl = env("POSTGRES_URL_NON_POOLING")
}
model Post {
id String @id() @default(uuid())
content String
}
Now run:
pnpm prisma migrate dev --name init && pnpm prisma generate
Add a simple post to your database
Modify src/pages/index.astro
---
import { PrismaClient } from "@prisma/client";
const prisma = new PrismaClient();
await prisma.post.create({
data: {
content: "Hello Astro, Vercel and Prisma",
},
});
---
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>Astro</title>
</head>
<body>
<h1>Astro</h1>
</body>
</html>
Finally, execute command:
pnpm dev --open
And see your database updated in Vercel dashboard!
Top comments (0)