How to setup new web project using Astro, Vercel & Prisma
Tags: webdev, astro, vercel, prisma
Published: 2023-08-03 18:24:48

## Editor setup
First we should install [Astro](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode) extension and [Prisma](https://marketplace.visualstudio.com/items?itemName=Prisma.prisma) extension for VS Code.

## Init Astro project
First run this command:
```powershell
pnpm create astro@latest
```
![Init Astro](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k6evzm7zbwtaumwgvh25.png)

Then run:
```powershell
cd my-project && code .
```

## Run Astro project
Install dependencies:
```powershell
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:
```powershell
pnpm install -g vercel && pnpm add @astrojs/vercel
```
and config file _astro.config.mjs_ to:
```ts
import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel/serverless';

export default defineConfig({
  output: 'server',
  adapter: vercel(),
});
```

Now run:
```powershell
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:
```powershell
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](https://vercel.com/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.
![Connect Postgres Database to project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a16k8g8ra7wxj1r5c56e.png)
Inside your terminal, run:
```powershell
vercel env pull .env
```
## Add Prisma
```powershell
pnpm install prisma --save-dev && pnpm add @prisma/client
```
Your default **_prisma/schema.prisma_** look likes:
```ts
// 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
```ts
// 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:
```powershell
pnpm prisma migrate dev --name init && pnpm prisma generate
```

## Add a simple post to your database
Modify **_src/pages/index.astro_**
```tsx
---
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:
```powershell
pnpm dev --open
```
And see your database updated in [Vercel dashboard](https://vercel.com/dashboard)!