feat: add Vercel integration for project deployment

This commit introduces Vercel integration, enabling users to deploy projects directly to Vercel. It includes: - New Vercel types and store for managing connections and stats. - A VercelConnection component for managing Vercel account connections. - A VercelDeploymentLink component for displaying deployment links. - API routes for handling Vercel deployments. - Updates to the HeaderActionButtons component to support Vercel deployment. The integration allows users to connect their Vercel accounts, view project stats, and deploy projects with ease.
2025-03-27 00:06:10 +00:00
parent 1364d4a503
commit 687b03ba74
9 changed files with 982 additions and 20 deletions
--- a/app/components/header/HeaderActionButtons.client.tsx
+++ b/app/components/header/HeaderActionButtons.client.tsx
@@ -3,26 +3,30 @@ import { toast } from 'react-toastify';
 import useViewport from '~/lib/hooks';
 import { chatStore } from '~/lib/stores/chat';
 import { netlifyConnection } from '~/lib/stores/netlify';
+import { vercelConnection } from '~/lib/stores/vercel';
 import { workbenchStore } from '~/lib/stores/workbench';
 import { webcontainer } from '~/lib/webcontainer';
 import { classNames } from '~/utils/classNames';
 import { path } from '~/utils/path';
 import { useEffect, useRef, useState } from 'react';
 import type { ActionCallbackData } from '~/lib/runtime/message-parser';
-import { chatId } from '~/lib/persistence/useChatHistory'; // Add this import
+import { chatId } from '~/lib/persistence/useChatHistory';
 import { streamingState } from '~/lib/stores/streaming';
 import { NetlifyDeploymentLink } from '~/components/chat/NetlifyDeploymentLink.client';
