Skip to content
IRC-Coding IRC-Coding
vercel hosting deployment astro devops serverless edge-computing

Vercel Hosting & Deployment: Modern Web Dev Guide

Master Vercel hosting, deployment, and CLI. Deploy Astro & Next.js projects with serverless edge computing.

I

IRC-Coding Team

2 min read
Vercel Hosting & Deployment: Modern Web Dev Guide

Vercel Hosting and Deployment: The Ultimate Guide

Are you still desperately looking for a modern hosting solution for your web projects? Vercel is one of the most popular deployment platforms for modern web applications and could convince you too.

In this article, you’ll hopefully learn everything you need to know about Vercel.

Why does this article exist!

Throughout my life, I have used and programmed many CMS systems. From the beginning with Contao, Typo3, Wordpress, I eventually switched to other frameworks. Currently I work a lot with Astro and Fast-API (Python Framework)

Actually, I don’t really need a backend anymore, such as it was the case with Wordpress, at least for static pages that are built more like IRC-Coding, like a blog.

What is Vercel?

Vercel is a cloud platform for static websites and serverless functions. Originally started as ZEIT, Vercel has become one of the leading deployment platforms for modern web development. The platform is particularly known for its seamless integration with Next.js, but it also supports many other frameworks like Astro, React, Vue, Svelte, and more.

Vercel offers you:

  • Automatic deployments from Git repositories
  • Global Edge Network for maximum performance
  • Serverless Functions for backend logic
  • Preview Deployments for Pull Requests
  • Custom Domains and SSL certificates
  • Analytics and Performance Monitoring

Why do you need Vercel?

You need Vercel if you:

  • Host static websites
  • Deploy serverless applications
  • Search for automatic CI/CD pipelines
  • Guarantee global performance for your users
  • Need Preview Deployments for your development teams
  • Use Edge Functions to minimize latency
  • Want to start for free and only pay for what you use

Vercel is particularly ideal for:

  • Frontend developers who want to deploy quickly
  • Startups that need scalable infrastructure
  • Agile Teams that deploy frequently
  • Open-Source Projects looking for stable hosting solutions

Where is Vercel already being used?

Vercel is used by some of the largest companies in the world:

  • Next.js - The React Framework itself is hosted on Vercel
  • React - The official React documentation
  • Tailwind CSS - The popular CSS framework
  • TypeScript - The official TypeScript website
  • Vue.js - The Vue.js documentation
  • Svelte - The Svelte website
  • Stripe - Parts of the Stripe documentation
  • Duolingo - The language learning platform
  • TikTok - Parts of the TikTok website

These companies choose Vercel because of its performance, reliability, and developer-friendliness.

Install and set up Vercel

Install Vercel CLI

The easiest way to use Vercel is through the Vercel CLI. Install it with npm:

npm install -g vercel

Or with yarn:

yarn global add vercel

Create a Vercel Account

  1. Go to vercel.com
  2. Click on “Sign Up”
  3. Register with GitHub, GitLab, Bitbucket, or Email
  4. Verify your email address

Initialize Project

Navigate to your project directory and run:

vercel login

This opens a browser where you can log in to Vercel. After that:

vercel

The CLI will ask you some settings:

  • Set up and deploy? → Y
  • Which scope? → Choose your account
  • Link to existing project? → N (for new projects)
  • What’s your project’s name? → Your project name
  • In which directory is your code located? → . (or your build directory)
  • Want to override the settings? → N (or Y for custom settings)

Set up Git Integration

To set up automatic deployments, connect your Git repository:

  1. Go to vercel.com/dashboard
  2. Click on “Add New Project”
  3. Import your repository from GitHub, GitLab, or Bitbucket
  4. Configure the build settings
  5. Click on “Deploy”

From now on, a new deployment will be triggered with every push.

Combine Vercel with other tools

Vercel and Next.js

Next.js and Vercel are made for each other. Vercel was created by the Next.js team and offers optimal support:

// next.config.js
module.exports = {
  // Automatic optimization for Vercel
  target: 'serverless',
  // Image optimization
  images: {
    domains: ['example.com'],
  },
}

