Skip to main content
This guide will walk you through setting up the Astro Vercel Boilerplate on your local machine.

​
Prerequisites

Before you begin, ensure you have the following installed:
  • Node.js 18.0 or higher
  • A package manager: npm, yarn, pnpm, or bun
  • Git

​
Installation

1

Clone the repository

Clone the Astro Vercel Boilerplate to your local machine:
git clone https://github.com/jllahi/astro-vercel-boilerplate.git
cd astro-vercel-boilerplate
Alternatively, you can use the “Deploy with Vercel” button to automatically fork and deploy the repository.
2

Install dependencies

Install the project dependencies using your preferred package manager:
npm install
This project is configured to use Bun (v1.3.6) as the default package manager, but it works seamlessly with npm, yarn, or pnpm as well.
3

Start the development server

Run the development server to see your site in action:
npm run dev
Your site will be available at http://localhost:4321
The development server includes hot module reloading, so changes you make to your code will be reflected immediately in the browser.
4

Explore the demo pages

Open your browser and explore the different demo pages to see various features in action:
  • Homepage (/) - Server-rendered with edge functions showing your IP and location
  • SSR Page (/ssr) - Server-side rendering displaying current server time
  • ISR Page (/isr) - Incremental static regeneration with revalidation
  • Image Page (/image) - Vercel Image Optimization demo
  • Edge API (/edge.json) - JSON endpoint running on the edge
Try refreshing these pages to see how they behave differently based on their rendering strategy!

​
Project Structure

Here’s an overview of the key files and directories: 
astro-vercel-boilerplate/
├── src/
│   ├── pages/           # Route pages (.astro, .md, .ts)
│   ├── components/      # Reusable Astro components
│   ├── layouts/         # Page layouts
│   └── assets/          # Images and static assets
├── public/              # Static files served as-is
├── astro.config.mjs     # Astro configuration
└── package.json         # Project dependencies and scripts

​
Understanding the Configuration

The boilerplate comes pre-configured with optimal settings in astro.config.mjs:
astro.config.mjs
import vercel from '@astrojs/vercel'
import { defineConfig } from 'astro/config'

export default defineConfig({
  output: 'server',
  adapter: vercel({
    edgeMiddleware: true,
    imageService: true,
    webAnalytics: {
      enabled: true,
    },
    isr: {
      expiration: 60 * 60 * 24, // 24 hours
      bypassToken: '115556d774a8115556d774a8115556d774a8s',
      exclude: ['/api/revalidate', '/ssr', '/edge.json'],
    },
  }),
})
The output: 'server' setting enables server-side rendering by default. Individual pages can opt into static pre-rendering by setting export const prerender = true.

​
Key Dependencies

The boilerplate includes these essential packages:
  • astro - The Astro framework
  • @astrojs/vercel - Official Vercel adapter for Astro
  • @vercel/analytics - Web analytics for your site
  • @vercel/speed-insights - Real-time performance monitoring
  • astro-seo - SEO utilities for meta tags

​
Available Scripts

Here are the main scripts available in package.json: 
# Start development server
npm run dev

# Build for production
npm run build

# Preview production build locally
npm run preview

# Run Astro type checking
npm run check

# Format code with Prettier
npm run format

# Lint code with ESLint
npm run lint

​
Next Steps

Explore Features

Dive deeper into SSR, ISR, and edge functions

Deploy to Vercel

Learn how to deploy your site to production

Build docs developers (and LLMs) love

Get started for freeTalk to us