+import { VercelDeploymentLink } from '~/components/chat/VercelDeploymentLink.client';

 interface HeaderActionButtonsProps {}

 export function HeaderActionButtons({}: HeaderActionButtonsProps) {
  const showWorkbench = useStore(workbenchStore.showWorkbench);
  const { showChat } = useStore(chatStore);
-  const connection = useStore(netlifyConnection);
+  const netlifyConn = useStore(netlifyConnection);
+  const vercelConn = useStore(vercelConnection);
  const [activePreviewIndex] = useState(0);
  const previews = useStore(workbenchStore.previews);
  const activePreview = previews[activePreviewIndex];
  const [isDeploying, setIsDeploying] = useState(false);
+  const [deployingTo, setDeployingTo] = useState<'netlify' | 'vercel' | null>(null);
  const isSmallViewport = useViewport(1024);
  const canHideChat = showWorkbench || !showChat;
  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
@@ -42,8 +46,8 @@ export function HeaderActionButtons({}: HeaderActionButtonsProps) {

  const currentChatId = useStore(chatId);

-  const handleDeploy = async () => {
-    if (!connection.user || !connection.token) {
+  const handleNetlifyDeploy = async () => {
+    if (!netlifyConn.user || !netlifyConn.token) {
      toast.error('Please connect to Netlify first in the settings tab!');
      return;
    }
@@ -118,7 +122,7 @@ export function HeaderActionButtons({}: HeaderActionButtonsProps) {
      const existingSiteId = localStorage.getItem(`netlify-site-${currentChatId}`);

      // Deploy using the API route with file contents
-      const response = await fetch('/api/deploy', {
+      const response = await fetch('/api/netlify-deploy', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
@@ -126,7 +130,7 @@ export function HeaderActionButtons({}: HeaderActionButtonsProps) {
        body: JSON.stringify({
          siteId: existingSiteId || undefined,
          files: fileContents,
-          token: connection.token,
+          token: netlifyConn.token,
          chatId: currentChatId, // Use chatId instead of artifact.id
        }),
      });
@@ -149,7 +153,7 @@ export function HeaderActionButtons({}: HeaderActionButtonsProps) {
            `https://api.netlify.com/api/v1/sites/${data.site.id}/deploys/${data.deploy.id}`,
            {
              headers: {
-                Authorization: `Bearer ${connection.token}`,
+                Authorization: `Bearer ${netlifyConn.token}`,
              },
            },
          );
@@ -203,6 +207,125 @@ export function HeaderActionButtons({}: HeaderActionButtonsProps) {
    }
  };

+  const handleVercelDeploy = async () => {
+    if (!vercelConn.user || !vercelConn.token) {
+      toast.error('Please connect to Vercel first in the settings tab!');
+      return;
+    }
+
+    if (!currentChatId) {
+      toast.error('No active chat found');
+      return;
+    }
+
+    try {
+      setIsDeploying(true);
+      setDeployingTo('vercel');
+
+      const artifact = workbenchStore.firstArtifact;
+
+      if (!artifact) {
+        throw new Error('No active project found');
+      }
+
+      const actionId = 'build-' + Date.now();
+      const actionData: ActionCallbackData = {
+        messageId: 'vercel build',
+        artifactId: artifact.id,
+        actionId,
+        action: {
+          type: 'build' as const,
+          content: 'npm run build',
+        },
+      };
+
+      // Add the action first
+      artifact.runner.addAction(actionData);
+
+      // Then run it
+      await artifact.runner.runAction(actionData);
+
+      if (!artifact.runner.buildOutput) {
+        throw new Error('Build failed');
+      }
+
+      // Get the build files
+      const container = await webcontainer;
+
+      // Remove /home/project from buildPath if it exists
+      const buildPath = artifact.runner.buildOutput.path.replace('/home/project', '');
+
+      // Get all files recursively
+      async function getAllFiles(dirPath: string): Promise<Record<string, string>> {
+        const files: Record<string, string> = {};
+        const entries = await container.fs.readdir(dirPath, { withFileTypes: true });
+
+        for (const entry of entries) {
+          const fullPath = path.join(dirPath, entry.name);
+
+          if (entry.isFile()) {
+            const content = await container.fs.readFile(fullPath, 'utf-8');
+
+            // Remove /dist prefix from the path
+            const deployPath = fullPath.replace(buildPath, '');
+            files[deployPath] = content;
+          } else if (entry.isDirectory()) {
+            const subFiles = await getAllFiles(fullPath);
+            Object.assign(files, subFiles);
+          }
+        }
+
+        return files;
+      }
+
+      const fileContents = await getAllFiles(buildPath);
+
+      // Use chatId instead of artifact.id
+      const existingProjectId = localStorage.getItem(`vercel-project-${currentChatId}`);
+
+      // Deploy using the API route with file contents
+      const response = await fetch('/api/vercel-deploy', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          projectId: existingProjectId || undefined,
+          files: fileContents,
+          token: vercelConn.token,
+          chatId: currentChatId,
+        }),
+      });
+
+      const data = (await response.json()) as any;
+
+      if (!response.ok || !data.deploy || !data.project) {
+        console.error('Invalid deploy response:', data);
+        throw new Error(data.error || 'Invalid deployment response');
+      }
+
+      // Store the project ID if it's a new project
+      if (data.project) {
+        localStorage.setItem(`vercel-project-${currentChatId}`, data.project.id);
+      }
+
+      toast.success(
+        <div>
+          Deployed successfully to Vercel!{' '}
+          <a href={data.deploy.url} target="_blank" rel="noopener noreferrer" className="underline">
+            View site
+          </a>
+        </div>,
+      );
+    } catch (error) {
+      console.error('Vercel deploy error:', error);
+      toast.error(error instanceof Error ? error.message : 'Vercel deployment failed');
+    } finally {
+      setIsDeploying(false);
+      setDeployingTo(null);
+    }
+  };
+
  return (
    <div className="flex">
      <div className="relative" ref={dropdownRef}>
@@ -213,7 +336,7 @@ export function HeaderActionButtons({}: HeaderActionButtonsProps) {
            onClick={() => setIsDropdownOpen(!isDropdownOpen)}
            className="px-4 hover:bg-bolt-elements-item-backgroundActive flex items-center gap-2"
          >
-            {isDeploying ? 'Deploying...' : 'Deploy'}
+            {isDeploying ? `Deploying to ${deployingTo}...` : 'Deploy'}
            <div
              className={classNames('i-ph:caret-down w-4 h-4 transition-transform', isDropdownOpen ? 'rotate-180' : '')}
            />
@@ -225,10 +348,10 @@ export function HeaderActionButtons({}: HeaderActionButtonsProps) {
            <Button
              active
              onClick={() => {
-                handleDeploy();
+                handleNetlifyDeploy();
                setIsDropdownOpen(false);
              }}
-              disabled={isDeploying || !activePreview || !connection.user}
+              disabled={isDeploying || !activePreview || !netlifyConn.user}
              className="flex items-center w-full px-4 py-2 text-sm text-bolt-elements-textPrimary hover:bg-bolt-elements-item-backgroundActive gap-2 rounded-md group relative"
            >
              <img
@@ -238,15 +361,20 @@ export function HeaderActionButtons({}: HeaderActionButtonsProps) {
                crossOrigin="anonymous"
                src="https://cdn.simpleicons.org/netlify"
              />
-              <span className="mx-auto">{!connection.user ? 'No Account Connected' : 'Deploy to Netlify'}</span>
-              {connection.user && <NetlifyDeploymentLink />}
+              <span className="mx-auto">
+                {!netlifyConn.user ? 'No Netlify Account Connected' : 'Deploy to Netlify'}
+              </span>
+              {netlifyConn.user && <NetlifyDeploymentLink />}
            </Button>
            <Button
-              active={false}
-              disabled
-              className="flex items-center w-full rounded-md px-4 py-2 text-sm text-bolt-elements-textTertiary gap-2"
+              active
+              onClick={() => {
+                handleVercelDeploy();
+                setIsDropdownOpen(false);
+              }}
+              disabled={isDeploying || !activePreview || !vercelConn.user}
+              className="flex items-center w-full px-4 py-2 text-sm text-bolt-elements-textPrimary hover:bg-bolt-elements-item-backgroundActive gap-2 rounded-md group relative"
            >
-              <span className="sr-only">Coming Soon</span>
              <img
                className="w-5 h-5 bg-black p-1 rounded"
                height="24"
@@ -255,7 +383,8 @@ export function HeaderActionButtons({}: HeaderActionButtonsProps) {
                src="https://cdn.simpleicons.org/vercel/white"
                alt="vercel"
              />
-              <span className="mx-auto">Deploy to Vercel (Coming Soon)</span>
+              <span className="mx-auto">{!vercelConn.user ? 'No Vercel Account Connected' : 'Deploy to Vercel'}</span>
+              {vercelConn.user && <VercelDeploymentLink />}
            </Button>
            <Button
              active={false}
@@ -269,7 +398,7 @@ export function HeaderActionButtons({}: HeaderActionButtonsProps) {
                width="24"
                crossOrigin="anonymous"
                src="https://cdn.simpleicons.org/cloudflare"
-                alt="vercel"
+                alt="cloudflare"
              />
              <span className="mx-auto">Deploy to Cloudflare (Coming Soon)</span>
            </Button>