Vercel and Astro

IRC-Coding.de currently uses Astro!

Astro projects can be easily deployed on Vercel: Currently I’m using Coolify and Visual Studio Code

// astro.config.mjs
import { defineConfig } from 'astro/config';

export default defineConfig({
  // Vercel adapter for Serverless Functions
  adapter: astro({
    output: 'server',
  }),
});

Vercel and Docker

You can also deploy Docker containers on Vercel:

# Dockerfile
FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
EXPOSE 3000
CMD ["npm", "start"]

Vercel and Databases

Vercel integrates with many databases:

  • PostgreSQL (Neon, Supabase, PlanetScale)
  • MySQL (PlanetScale)
  • MongoDB (MongoDB Atlas)
  • Redis (Upstash, Redis Cloud)
  • Firebase (Firestore)

Practical example: Deploy Astro project on Vercel

Let’s look at a concrete example: Deploying an Astro blog on Vercel.

Step 1: Create Astro Project

npm create astro@latest mein-blog
cd mein-blog
npm install

Step 2: Test project locally

npm run dev

Open http://localhost:4321 in your browser.

Step 3: Configure Vercel

Create a vercel.json in the root directory:

{
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "devCommand": "npm run dev",
  "installCommand": "npm install"
}

Step 4: Create Git Repository

git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/dein-username/mein-blog.git
git push -u origin main

Step 5: Deploy on Vercel

  1. Go to vercel.com/dashboard
  2. Click on “Add New Project”
  3. Select your GitHub repository
  4. Vercel automatically detects Astro and configures everything:
    • Framework Preset: Astro
    • Build Command: astro build
    • Output Directory: dist
  5. Click on “Deploy”

Step 6: Set up Custom Domain

  1. Go to project settings
  2. Click on “Domains”
  3. Add your domain (e.g. mein-blog.de)
  4. Configure the DNS records:
    • A Record: 76.76.21.21
    • CNAME: cname.vercel-dns.com

Step 7: Configure Environment Variables

If you need environment variables:

  1. Go to Settings → Environment Variables
  2. Add your variables:
    • API_KEY: Your API Key
    • DATABASE_URL: Your database URL
  3. Save and redeploy

Step 8: Use Preview Deployments

Vercel automatically creates a Preview Deployment for every Pull Request:

  1. Create a new branch: 
    git checkout -b feature/neuer-artikel
  2. Make changes and commit: 
    git add .
git commit -m "Neuer Artikel"
git push origin feature/neuer-artikel
  3. Create a Pull Request on GitHub
  4. Vercel automatically creates a Preview Deployment
  5. Test the preview before merging

20 Questions and Answers

1. Is Vercel free? Yes, Vercel offers a generous Free Plan with unlimited static deployments, 100 GB bandwidth per month, and 100 GB Edge Cache. Serverless Functions are limited in the Free Plan.

2. What is the difference between Vercel and Netlify? Both offer similar features, but Vercel is more optimized for Next.js, while Netlify specializes more in Jamstack and Headless CMS. Vercel has a stronger Edge Network, Netlify offers better build plugins.

3. Can I host databases on Vercel? Vercel doesn’t host databases directly, but integrates perfectly with many database providers like Neon (PostgreSQL), PlanetScale (MySQL), MongoDB Atlas, and Upstash (Redis).

4. How long does a deployment on Vercel take? Typically 30-60 seconds for static sites and 1-2 minutes for applications with build processes. Vercel uses caching to speed up deployments.

5. Does Vercel support PHP? Not natively, but you can deploy PHP via Serverless Functions or Docker containers on Vercel. For pure PHP projects, other hosting services are better suited.

6. What are Edge Functions? Edge Functions are serverless functions that run at the edge of Vercel’s infrastructure. This minimizes latency since code execution happens closer to the user.

7. Can I host WordPress on Vercel? Yes, but it’s not ideal. WordPress requires PHP and MySQL, which is complex on Vercel. Specialized WordPress hosting or WP Engine are better options.

