DEV Community

Thuong Vu
Thuong Vu

Posted on

How to setup new web project using Astro, Vercel & Prisma

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
Enter fullscreen mode Exit fullscreen mode

Init Astro

Then run:

cd my-project && code .
Enter fullscreen mode Exit fullscreen mode

Run Astro project

Install dependencies:

pnpm install
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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(),
});
Enter fullscreen mode Exit fullscreen mode

Now run:

vercel dev
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.
Connect Postgres Database to project
Inside your terminal, run:

vercel env pull .env
Enter fullscreen mode Exit fullscreen mode

Add Prisma

pnpm install prisma --save-dev && pnpm add @prisma/client
Enter fullscreen mode Exit fullscreen mode

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")
}
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

Now run:

pnpm prisma migrate dev --name init && pnpm prisma generate
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Finally, execute command:

pnpm dev --open
Enter fullscreen mode Exit fullscreen mode

And see your database updated in Vercel dashboard!

Top comments (0)