feat: add netlify one-click deployment

app/components/@settings/tabs/connections/ConnectionsTab.tsx

@@ -1,6 +1,5 @@
 import React, { useState, useEffect } from 'react';
 import { logStore } from '~/lib/stores/logs';
-import { classNames } from '~/utils/classNames';
 import { motion } from 'framer-motion';
 import { toast } from 'react-toastify';
 import { GithubConnection } from './GithubConnection';
@@ -74,8 +73,6 @@ export default function ConnectionsTab() {
     tokenType: 'classic',
   });
   const [isLoading, setIsLoading] = useState(true);
-  const [isConnecting, setIsConnecting] = useState(false);
-  const [isFetchingStats, setIsFetchingStats] = useState(false);
 
   // Load saved connection on mount
   useEffect(() => {
@@ -101,8 +98,6 @@ export default function ConnectionsTab() {
 
   const fetchGitHubStats = async (token: string) => {
     try {
-      setIsFetchingStats(true);
-
       // Fetch repositories - only owned by the authenticated user
       const reposResponse = await fetch(
         'https://api.github.com/user/repos?sort=updated&per_page=10&affiliation=owner,organization_member,collaborator',
@@ -184,59 +179,9 @@ export default function ConnectionsTab() {
       logStore.logError('Failed to fetch GitHub stats', { error });
       toast.error('Failed to fetch GitHub statistics');
     } finally {
-      setIsFetchingStats(false);
-    }
-  };
-
-  const fetchGithubUser = async (token: string) => {
-    try {
-      setIsConnecting(true);
-
-      const response = await fetch('https://api.github.com/user', {
-        headers: {
-          Authorization: `Bearer ${token}`,
-        },
-      });
-
-      if (!response.ok) {
-        throw new Error('Invalid token or unauthorized');
-      }
-
-      const data = (await response.json()) as GitHubUserResponse;
-      const newConnection: GitHubConnection = {
-        user: data,
-        token,
-        tokenType: connection.tokenType,
-      };
-
-      // Save connection
-      localStorage.setItem('github_connection', JSON.stringify(newConnection));
-      setConnection(newConnection);
-
-      // Fetch additional stats
-      await fetchGitHubStats(token);
-
-      toast.success('Successfully connected to GitHub');
-    } catch (error) {
-      logStore.logError('Failed to authenticate with GitHub', { error });
-      toast.error('Failed to connect to GitHub');
-      setConnection({ user: null, token: '', tokenType: 'classic' });
-    } finally {
-      setIsConnecting(false);
     }
   };
 
-  const handleConnect = async (event: React.FormEvent) => {
-    event.preventDefault();
-    await fetchGithubUser(connection.token);
-  };
-
-  const handleDisconnect = () => {
-    localStorage.removeItem('github_connection');
-    setConnection({ user: null, token: '', tokenType: 'classic' });
-    toast.success('Disconnected from GitHub');
-  };
-
   if (isLoading) {
     return <LoadingSpinner />;
   }
@@ -259,9 +204,9 @@ export default function ConnectionsTab() {
 
       <div className="grid grid-cols-1 gap-4">
         {/* GitHub Connection */}
-        <GithubConnection/>
+        <GithubConnection />
         {/* Netlify Connection */}
-        <NetlifyConnection/>
+        <NetlifyConnection />
       </div>
     </div>
   );

app/components/@settings/tabs/connections/GithubConnection.tsx

@@ -553,4 +553,3 @@ export function GithubConnection() {
     </motion.div>
   );
 }
-                    

app/components/@settings/tabs/connections/NetlifyConnection.tsx

@@ -28,7 +28,7 @@ export function NetlifyConnection() {
 
       const sitesResponse = await fetch('https://api.netlify.com/api/v1/sites', {
         headers: {
-          'Authorization': `Bearer ${token}`,
+          Authorization: `Bearer ${token}`,
           'Content-Type': 'application/json',
         },
       });
@@ -37,8 +37,8 @@ export function NetlifyConnection() {
         throw new Error(`Failed to fetch sites: ${sitesResponse.status}`);
       }
 
-      const sites = await sitesResponse.json() as NetlifySite[];
-      
+      const sites = (await sitesResponse.json()) as NetlifySite[];
+
       const currentState = netlifyConnection.get();
       updateNetlifyConnection({
         ...currentState,
@@ -63,7 +63,7 @@ export function NetlifyConnection() {
     try {
       const response = await fetch('https://api.netlify.com/api/v1/user', {
         headers: {
-          'Authorization': `Bearer ${connection.token}`,
+          Authorization: `Bearer ${connection.token}`,
           'Content-Type': 'application/json',
         },
       });
@@ -72,12 +72,12 @@ export function NetlifyConnection() {
         throw new Error('Invalid token or unauthorized');
       }
 
-      const userData = await response.json() as NetlifyUser;
+      const userData = (await response.json()) as NetlifyUser;
       updateNetlifyConnection({
         user: userData,
         token: connection.token,
       });
-      
+
       await fetchNetlifyStats(connection.token);
       toast.success('Successfully connected to Netlify');
     } catch (error) {
@@ -105,7 +105,13 @@ export function NetlifyConnection() {
       <div className="p-6 space-y-6">
         <div className="flex items-center justify-between">
           <div className="flex items-center gap-2">
-            <img className='w-5 h-5' height="24" width="24" crossOrigin='anonymous' src="https://cdn.simpleicons.org/netlify" />
+            <img
+              className="w-5 h-5"
+              height="24"
+              width="24"
+              crossOrigin="anonymous"
+              src="https://cdn.simpleicons.org/netlify"
+            />
             <h3 className="text-base font-medium text-bolt-elements-textPrimary">Netlify Connection</h3>
           </div>
         </div>
@@ -113,9 +119,7 @@ export function NetlifyConnection() {
         {!connection.user ? (
           <div className="space-y-4">
             <div>
-              <label className="block text-sm text-bolt-elements-textSecondary mb-2">
-                Personal Access Token
-              </label>
+              <label className="block text-sm text-bolt-elements-textSecondary mb-2">Personal Access Token</label>
               <input
                 type="password"
                 value={connection.token}
@@ -190,12 +194,12 @@ export function NetlifyConnection() {
             </div>
 
             <div className="flex items-center gap-4 p-4 bg-[#F8F8F8] dark:bg-[#1A1A1A] rounded-lg">
-              <img 
-                src={connection.user.avatar_url} 
-                referrerPolicy='no-referrer' 
-                crossOrigin="anonymous" 
-                alt={connection.user.full_name} 
-                className="w-12 h-12 rounded-full border-2 border-[#00AD9F]" 
+              <img
+                src={connection.user.avatar_url}
+                referrerPolicy="no-referrer"
+                crossOrigin="anonymous"
+                alt={connection.user.full_name}
+                className="w-12 h-12 rounded-full border-2 border-[#00AD9F]"
               />
               <div>
                 <h4 className="text-sm font-medium text-bolt-elements-textPrimary">{connection.user.full_name}</h4>
@@ -231,7 +235,12 @@ export function NetlifyConnection() {
                               {site.name}
                             </h5>
                             <div className="flex items-center gap-2 mt-2 text-xs text-bolt-elements-textSecondary">
-                              <a href={site.url} target="_blank" rel="noopener noreferrer" className="hover:text-[#00AD9F]">
+                              <a
+                                href={site.url}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className="hover:text-[#00AD9F]"
+                              >
                                 {site.url}
                               </a>
                               {site.published_deploy && (
@@ -270,4 +279,4 @@ export function NetlifyConnection() {
       </div>
     </motion.div>
   );
-}
+}

app/components/header/HeaderActionButtons.client.tsx

@@ -16,7 +16,7 @@ export function HeaderActionButtons({}: HeaderActionButtonsProps) {
   const showWorkbench = useStore(workbenchStore.showWorkbench);
   const { showChat } = useStore(chatStore);
   const connection = useStore(netlifyConnection);
-  const [activePreviewIndex, setActivePreviewIndex] = useState(0);
+  const [activePreviewIndex] = useState(0);
   const previews = useStore(workbenchStore.previews);
   const activePreview = previews[activePreviewIndex];
   const [isDeploying, setIsDeploying] = useState(false);
@@ -31,26 +31,27 @@ export function HeaderActionButtons({}: HeaderActionButtonsProps) {
 
     try {
       setIsDeploying(true);
+
       const artifact = workbenchStore.firstArtifact;
-      
+
       if (!artifact) {
         throw new Error('No active project found');
       }
 
       const actionId = 'build-' + Date.now();
       const actionData: ActionCallbackData = {
-        messageId: "netlify build",
+        messageId: 'netlify 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);
 
@@ -60,17 +61,21 @@ export function HeaderActionButtons({}: HeaderActionButtonsProps) {
 
       // 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;
@@ -79,7 +84,7 @@ export function HeaderActionButtons({}: HeaderActionButtonsProps) {
             Object.assign(files, subFiles);
           }
         }
-        
+
         return files;
       }
 
@@ -96,12 +101,12 @@ export function HeaderActionButtons({}: HeaderActionButtonsProps) {
           siteId: existingSiteId || undefined,
           files: fileContents,
           token: connection.token,
-          chatId: artifact.id
+          chatId: artifact.id,
         }),
       });
 
-      const data = await response.json() as any;
-      
+      const data = (await response.json()) as any;
+
       if (!response.ok || !data.deploy || !data.site) {
         console.error('Invalid deploy response:', data);
         throw new Error(data.error || 'Invalid deployment response');
@@ -114,35 +119,38 @@ export function HeaderActionButtons({}: HeaderActionButtonsProps) {
 
       while (attempts < maxAttempts) {
         try {
-          const statusResponse = await fetch(`https://api.netlify.com/api/v1/sites/${data.site.id}/deploys/${data.deploy.id}`, {
-            headers: {
-              'Authorization': `Bearer ${connection.token}`,
+          const statusResponse = await fetch(
+            `https://api.netlify.com/api/v1/sites/${data.site.id}/deploys/${data.deploy.id}`,
+            {
+              headers: {
+                Authorization: `Bearer ${connection.token}`,
+              },
             },
-          });
-          
-          deploymentStatus = await statusResponse.json() as any;
-          
+          );
+
+          deploymentStatus = (await statusResponse.json()) as any;
+
           if (deploymentStatus.state === 'ready' || deploymentStatus.state === 'uploaded') {
             break;
           }
-          
+
           if (deploymentStatus.state === 'error') {
             throw new Error('Deployment failed: ' + (deploymentStatus.error_message || 'Unknown error'));
           }
-          
+
           attempts++;
-          await new Promise(resolve => setTimeout(resolve, 1000));
+          await new Promise((resolve) => setTimeout(resolve, 1000));
         } catch (error) {
           console.error('Status check error:', error);
           attempts++;
-          await new Promise(resolve => setTimeout(resolve, 2000));
+          await new Promise((resolve) => setTimeout(resolve, 2000));
         }
       }
 
       if (attempts >= maxAttempts) {
         throw new Error('Deployment timed out');
       }
-      
+
       // Store the site ID if it's a new site
       if (data.site) {
         localStorage.setItem(`netlify-site-${artifact.id}`, data.site.id);
@@ -151,15 +159,15 @@ export function HeaderActionButtons({}: HeaderActionButtonsProps) {
       toast.success(
         <div>
           Deployed successfully!{' '}
-          <a 
-            href={deploymentStatus.ssl_url || deploymentStatus.url} 
-            target="_blank" 
+          <a
+            href={deploymentStatus.ssl_url || deploymentStatus.url}
+            target="_blank"
             rel="noopener noreferrer"
             className="underline"
           >
             View site
           </a>
-        </div>
+        </div>,
       );
     } catch (error) {
       console.error('Deploy error:', error);
@@ -172,11 +180,11 @@ export function HeaderActionButtons({}: HeaderActionButtonsProps) {
   return (
     <div className="flex">
       <div className="flex border border-bolt-elements-borderColor rounded-md overflow-hidden mr-2 text-sm">
-        <Button 
-          active 
+        <Button
+          active
           disabled={isDeploying || !activePreview}
           onClick={handleDeploy}
-          className='px-4 hover:bg-bolt-elements-item-backgroundActive'
+          className="px-4 hover:bg-bolt-elements-item-backgroundActive"
         >
           {isDeploying ? 'Deploying...' : 'Deploy'}
         </Button>
@@ -222,15 +230,17 @@ interface ButtonProps {
 function Button({ active = false, disabled = false, children, onClick, className }: ButtonProps) {
   return (
     <button
-      className={classNames('flex items-center p-1.5', {
-        'bg-bolt-elements-item-backgroundDefault hover:bg-bolt-elements-item-backgroundActive text-bolt-elements-textTertiary hover:text-bolt-elements-textPrimary':
-          !active,
-        'bg-bolt-elements-item-backgroundAccent text-bolt-elements-item-contentAccent': active && !disabled,
-        'bg-bolt-elements-item-backgroundDefault text-alpha-gray-20 dark:text-alpha-white-20 cursor-not-allowed':
-          disabled,
-      },
-      className
-    )}
+      className={classNames(
+        'flex items-center p-1.5',
+        {
+          'bg-bolt-elements-item-backgroundDefault hover:bg-bolt-elements-item-backgroundActive text-bolt-elements-textTertiary hover:text-bolt-elements-textPrimary':
+            !active,
+          'bg-bolt-elements-item-backgroundAccent text-bolt-elements-item-contentAccent': active && !disabled,
+          'bg-bolt-elements-item-backgroundDefault text-alpha-gray-20 dark:text-alpha-white-20 cursor-not-allowed':
+            disabled,
+        },
+        className,
+      )}
       onClick={onClick}
     >
       {children}

app/lib/runtime/action-runner.ts

@@ -159,6 +159,7 @@ export class ActionRunner {
         }
         case 'build': {
           const buildOutput = await this.#runBuildAction(action);
+
           // Store build output for deployment
           this.buildOutput = buildOutput;
           break;
@@ -318,16 +319,17 @@ export class ActionRunner {
     }
 
     const webcontainer = await this.#webcontainer;
+
     // Create a new terminal specifically for the build
     const buildProcess = await webcontainer.spawn('npm', ['run', 'build']);
-    
+
     let output = '';
     buildProcess.output.pipeTo(
       new WritableStream({
         write(data) {
           output += data;
         },
-      })
+      }),
     );
 
     const exitCode = await buildProcess.exit;
@@ -342,7 +344,7 @@ export class ActionRunner {
     return {
       path: buildDir,
       exitCode,
-      output
+      output,
     };
   }
 }

app/lib/stores/netlify.ts

@@ -24,4 +24,4 @@ export const updateNetlifyConnection = (updates: Partial<NetlifyConnection>) =>
   if (typeof window !== 'undefined') {
     localStorage.setItem('netlify_connection', JSON.stringify(newState));
   }
-};
+};

app/routes/api.deploy.ts

@@ -10,7 +10,8 @@ interface DeployRequestBody {
 
 export async function action({ request }: ActionFunctionArgs) {
   try {
-    const { siteId, files, token, chatId } = await request.json() as DeployRequestBody & { token: string };
+    const { siteId, files, token, chatId } = (await request.json()) as DeployRequestBody & { token: string };
+
     if (!token) {
       return json({ error: 'Not connected to Netlify' }, { status: 401 });
     }
@@ -24,81 +25,82 @@ export async function action({ request }: ActionFunctionArgs) {
       const createSiteResponse = await fetch('https://api.netlify.com/api/v1/sites', {
         method: 'POST',
         headers: {
-          'Authorization': `Bearer ${token}`,
+          Authorization: `Bearer ${token}`,
           'Content-Type': 'application/json',
         },
         body: JSON.stringify({
           name: siteName,
           custom_domain: null,
-        })
+        }),
       });
 
       if (!createSiteResponse.ok) {
         return json({ error: 'Failed to create site' }, { status: 400 });
       }
 
-      const newSite = await createSiteResponse.json() as any;
+      const newSite = (await createSiteResponse.json()) as any;
       targetSiteId = newSite.id;
       siteInfo = {
         id: newSite.id,
         name: newSite.name,
         url: newSite.url,
-        chatId
+        chatId,
       };
     } else {
       // Get existing site info
       if (targetSiteId) {
         const siteResponse = await fetch(`https://api.netlify.com/api/v1/sites/${targetSiteId}`, {
           headers: {
-            'Authorization': `Bearer ${token}`,
+            Authorization: `Bearer ${token}`,
           },
         });
-      
+
         if (siteResponse.ok) {
-          const existingSite = await siteResponse.json() as any;
+          const existingSite = (await siteResponse.json()) as any;
           siteInfo = {
             id: existingSite.id,
             name: existingSite.name,
             url: existingSite.url,
-            chatId
+            chatId,
           };
         } else {
           targetSiteId = undefined;
         }
       }
-    
+
       // If no siteId provided or site doesn't exist, create a new site
       if (!targetSiteId) {
         const siteName = `bolt-diy-${chatId}-${Date.now()}`;
         const createSiteResponse = await fetch('https://api.netlify.com/api/v1/sites', {
           method: 'POST',
           headers: {
-            'Authorization': `Bearer ${token}`,
+            Authorization: `Bearer ${token}`,
             'Content-Type': 'application/json',
           },
           body: JSON.stringify({
             name: siteName,
             custom_domain: null,
-          })
+          }),
         });
-      
+
         if (!createSiteResponse.ok) {
           return json({ error: 'Failed to create site' }, { status: 400 });
         }
-      
-        const newSite = await createSiteResponse.json() as any;
+
+        const newSite = (await createSiteResponse.json()) as any;
         targetSiteId = newSite.id;
         siteInfo = {
           id: newSite.id,
           name: newSite.name,
           url: newSite.url,
-          chatId
+          chatId,
         };
       }
     }
 
     // Create file digests
     const fileDigests: Record<string, string> = {};
+
     for (const [filePath, content] of Object.entries(files)) {
       // Ensure file path starts with a forward slash
       const normalizedPath = filePath.startsWith('/') ? filePath : '/' + filePath;
@@ -110,7 +112,7 @@ export async function action({ request }: ActionFunctionArgs) {
     const deployResponse = await fetch(`https://api.netlify.com/api/v1/sites/${targetSiteId}/deploys`, {
       method: 'POST',
       headers: {
-        'Authorization': `Bearer ${token}`,
+        Authorization: `Bearer ${token}`,
         'Content-Type': 'application/json',
       },
       body: JSON.stringify({
@@ -120,15 +122,15 @@ export async function action({ request }: ActionFunctionArgs) {
         draft: false, // Change this to false for production deployments
         function_schedules: [],
         required: Object.keys(fileDigests), // Add this line
-        framework: null
-      })
+        framework: null,
+      }),
     });
 
     if (!deployResponse.ok) {
       return json({ error: 'Failed to create deployment' }, { status: 400 });
     }
 
-    const deploy = await deployResponse.json() as any;
+    const deploy = (await deployResponse.json()) as any;
     let retryCount = 0;
     const maxRetries = 60;
 
@@ -136,41 +138,45 @@ export async function action({ request }: ActionFunctionArgs) {
     while (retryCount < maxRetries) {
       const statusResponse = await fetch(`https://api.netlify.com/api/v1/sites/${targetSiteId}/deploys/${deploy.id}`, {
         headers: {
-          'Authorization': `Bearer ${token}`,
+          Authorization: `Bearer ${token}`,
         },
       });
-      
-      const status = await statusResponse.json() as any;
-      
+
+      const status = (await statusResponse.json()) as any;
+
       if (status.state === 'prepared' || status.state === 'uploaded') {
         // Upload all files regardless of required array
         for (const [filePath, content] of Object.entries(files)) {
           const normalizedPath = filePath.startsWith('/') ? filePath : '/' + filePath;
-          
+
           let uploadSuccess = false;
           let uploadRetries = 0;
-          
+
           while (!uploadSuccess && uploadRetries < 3) {
             try {
-              const uploadResponse = await fetch(`https://api.netlify.com/api/v1/deploys/${deploy.id}/files${normalizedPath}`, {
-                method: 'PUT',
-                headers: {
-                  'Authorization': `Bearer ${token}`,
-                  'Content-Type': 'application/octet-stream',
+              const uploadResponse = await fetch(
+                `https://api.netlify.com/api/v1/deploys/${deploy.id}/files${normalizedPath}`,
+                {
+                  method: 'PUT',
+                  headers: {
+                    Authorization: `Bearer ${token}`,
+                    'Content-Type': 'application/octet-stream',
+                  },
+                  body: content,
                 },
-                body: content,
-              });
+              );
 
               uploadSuccess = uploadResponse.ok;
+
               if (!uploadSuccess) {
                 console.error('Upload failed:', await uploadResponse.text());
                 uploadRetries++;
-                await new Promise(resolve => setTimeout(resolve, 2000));
+                await new Promise((resolve) => setTimeout(resolve, 2000));
               }
             } catch (error) {
               console.error('Upload error:', error);
               uploadRetries++;
-              await new Promise(resolve => setTimeout(resolve, 2000));
+              await new Promise((resolve) => setTimeout(resolve, 2000));
             }
           }
 
@@ -179,18 +185,18 @@ export async function action({ request }: ActionFunctionArgs) {
           }
         }
       }
-      
+
       if (status.state === 'ready') {
         // Only return after files are uploaded
         if (Object.keys(files).length === 0 || status.summary?.status === 'ready') {
-          return json({ 
-            success: true, 
+          return json({
+            success: true,
             deploy: {
               id: status.id,
               state: status.state,
-              url: status.ssl_url || status.url
+              url: status.ssl_url || status.url,
             },
-            site: siteInfo
+            site: siteInfo,
           });
         }
       }
@@ -200,7 +206,7 @@ export async function action({ request }: ActionFunctionArgs) {
       }
 
       retryCount++;
-      await new Promise(resolve => setTimeout(resolve, 1000));
+      await new Promise((resolve) => setTimeout(resolve, 1000));
     }
 
     if (retryCount >= maxRetries) {
@@ -208,16 +214,16 @@ export async function action({ request }: ActionFunctionArgs) {
     }
 
     // Make sure we're returning the deploy ID and site info
-    return json({ 
-      success: true, 
+    return json({
+      success: true,
       deploy: {
         id: deploy.id,
         state: deploy.state,
       },
-      site: siteInfo
+      site: siteInfo,
     });
   } catch (error) {
     console.error('Deploy error:', error);
     return json({ error: 'Deployment failed' }, { status: 500 });
   }
-}
+}

app/types/netlify.ts

@@ -38,4 +38,4 @@ export interface NetlifySiteInfo {
   name: string;
   url: string;
   chatId: string;
-}
+}

uno.config.ts

@@ -98,9 +98,7 @@ const COLOR_PRIMITIVES = {
 };
 
 export default defineConfig({
-  safelist: [
-    ...Object.keys(customIconCollection[collectionName] || {}).map(x => `i-bolt:${x}`)
-  ],
+  safelist: [...Object.keys(customIconCollection[collectionName] || {}).map((x) => `i-bolt:${x}`)],
   shortcuts: {
     'bolt-ease-cubic-bezier': 'ease-[cubic-bezier(0.4,0,0.2,1)]',
     'transition-theme': 'transition-[background-color,border-color,color] duration-150 bolt-ease-cubic-bezier',