8. How much does Vercel Pro Plan cost? The Pro Plan costs $20 per month per user and provides unlimited bandwidth, priority support, advanced analytics, and more.

9. Does Vercel support WebSockets? Yes, Vercel supports WebSockets via Serverless Functions and Edge Functions, but with certain limitations. For real-time applications, specialized services are better.

10. Can I use custom domains on Vercel? Yes, Vercel supports unlimited custom domains with automatic SSL certificates (Let’s Encrypt). You can also use subdomains and wildcard domains.

11. What happens if I exceed my deployment limit? In the Free Plan, deployments are throttled after 100 per month. In the Pro Plan, deployments are unlimited. You can upgrade at any time.

12. How secure is Vercel? Vercel is very secure with DDoS protection, automatic SSL certificates, SOC 2 compliance, and regular security audits. Your data is stored and transmitted securely.

13. Can I use Vercel without Git? Yes, with the Vercel CLI you can deploy projects directly without Git. However, Git integration is recommended for automatic deployments and versioning.

14. What is the difference between Static and Serverless on Vercel? Static Sites are pre-rendered HTML/CSS/JS files delivered extremely fast. Serverless Functions are dynamic code executions on demand.

15. Does Vercel support TypeScript? Yes, Vercel supports TypeScript natively and can automatically compile TypeScript during the build process. No additional configuration needed.

16. How can I monitor my deployments? Vercel provides a dashboard with deployment history, logs, analytics, and performance metrics. You can also use integrations with tools like Sentry or Datadog.

17. Can I use Vercel for E-Commerce? Yes, Vercel is often used for E-Commerce frontends (e.g., with Shopify, Stripe, or Medusa). However, you’ll need a separate solution for the backend.

18. What is the Vercel Edge Network? The Vercel Edge Network consists of over 35 data centers worldwide. Your content is automatically delivered to the nearest location for maximum performance.

19. Can I use Cron Jobs on Vercel? Yes, via Vercel Cron Jobs you can set up periodic tasks. Configure them in vercel.json or via the dashboard.

20. How do I migrate from another hosting to Vercel? Export your code base, set up Vercel, configure environment variables, deploy to Vercel, and update DNS records. Vercel offers migration assistants for certain platforms.

Alternative: Coolify as a Self-Hosted Solution

You’ve already read about Coolify in the article, which is an interesting alternative to Vercel. Coolify is an open-source PaaS platform that you can self-host.

Coolify vs. Vercel

Coolify (Self-Hosted):

  • Advantages: Complete control, no monthly costs, data privacy, all data on your server
  • Disadvantages: Server administration required, no global edge network, more maintenance effort
  • Ideal for: Developers with server experience, projects with high data protection requirements, budget-conscious developers

Vercel (Managed Cloud):

  • Advantages: No server maintenance, global edge network, automatic SSL, preview deployments, easy setup
  • Disadvantages: Monthly costs with higher traffic, data on Vercel’s servers, less control
  • Ideal for: Fast development, teams without DevOps expertise, global performance

Visual Studio Code: The Editor, Not the Hosting Solution

Visual Studio Code is a code editor, not a hosting solution. You can use VS Code with both:

  • With Vercel: Install the Vercel Extension for direct deployments from VS Code
  • With Coolify: Use VS Code for development and deploy via Git or CLI to your Coolify server

VS Code is your workplace; the choice of hosting (Vercel vs. Coolify) is a separate decision.

When Should You Choose What?

Choose Vercel if:

  • You want to get started quickly without server administration
  • Global performance is important
  • You need preview deployments for teams
  • Your budget allows for managed cloud

Choose Coolify if:

  • You want full control over your infrastructure
  • Data privacy and compliance are critical
  • You can or want to learn server administration
  • You want to save costs long-term

Vercel is an excellent choice for modern web projects. The platform gives you everything you need for fast deployments, global performance, and scalable infrastructure. Vercel especially shines when combined with frameworks like Astro, Next.js, or React. If you’ve never worked with Vercel before, give it a try—the Free Plan is generous and you can have your first deployment live within minutes. Good luck with your next project on Vercel!

Back to Blog
Share: