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

Thuong Vu — Thu, 03 Aug 2023 18:24:48 +0000

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!

DEV Community: Thuong Vu