Migrating from Vercel to Appwrite Sites

Start by setting up a new project in Appwrite:

1. Sign in to the Appwrite Console

2. Click Create Project

3. Enter a name for your project and click Create

Your new project will serve as the container for your migrated site and any other Appwrite services you might need.

Next, create a new site by connecting your existing repository:

1. In your Appwrite project, select Sites from the sidebar

2. Click Create Site

3. Select Connect a repository

4. Authenticate with GitHub

5. Select the repository containing your Vercel project

6. Choose your production branch (typically main)

Appwrite will auto-detect your framework. Verify this is correct or select manually from the dropdown menu.

Before migrating, document your current Vercel DNS configuration:

1. In Vercel, go to project settings > Domains

2. Note any custom DNS records you've configured (MX, TXT, etc.)

3. Don't remove the domain from Vercel until Appwrite is fully configured

Add your apex domain to your Appwrite site:

1. Navigate to your site > Domains tab

2. Click Add domain

3. Enter your apex domain (e.g., example.com)

4. Select Active deployment as the domain rule type

5. Note the NS records Appwrite provides:

   • ns1.appwrite.zone

   • ns2.appwrite.zone

At your domain registrar:

1. Update your domain's nameservers to point to Appwrite's nameservers

2. If you had custom DNS records in Vercel (like MX records for email), you'll need to recreate these in Appwrite's DNS configuration

1. Navigate to your site > Domains tab

2. Click Add domain

3. Enter your subdomain (e.g., www.example.com)

4. Select Active deployment as the domain rule type

5. Copy the CNAME value provided by Appwrite

At your domain registrar or DNS provider:

1. Create or update the CNAME record for your subdomain

2. Point it to the value provided by Appwrite

3. Wait for DNS propagation and verification

Navigate to your site > Settings > Build settings and configure the following:

• Framework: Appwrite will attempt to automatically detect your framework. Verify and ensure it is the same framework as in Vercel.

• Install command: Enter the same install command from Vercel

• Build command: Enter the same build command from Vercel

• Output directory: Enter the same output directory from Vercel

• Root directory: If your app is in a monorepo subdirectory, specify the path

• Rendering: Select the appropriate rendering mode (Static or SSR)

Before migrating, document all your Vercel environment variables:

1. In Vercel, go to your project settings > Environment Variables

2. Document all variables, noting which are for development, preview, or production

3. Identify any system variables your application relies on

1. Navigate to your site > Settings > Environment variables

2. Click the plus (+) icon to add a new variable

3. Enter the key and value for each variable. You can optionally import a .env file.

4. Toggle Secret for sensitive variables that should be hidden

Appwrite's domain-level redirects are configured in the Domains tab of your site:

1. Navigate to your site > Domains tab

2. Click Add domain or select an existing domain

3. Choose Redirect as the domain rule type

4. Enter the destination URL and select an appropriate HTTP status code (301, 302, 303, 307, or 308)

Domain redirects in Appwrite do not preserve path or query parameters. For example, if you redirect example.com to appwrite.io, then example.com/docs?id=123 will redirect to appwrite.io (not appwrite.io/docs?id=123).

For path-based redirects, use your framework's built-in functionality:

Next.js

// next.config.js
module.exports = {
  async redirects() {
    return [
      {
        source: '/old-path',
        destination: '/new-path',
        permanent: true, // 308 status code
      },
    ];
  },
};

SvelteKit

// src/routes/+layout.server.js
export function load({ url }) {
  if (url.pathname === '/old-path') {
    return {
      status: 301,
      redirect: '/new-path'
    };
  }
}

Nuxt

// nuxt.config.js
export default {
  router: {
    extendRoutes(routes, resolve) {
      routes.push({
        path: '/old-path',
        redirect: {
          to: '/new-path',
          statusCode: 301
        }
      });
    }
  }
}

For frameworks with built-in API routes:

1. Next.js: API routes in /pages/api or route handlers in /app/api work natively

2. Nuxt: Server API endpoints work as expected

3. SvelteKit: Server routes and API endpoints function normally

No migration is needed for these framework-native API routes - they'll work automatically when you deploy your site with SSR enabled.

For standalone serverless functions or more complex use cases:

1. In your Appwrite project, go to Functions

2. Click Create Function

3. Select a runtime that matches your needs (Node.js, Python, PHP, Ruby, etc.)

4. Create your function code

5. Deploy your function

Framework API routes

When using framework API routes within Appwrite Sites (with SSR enabled), your endpoints remain the same:

• Vercel: /api/hello

• Appwrite Sites: /api/hello (no change needed)

Your existing API routes code will work without modification:

// /api/hello.js in Next.js (works the same in both Vercel and Appwrite Sites)
export default function handler(req, res) {
  res.status(200).json({ message: 'Hello!' });
}

Standalone Appwrite Functions

If you're using standalone Appwrite Functions (outside your site's codebase), you'll need to update your frontend code to use the Appwrite Functions API:

// Calling an Appwrite Function from your frontend
import { Client, Functions } from 'appwrite';

const client = new Client()
    .setEndpoint('https://<REGION>.cloud.appwrite.io/v1')
    .setProject('your-project-id');

const functions = new Functions(client);

const response = await functions.createExecution('your-function-id');

Next.js

// middleware.js
export function middleware(request) {
  // Your middleware logic
}

export const config = {
  matcher: '/path/:path*',
};

SvelteKit

// src/hooks.server.js
export async function handle({ event, resolve }) {
  // Your middleware logic before response
  const response = await resolve(event);
  // Your middleware logic after response
  return response;
}

Nuxt

// server/middleware/example.js
export default defineEventHandler((event) => {
  // Your middleware logic
});