From fdbf9ff1f7db7fadf948031ee4e9de1e9382fce4 Mon Sep 17 00:00:00 2001 From: Chris Ijoyah Date: Tue, 12 Aug 2025 15:46:44 +0200 Subject: [PATCH 1/4] feat: add GitHub deployment functionality - Add GitHubDeploy component to handle build and file preparation - Create GitHubDeploymentDialog for repository selection and creation - Update DeployButton to include GitHub deployment option - Support both new and existing GitHub repositories - Allow choosing between public and private repositories --- app/components/deploy/DeployButton.tsx | 218 +++-- app/components/deploy/GitHubDeploy.client.tsx | 162 ++++ .../deploy/GitHubDeploymentDialog.tsx | 914 ++++++++++++++++++ 3 files changed, 1216 insertions(+), 78 deletions(-) create mode 100644 app/components/deploy/GitHubDeploy.client.tsx create mode 100644 app/components/deploy/GitHubDeploymentDialog.tsx diff --git a/app/components/deploy/DeployButton.tsx b/app/components/deploy/DeployButton.tsx index 50c06d3..a8d451d 100644 --- a/app/components/deploy/DeployButton.tsx +++ b/app/components/deploy/DeployButton.tsx @@ -10,23 +10,30 @@ import { NetlifyDeploymentLink } from '~/components/chat/NetlifyDeploymentLink.c import { VercelDeploymentLink } from '~/components/chat/VercelDeploymentLink.client'; import { useVercelDeploy } from '~/components/deploy/VercelDeploy.client'; import { useNetlifyDeploy } from '~/components/deploy/NetlifyDeploy.client'; +import { useGitHubDeploy } from '~/components/deploy/GitHubDeploy.client'; +import { GitHubDeploymentDialog } from '~/components/deploy/GitHubDeploymentDialog'; interface DeployButtonProps { onVercelDeploy?: () => Promise; onNetlifyDeploy?: () => Promise; + onGitHubDeploy?: () => Promise; } -export const DeployButton = ({ onVercelDeploy, onNetlifyDeploy }: DeployButtonProps) => { +export const DeployButton = ({ onVercelDeploy, onNetlifyDeploy, onGitHubDeploy }: DeployButtonProps) => { 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 [deployingTo, setDeployingTo] = useState<'netlify' | 'vercel' | 'github' | null>(null); const isStreaming = useStore(streamingState); const { handleVercelDeploy } = useVercelDeploy(); const { handleNetlifyDeploy } = useNetlifyDeploy(); + const { handleGitHubDeploy } = useGitHubDeploy(); + const [showGitHubDeploymentDialog, setShowGitHubDeploymentDialog] = useState(false); + const [githubDeploymentFiles, setGithubDeploymentFiles] = useState | null>(null); + const [githubProjectName, setGithubProjectName] = useState(''); const handleVercelDeployClick = async () => { setIsDeploying(true); @@ -60,87 +67,142 @@ export const DeployButton = ({ onVercelDeploy, onNetlifyDeploy }: DeployButtonPr } }; + const handleGitHubDeployClick = async () => { + setIsDeploying(true); + setDeployingTo('github'); + + try { + if (onGitHubDeploy) { + await onGitHubDeploy(); + } else { + const result = await handleGitHubDeploy(); + + if (result && result.success && result.files) { + setGithubDeploymentFiles(result.files); + setGithubProjectName(result.projectName); + setShowGitHubDeploymentDialog(true); + } + } + } finally { + setIsDeploying(false); + setDeployingTo(null); + } + }; + return ( -
- - - {isDeploying ? `Deploying to ${deployingTo}...` : 'Deploy'} - - - - +
+ + + {isDeploying ? `Deploying to ${deployingTo}...` : 'Deploy'} + + + - - {!netlifyConn.user ? 'No Netlify Account Connected' : 'Deploy to Netlify'} - {netlifyConn.user && } - + + + {!netlifyConn.user ? 'No Netlify Account Connected' : 'Deploy to Netlify'} + {netlifyConn.user && } + - - vercel - {!vercelConn.user ? 'No Vercel Account Connected' : 'Deploy to Vercel'} - {vercelConn.user && } - + + vercel + {!vercelConn.user ? 'No Vercel Account Connected' : 'Deploy to Vercel'} + {vercelConn.user && } + - - cloudflare - Deploy to Cloudflare (Coming Soon) - - - -
+ + github + Deploy to GitHub + + + + cloudflare + Deploy to Cloudflare (Coming Soon) + + + +
+ + {/* GitHub Deployment Dialog */} + {showGitHubDeploymentDialog && githubDeploymentFiles && ( + setShowGitHubDeploymentDialog(false)} + projectName={githubProjectName} + files={githubDeploymentFiles} + /> + )} + ); }; diff --git a/app/components/deploy/GitHubDeploy.client.tsx b/app/components/deploy/GitHubDeploy.client.tsx new file mode 100644 index 0000000..9f43a04 --- /dev/null +++ b/app/components/deploy/GitHubDeploy.client.tsx @@ -0,0 +1,162 @@ +import { toast } from 'react-toastify'; +import { useStore } from '@nanostores/react'; +import { workbenchStore } from '~/lib/stores/workbench'; +import { webcontainer } from '~/lib/webcontainer'; +import { path } from '~/utils/path'; +import { useState } from 'react'; +import type { ActionCallbackData } from '~/lib/runtime/message-parser'; +import { chatId } from '~/lib/persistence/useChatHistory'; +import { getLocalStorage } from '~/lib/persistence/localStorage'; + +export function useGitHubDeploy() { + const [isDeploying, setIsDeploying] = useState(false); + const currentChatId = useStore(chatId); + + const handleGitHubDeploy = async () => { + const connection = getLocalStorage('github_connection'); + + if (!connection?.token || !connection?.user) { + toast.error('Please connect your GitHub account in Settings > Connections first'); + return false; + } + + if (!currentChatId) { + toast.error('No active chat found'); + return false; + } + + try { + setIsDeploying(true); + + const artifact = workbenchStore.firstArtifact; + + if (!artifact) { + throw new Error('No active project found'); + } + + // Create a deployment artifact for visual feedback + const deploymentId = `deploy-github-project`; + workbenchStore.addArtifact({ + id: deploymentId, + messageId: deploymentId, + title: 'GitHub Deployment', + type: 'standalone', + }); + + const deployArtifact = workbenchStore.artifacts.get()[deploymentId]; + + // Notify that build is starting + deployArtifact.runner.handleDeployAction('building', 'running', { source: 'github' }); + + const actionId = 'build-' + Date.now(); + const actionData: ActionCallbackData = { + messageId: 'github 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) { + // Notify that build failed + deployArtifact.runner.handleDeployAction('building', 'failed', { + error: 'Build failed. Check the terminal for details.', + source: 'github', + }); + throw new Error('Build failed'); + } + + // Notify that build succeeded and deployment preparation is starting + deployArtifact.runner.handleDeployAction('deploying', 'running', { + source: 'github' + }); + + // Get all project files instead of just the build directory since we're deploying to a repository + const container = await webcontainer; + + // Get all files recursively - we'll deploy the entire project, not just the build directory + async function getAllFiles(dirPath: string, basePath: string = ''): Promise> { + const files: Record = {}; + const entries = await container.fs.readdir(dirPath, { withFileTypes: true }); + + for (const entry of entries) { + const fullPath = path.join(dirPath, entry.name); + // Create a relative path without the leading slash for GitHub + const relativePath = basePath ? `${basePath}/${entry.name}` : entry.name; + + // Skip node_modules, .git directories and other common excludes + if (entry.isDirectory() && ( + entry.name === 'node_modules' || + entry.name === '.git' || + entry.name === 'dist' || + entry.name === 'build' || + entry.name === '.cache' || + entry.name === '.next' + )) { + continue; + } + + if (entry.isFile()) { + // Skip binary files, large files and other common excludes + if (entry.name.endsWith('.DS_Store') || + entry.name.endsWith('.log') || + entry.name.startsWith('.env')) { + continue; + } + + try { + const content = await container.fs.readFile(fullPath, 'utf-8'); + // Store the file with its relative path, not the full system path + files[relativePath] = content; + } catch (error) { + console.warn(`Could not read file ${fullPath}:`, error); + continue; + } + } else if (entry.isDirectory()) { + const subFiles = await getAllFiles(fullPath, relativePath); + Object.assign(files, subFiles); + } + } + + return files; + } + + const fileContents = await getAllFiles('/'); + + // Show GitHub deployment dialog here - it will handle the actual deployment + // and will receive these files to deploy + + // For now, we'll just complete the deployment with a success message + // Notify that deployment preparation is complete + deployArtifact.runner.handleDeployAction('deploying', 'complete', { + source: 'github' + }); + + return { + success: true, + files: fileContents, + projectName: artifact.title || 'bolt-project' + }; + } catch (err) { + console.error('GitHub deploy error:', err); + toast.error(err instanceof Error ? err.message : 'GitHub deployment preparation failed'); + return false; + } finally { + setIsDeploying(false); + } + }; + + return { + isDeploying, + handleGitHubDeploy, + isConnected: !!getLocalStorage('github_connection')?.user, + }; +} \ No newline at end of file diff --git a/app/components/deploy/GitHubDeploymentDialog.tsx b/app/components/deploy/GitHubDeploymentDialog.tsx new file mode 100644 index 0000000..a6c11bc --- /dev/null +++ b/app/components/deploy/GitHubDeploymentDialog.tsx @@ -0,0 +1,914 @@ +import * as Dialog from '@radix-ui/react-dialog'; +import { useState, useEffect } from 'react'; +import { toast } from 'react-toastify'; +import { motion } from 'framer-motion'; +import { Octokit } from '@octokit/rest'; +import { classNames } from '~/utils/classNames'; +import { getLocalStorage } from '~/lib/persistence/localStorage'; +import type { GitHubUserResponse, GitHubRepoInfo } from '~/types/GitHub'; +import { logStore } from '~/lib/stores/logs'; +import { chatId } from '~/lib/persistence/useChatHistory'; +import { useStore } from '@nanostores/react'; +import { GitHubAuthDialog } from '~/components/@settings/tabs/connections/components/GitHubAuthDialog'; +import { SearchInput, EmptyState, StatusIndicator, Badge } from '~/components/ui'; + +interface GitHubDeploymentDialogProps { + isOpen: boolean; + onClose: () => void; + projectName: string; + files: Record; +} + +export function GitHubDeploymentDialog({ isOpen, onClose, projectName, files }: GitHubDeploymentDialogProps) { + const [repoName, setRepoName] = useState(''); + const [isPrivate, setIsPrivate] = useState(false); + const [isLoading, setIsLoading] = useState(false); + const [user, setUser] = useState(null); + const [recentRepos, setRecentRepos] = useState([]); + const [filteredRepos, setFilteredRepos] = useState([]); + const [repoSearchQuery, setRepoSearchQuery] = useState(''); + const [isFetchingRepos, setIsFetchingRepos] = useState(false); + const [showSuccessDialog, setShowSuccessDialog] = useState(false); + const [createdRepoUrl, setCreatedRepoUrl] = useState(''); + const [pushedFiles, setPushedFiles] = useState<{ path: string; size: number }[]>([]); + const [showAuthDialog, setShowAuthDialog] = useState(false); + const currentChatId = useStore(chatId); + + // Load GitHub connection on mount + useEffect(() => { + if (isOpen) { + const connection = getLocalStorage('github_connection'); + + // Set a default repository name based on the project name + setRepoName(projectName.replace(/\s+/g, '-').toLowerCase()); + + if (connection?.user && connection?.token) { + setUser(connection.user); + + // Only fetch if we have both user and token + if (connection.token.trim()) { + fetchRecentRepos(connection.token); + } + } + } + }, [isOpen, projectName]); + + // Filter repositories based on search query + useEffect(() => { + if (recentRepos.length === 0) { + setFilteredRepos([]); + return; + } + + if (!repoSearchQuery.trim()) { + setFilteredRepos(recentRepos); + return; + } + + const query = repoSearchQuery.toLowerCase().trim(); + const filtered = recentRepos.filter( + (repo) => + repo.name.toLowerCase().includes(query) || + (repo.description && repo.description.toLowerCase().includes(query)) || + (repo.language && repo.language.toLowerCase().includes(query)), + ); + + setFilteredRepos(filtered); + }, [recentRepos, repoSearchQuery]); + + const fetchRecentRepos = async (token: string) => { + if (!token) { + logStore.logError('No GitHub token available'); + toast.error('GitHub authentication required'); + return; + } + + try { + setIsFetchingRepos(true); + + // Fetch ALL repos by paginating through all pages + let allRepos: GitHubRepoInfo[] = []; + let page = 1; + let hasMore = true; + + while (hasMore) { + const requestUrl = `https://api.github.com/user/repos?sort=updated&per_page=100&page=${page}&affiliation=owner,organization_member`; + const response = await fetch(requestUrl, { + headers: { + Accept: 'application/vnd.github.v3+json', + Authorization: `Bearer ${token.trim()}`, + }, + }); + + if (!response.ok) { + let errorData: { message?: string } = {}; + + try { + errorData = await response.json(); + } catch (e) { + errorData = { message: 'Could not parse error response' }; + } + + if (response.status === 401) { + toast.error('GitHub token expired. Please reconnect your account.'); + + // Clear invalid token + const connection = getLocalStorage('github_connection'); + + if (connection) { + localStorage.removeItem('github_connection'); + setUser(null); + } + } else if (response.status === 403 && response.headers.get('x-ratelimit-remaining') === '0') { + // Rate limit exceeded + const resetTime = response.headers.get('x-ratelimit-reset'); + const resetDate = resetTime ? new Date(parseInt(resetTime) * 1000).toLocaleTimeString() : 'soon'; + toast.error(`GitHub API rate limit exceeded. Limit resets at ${resetDate}`); + } else { + logStore.logError('Failed to fetch GitHub repositories', { + status: response.status, + statusText: response.statusText, + error: errorData, + }); + toast.error(`Failed to fetch repositories: ${errorData.message || response.statusText}`); + } + + return; + } + + try { + const repos = (await response.json()) as GitHubRepoInfo[]; + allRepos = allRepos.concat(repos); + + if (repos.length < 100) { + hasMore = false; + } else { + page += 1; + } + } catch (parseError) { + logStore.logError('Failed to parse GitHub repositories response', { parseError }); + toast.error('Failed to parse repository data'); + setRecentRepos([]); + return; + } + } + + setRecentRepos(allRepos); + } catch (error) { + logStore.logError('Failed to fetch GitHub repositories', { error }); + toast.error('Failed to fetch recent repositories'); + } finally { + setIsFetchingRepos(false); + } + }; + + // Function to create a new repository or push to an existing one + const handleSubmit = async (e: React.FormEvent) => { + e.preventDefault(); + + const connection = getLocalStorage('github_connection'); + + if (!connection?.token || !connection?.user) { + toast.error('Please connect your GitHub account in Settings > Connections first'); + return; + } + + if (!repoName.trim()) { + toast.error('Repository name is required'); + return; + } + + setIsLoading(true); + + try { + // Initialize Octokit with the GitHub token + const octokit = new Octokit({ auth: connection.token }); + let repoExists = false; + + try { + // Check if the repository already exists + const { data: existingRepo } = await octokit.repos.get({ + owner: connection.user.login, + repo: repoName, + }); + + repoExists = true; + + // If we get here, the repo exists - confirm overwrite + let confirmMessage = `Repository "${repoName}" already exists. Do you want to update it? This will add or modify files in the repository.`; + + // Add visibility change warning if needed + if (existingRepo.private !== isPrivate) { + const visibilityChange = isPrivate + ? 'This will also change the repository from public to private.' + : 'This will also change the repository from private to public.'; + + confirmMessage += `\n\n${visibilityChange}`; + } + + const confirmOverwrite = window.confirm(confirmMessage); + + if (!confirmOverwrite) { + setIsLoading(false); + return; + } + + // If visibility needs to be updated + if (existingRepo.private !== isPrivate) { + await octokit.repos.update({ + owner: connection.user.login, + repo: repoName, + private: isPrivate + }); + } + + } catch (error: any) { + // 404 means repo doesn't exist, which is what we want for new repos + if (error.status !== 404) { + throw error; + } + } + + // Create repository if it doesn't exist + if (!repoExists) { + const { data: newRepo } = await octokit.repos.createForAuthenticatedUser({ + name: repoName, + private: isPrivate, + // Initialize with a README to avoid empty repository issues + auto_init: true, + // Create a .gitignore file for the project + gitignore_template: "Node", + }); + + // Set the URL for success dialog + setCreatedRepoUrl(newRepo.html_url); + + // Since we created the repo with auto_init, we need to wait for GitHub to initialize it + console.log('Created new repository with auto_init, waiting for GitHub to initialize it...'); + + // Wait a moment for GitHub to set up the initial commit + await new Promise(resolve => setTimeout(resolve, 2000)); + } else { + // Set URL for existing repo + setCreatedRepoUrl(`https://github.com/${connection.user.login}/${repoName}`); + } + + // Process files to upload + const fileEntries = Object.entries(files); + + // Filter out files and format them for display + const fileList = fileEntries.map(([filePath, content]) => { + // The paths are already properly formatted in the GitHubDeploy component + return { + path: filePath, + size: new TextEncoder().encode(content).length, + }; + }); + + setPushedFiles(fileList); + + // Now we need to handle the repository, whether it's new or existing + // Get the default branch for the repository + let defaultBranch: string; + let baseSha: string | null = null; + + try { + // For both new and existing repos, get the repository info + const { data: repo } = await octokit.repos.get({ + owner: connection.user.login, + repo: repoName, + }); + defaultBranch = repo.default_branch || 'main'; + console.log(`Repository default branch: ${defaultBranch}`); + + // For a newly created repo (or existing one), get the reference to the default branch + try { + const { data: refData } = await octokit.git.getRef({ + owner: connection.user.login, + repo: repoName, + ref: `heads/${defaultBranch}`, + }); + + baseSha = refData.object.sha; + console.log(`Found existing reference with SHA: ${baseSha}`); + + // Get the latest commit to use as a base for our tree + const { data: commitData } = await octokit.git.getCommit({ + owner: connection.user.login, + repo: repoName, + commit_sha: baseSha, + }); + + // Store the base tree SHA for tree creation + baseSha = commitData.tree.sha; + console.log(`Using base tree SHA: ${baseSha}`); + } catch (refError) { + console.error('Error getting reference:', refError); + baseSha = null; + } + } catch (repoError) { + console.error('Error getting repository info:', repoError); + defaultBranch = 'main'; + baseSha = null; + } + + try { + console.log('Creating tree for repository'); + + // Create a tree with all files + const tree = fileEntries.map(([filePath, content]) => ({ + path: filePath, // We've already formatted the paths correctly + mode: '100644' as const, // Regular file + type: 'blob' as const, + content, + })); + + console.log(`Creating tree with ${tree.length} files using base: ${baseSha || 'none'}`); + + // Create a tree with all the files, using the base tree if available + const { data: treeData } = await octokit.git.createTree({ + owner: connection.user.login, + repo: repoName, + tree, + base_tree: baseSha || undefined, + }); + + console.log('Tree created successfully', treeData.sha); + + // Get the current reference to use as parent for our commit + let parentCommitSha: string | null = null; + + try { + const { data: refData } = await octokit.git.getRef({ + owner: connection.user.login, + repo: repoName, + ref: `heads/${defaultBranch}`, + }); + parentCommitSha = refData.object.sha; + console.log(`Found parent commit: ${parentCommitSha}`); + } catch (refError) { + console.log('No reference found, this is a brand new repo', refError); + parentCommitSha = null; + } + + // Create a commit with the tree + console.log('Creating commit'); + const { data: commitData } = await octokit.git.createCommit({ + owner: connection.user.login, + repo: repoName, + message: !repoExists ? 'Initial commit from Bolt.diy' : 'Update from Bolt.diy', + tree: treeData.sha, + parents: parentCommitSha ? [parentCommitSha] : [], // Use parent if available + }); + + console.log('Commit created successfully', commitData.sha); + + // Update the reference to point to the new commit + try { + console.log(`Updating reference: heads/${defaultBranch} to ${commitData.sha}`); + await octokit.git.updateRef({ + owner: connection.user.login, + repo: repoName, + ref: `heads/${defaultBranch}`, + sha: commitData.sha, + force: true, // Use force to ensure the update works + }); + console.log('Reference updated successfully'); + } catch (refError) { + console.log('Failed to update reference, attempting to create it', refError); + + // If the reference doesn't exist, create it (shouldn't happen with auto_init, but just in case) + try { + await octokit.git.createRef({ + owner: connection.user.login, + repo: repoName, + ref: `refs/heads/${defaultBranch}`, + sha: commitData.sha, + }); + console.log('Reference created successfully'); + } catch (createRefError) { + console.error('Error creating reference:', createRefError); + const errorMsg = typeof createRefError === 'object' && createRefError !== null && 'message' in createRefError ? String(createRefError.message) : 'Unknown error'; + throw new Error(`Failed to create Git reference: ${errorMsg}`); + } + } + } catch (gitError) { + console.error('Error with git operations:', gitError); + const gitErrorMsg = typeof gitError === 'object' && gitError !== null && 'message' in gitError ? String(gitError.message) : 'Unknown error'; + throw new Error(`Failed during git operations: ${gitErrorMsg}`); + } + + // Save the repository information for this chat + localStorage.setItem(`github-repo-${currentChatId}`, JSON.stringify({ + owner: connection.user.login, + name: repoName, + url: `https://github.com/${connection.user.login}/${repoName}`, + })); + + // Show success dialog + setShowSuccessDialog(true); + } catch (error) { + console.error('Error pushing to GitHub:', error); + + // Attempt to extract more specific error information + let errorMessage = 'Failed to push to GitHub.'; + + if (error instanceof Error) { + errorMessage = error.message; + } else if (typeof error === 'object' && error !== null) { + // Octokit errors + if ('message' in error) { + errorMessage = error.message as string; + } + + // GitHub API errors + if ('documentation_url' in error) { + console.log('GitHub API documentation:', error.documentation_url); + } + } + + toast.error(`GitHub deployment failed: ${errorMessage}`); + } finally { + setIsLoading(false); + } + }; + + const handleClose = () => { + setRepoName(''); + setIsPrivate(false); + setShowSuccessDialog(false); + setCreatedRepoUrl(''); + onClose(); + }; + + const handleAuthDialogClose = () => { + setShowAuthDialog(false); + + // Refresh user data after auth + const connection = getLocalStorage('github_connection'); + if (connection?.user && connection?.token) { + setUser(connection.user); + fetchRecentRepos(connection.token); + } + }; + + // Success Dialog + if (showSuccessDialog) { + return ( + !open && handleClose()}> + + +
+ + +
+
+
+
+
+
+
+

+ Successfully pushed to GitHub +

+

+ Your code is now available on GitHub +

+
+
+ + + +
+ +
+

+ + Repository URL +

+
+ + {createdRepoUrl} + + { + navigator.clipboard.writeText(createdRepoUrl); + toast.success('URL copied to clipboard'); + }} + className="p-2 text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary dark:text-bolt-elements-textSecondary-dark dark:hover:text-bolt-elements-textPrimary-dark bg-bolt-elements-background-depth-1 dark:bg-bolt-elements-background-depth-4 rounded-lg border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark" + whileHover={{ scale: 1.05 }} + whileTap={{ scale: 0.95 }} + > +
+ +
+
+ +
+

+ + Pushed Files ({pushedFiles.length}) +

+
+ {pushedFiles.slice(0, 100).map((file) => ( +
+ {file.path} + + {(file.size / 1024).toFixed(1)} KB + +
+ ))} + {pushedFiles.length > 100 && ( +
+ +{pushedFiles.length - 100} more files +
+ )} +
+
+ +
+ +
+ View Repository + + { + navigator.clipboard.writeText(createdRepoUrl); + toast.success('URL copied to clipboard'); + }} + className="px-4 py-2 rounded-lg bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-3 text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark hover:bg-bolt-elements-background-depth-3 dark:hover:bg-bolt-elements-background-depth-4 text-sm inline-flex items-center gap-2 border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark" + whileHover={{ scale: 1.02 }} + whileTap={{ scale: 0.98 }} + > +
+ Copy URL + + + Close + +
+
+ + +
+ + + ); + } + + if (!user) { + return ( + !open && handleClose()}> + + +
+ + +
+ + + + +
+ +

+ GitHub Connection Required +

+

+ To deploy your code to GitHub, you need to connect your GitHub account first. +

+
+ + Close + + setShowAuthDialog(true)} + className="px-4 py-2 rounded-lg bg-purple-500 text-white text-sm hover:bg-purple-600 inline-flex items-center gap-2" + whileHover={{ scale: 1.02 }} + whileTap={{ scale: 0.98 }} + > +
+ Connect GitHub Account + +
+
+ + +
+ + + {/* GitHub Auth Dialog */} + + + ); + } + + return ( + !open && handleClose()}> + + +
+ + +
+
+ +
+ +
+ + Deploy to GitHub + +

+ Deploy your code to a new or existing GitHub repository +

+
+ + + +
+ +
+
+ {user.login} +
+
+
+
+
+

+ {user.name || user.login} +

+

+ @{user.login} +

+
+
+ +
+
+ +
+
+ +
+ setRepoName(e.target.value)} + placeholder="my-awesome-project" + className="w-full pl-10 px-4 py-2 rounded-lg bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-3 border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary-dark placeholder-bolt-elements-textTertiary dark:placeholder-bolt-elements-textTertiary-dark focus:outline-none focus:ring-2 focus:ring-purple-500" + required + /> +
+
+ +
+
+ + + {filteredRepos.length} of {recentRepos.length} + +
+ +
+ setRepoSearchQuery(e.target.value)} + onClear={() => setRepoSearchQuery('')} + className="bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-3 border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark text-sm" + /> +
+ + {recentRepos.length === 0 && !isFetchingRepos ? ( + + ) : ( +
+ {filteredRepos.length === 0 && repoSearchQuery.trim() !== '' ? ( + + ) : ( + filteredRepos.map((repo) => ( + setRepoName(repo.name)} + className="w-full p-3 text-left rounded-lg bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-3 hover:bg-bolt-elements-background-depth-3 dark:hover:bg-bolt-elements-background-depth-4 transition-colors group border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark hover:border-purple-500/30" + whileHover={{ scale: 1.01 }} + whileTap={{ scale: 0.99 }} + > +
+
+
+ + {repo.name} + +
+ {repo.private && ( + + Private + + )} +
+ {repo.description && ( +

+ {repo.description} +

+ )} +
+ {repo.language && ( + + {repo.language} + + )} + + {repo.stargazers_count.toLocaleString()} + + + {repo.forks_count.toLocaleString()} + + + {new Date(repo.updated_at).toLocaleDateString()} + +
+ + )) + )} +
+ )} +
+ + {isFetchingRepos && ( +
+ +
+ )} + +
+
+ setIsPrivate(e.target.checked)} + className="rounded border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark text-purple-500 focus:ring-purple-500 dark:bg-bolt-elements-background-depth-3" + /> + +
+

+ Private repositories are only visible to you and people you share them with +

+
+ +
+ + Cancel + + + {isLoading ? ( + <> +
+ Deploying... + + ) : ( + <> +
+ Deploy to GitHub + + )} + +
+ +
+ + +
+ + + {/* GitHub Auth Dialog */} + + + ); +} \ No newline at end of file From 8ecb780cff274217f677fc93ab798b54090ea381 Mon Sep 17 00:00:00 2001 From: Stijnus <72551117+Stijnus@users.noreply.github.com> Date: Fri, 29 Aug 2025 20:29:08 +0200 Subject: [PATCH 2/4] refactor: remove redundant GitHub sync functionality - Remove 'Push to GitHub' sync button from Workbench - Clean up unused parameters and imports - Improve UX by using only the proper GitHub deployment feature - Fix ESLint and Prettier formatting issues - Fix unused variable in GitHubDeploymentDialog This removes the old sync functionality in favor of the comprehensive GitHub deployment feature that builds projects before deployment. --- .../deploy/GitHubDeploymentDialog.tsx | 134 ++++++++++-------- app/components/workbench/Workbench.client.tsx | 48 ++----- 2 files changed, 85 insertions(+), 97 deletions(-) diff --git a/app/components/deploy/GitHubDeploymentDialog.tsx b/app/components/deploy/GitHubDeploymentDialog.tsx index a6c11bc..533b2f6 100644 --- a/app/components/deploy/GitHubDeploymentDialog.tsx +++ b/app/components/deploy/GitHubDeploymentDialog.tsx @@ -38,7 +38,7 @@ export function GitHubDeploymentDialog({ isOpen, onClose, projectName, files }: useEffect(() => { if (isOpen) { const connection = getLocalStorage('github_connection'); - + // Set a default repository name based on the project name setRepoName(projectName.replace(/\s+/g, '-').toLowerCase()); @@ -80,6 +80,7 @@ export function GitHubDeploymentDialog({ isOpen, onClose, projectName, files }: if (!token) { logStore.logError('No GitHub token available'); toast.error('GitHub authentication required'); + return; } @@ -105,7 +106,7 @@ export function GitHubDeploymentDialog({ isOpen, onClose, projectName, files }: try { errorData = await response.json(); - } catch (e) { + } catch { errorData = { message: 'Could not parse error response' }; } @@ -149,10 +150,11 @@ export function GitHubDeploymentDialog({ isOpen, onClose, projectName, files }: logStore.logError('Failed to parse GitHub repositories response', { parseError }); toast.error('Failed to parse repository data'); setRecentRepos([]); + return; } } - + setRecentRepos(allRepos); } catch (error) { logStore.logError('Failed to fetch GitHub repositories', { error }); @@ -184,78 +186,79 @@ export function GitHubDeploymentDialog({ isOpen, onClose, projectName, files }: // Initialize Octokit with the GitHub token const octokit = new Octokit({ auth: connection.token }); let repoExists = false; - + try { // Check if the repository already exists const { data: existingRepo } = await octokit.repos.get({ owner: connection.user.login, repo: repoName, }); - + repoExists = true; - + // If we get here, the repo exists - confirm overwrite let confirmMessage = `Repository "${repoName}" already exists. Do you want to update it? This will add or modify files in the repository.`; - + // Add visibility change warning if needed if (existingRepo.private !== isPrivate) { const visibilityChange = isPrivate ? 'This will also change the repository from public to private.' : 'This will also change the repository from private to public.'; - + confirmMessage += `\n\n${visibilityChange}`; } - + const confirmOverwrite = window.confirm(confirmMessage); - + if (!confirmOverwrite) { setIsLoading(false); return; } - + // If visibility needs to be updated if (existingRepo.private !== isPrivate) { await octokit.repos.update({ owner: connection.user.login, repo: repoName, - private: isPrivate + private: isPrivate, }); } - } catch (error: any) { // 404 means repo doesn't exist, which is what we want for new repos if (error.status !== 404) { throw error; } } - + // Create repository if it doesn't exist if (!repoExists) { const { data: newRepo } = await octokit.repos.createForAuthenticatedUser({ name: repoName, private: isPrivate, + // Initialize with a README to avoid empty repository issues auto_init: true, + // Create a .gitignore file for the project - gitignore_template: "Node", + gitignore_template: 'Node', }); - + // Set the URL for success dialog setCreatedRepoUrl(newRepo.html_url); - + // Since we created the repo with auto_init, we need to wait for GitHub to initialize it console.log('Created new repository with auto_init, waiting for GitHub to initialize it...'); - + // Wait a moment for GitHub to set up the initial commit - await new Promise(resolve => setTimeout(resolve, 2000)); + await new Promise((resolve) => setTimeout(resolve, 2000)); } else { // Set URL for existing repo setCreatedRepoUrl(`https://github.com/${connection.user.login}/${repoName}`); } - + // Process files to upload const fileEntries = Object.entries(files); - + // Filter out files and format them for display const fileList = fileEntries.map(([filePath, content]) => { // The paths are already properly formatted in the GitHubDeploy component @@ -264,14 +267,16 @@ export function GitHubDeploymentDialog({ isOpen, onClose, projectName, files }: size: new TextEncoder().encode(content).length, }; }); - + setPushedFiles(fileList); - - // Now we need to handle the repository, whether it's new or existing - // Get the default branch for the repository + + /* + * Now we need to handle the repository, whether it's new or existing + * Get the default branch for the repository + */ let defaultBranch: string; let baseSha: string | null = null; - + try { // For both new and existing repos, get the repository info const { data: repo } = await octokit.repos.get({ @@ -280,7 +285,7 @@ export function GitHubDeploymentDialog({ isOpen, onClose, projectName, files }: }); defaultBranch = repo.default_branch || 'main'; console.log(`Repository default branch: ${defaultBranch}`); - + // For a newly created repo (or existing one), get the reference to the default branch try { const { data: refData } = await octokit.git.getRef({ @@ -288,17 +293,17 @@ export function GitHubDeploymentDialog({ isOpen, onClose, projectName, files }: repo: repoName, ref: `heads/${defaultBranch}`, }); - + baseSha = refData.object.sha; console.log(`Found existing reference with SHA: ${baseSha}`); - + // Get the latest commit to use as a base for our tree const { data: commitData } = await octokit.git.getCommit({ owner: connection.user.login, repo: repoName, commit_sha: baseSha, }); - + // Store the base tree SHA for tree creation baseSha = commitData.tree.sha; console.log(`Using base tree SHA: ${baseSha}`); @@ -311,10 +316,10 @@ export function GitHubDeploymentDialog({ isOpen, onClose, projectName, files }: defaultBranch = 'main'; baseSha = null; } - + try { console.log('Creating tree for repository'); - + // Create a tree with all files const tree = fileEntries.map(([filePath, content]) => ({ path: filePath, // We've already formatted the paths correctly @@ -322,9 +327,9 @@ export function GitHubDeploymentDialog({ isOpen, onClose, projectName, files }: type: 'blob' as const, content, })); - + console.log(`Creating tree with ${tree.length} files using base: ${baseSha || 'none'}`); - + // Create a tree with all the files, using the base tree if available const { data: treeData } = await octokit.git.createTree({ owner: connection.user.login, @@ -332,12 +337,12 @@ export function GitHubDeploymentDialog({ isOpen, onClose, projectName, files }: tree, base_tree: baseSha || undefined, }); - + console.log('Tree created successfully', treeData.sha); - + // Get the current reference to use as parent for our commit let parentCommitSha: string | null = null; - + try { const { data: refData } = await octokit.git.getRef({ owner: connection.user.login, @@ -350,9 +355,10 @@ export function GitHubDeploymentDialog({ isOpen, onClose, projectName, files }: console.log('No reference found, this is a brand new repo', refError); parentCommitSha = null; } - + // Create a commit with the tree console.log('Creating commit'); + const { data: commitData } = await octokit.git.createCommit({ owner: connection.user.login, repo: repoName, @@ -360,9 +366,9 @@ export function GitHubDeploymentDialog({ isOpen, onClose, projectName, files }: tree: treeData.sha, parents: parentCommitSha ? [parentCommitSha] : [], // Use parent if available }); - + console.log('Commit created successfully', commitData.sha); - + // Update the reference to point to the new commit try { console.log(`Updating reference: heads/${defaultBranch} to ${commitData.sha}`); @@ -376,7 +382,7 @@ export function GitHubDeploymentDialog({ isOpen, onClose, projectName, files }: console.log('Reference updated successfully'); } catch (refError) { console.log('Failed to update reference, attempting to create it', refError); - + // If the reference doesn't exist, create it (shouldn't happen with auto_init, but just in case) try { await octokit.git.createRef({ @@ -388,31 +394,42 @@ export function GitHubDeploymentDialog({ isOpen, onClose, projectName, files }: console.log('Reference created successfully'); } catch (createRefError) { console.error('Error creating reference:', createRefError); - const errorMsg = typeof createRefError === 'object' && createRefError !== null && 'message' in createRefError ? String(createRefError.message) : 'Unknown error'; + + const errorMsg = + typeof createRefError === 'object' && createRefError !== null && 'message' in createRefError + ? String(createRefError.message) + : 'Unknown error'; throw new Error(`Failed to create Git reference: ${errorMsg}`); } } } catch (gitError) { console.error('Error with git operations:', gitError); - const gitErrorMsg = typeof gitError === 'object' && gitError !== null && 'message' in gitError ? String(gitError.message) : 'Unknown error'; + + const gitErrorMsg = + typeof gitError === 'object' && gitError !== null && 'message' in gitError + ? String(gitError.message) + : 'Unknown error'; throw new Error(`Failed during git operations: ${gitErrorMsg}`); } - + // Save the repository information for this chat - localStorage.setItem(`github-repo-${currentChatId}`, JSON.stringify({ - owner: connection.user.login, - name: repoName, - url: `https://github.com/${connection.user.login}/${repoName}`, - })); - + localStorage.setItem( + `github-repo-${currentChatId}`, + JSON.stringify({ + owner: connection.user.login, + name: repoName, + url: `https://github.com/${connection.user.login}/${repoName}`, + }), + ); + // Show success dialog setShowSuccessDialog(true); } catch (error) { console.error('Error pushing to GitHub:', error); - + // Attempt to extract more specific error information let errorMessage = 'Failed to push to GitHub.'; - + if (error instanceof Error) { errorMessage = error.message; } else if (typeof error === 'object' && error !== null) { @@ -420,13 +437,13 @@ export function GitHubDeploymentDialog({ isOpen, onClose, projectName, files }: if ('message' in error) { errorMessage = error.message as string; } - + // GitHub API errors if ('documentation_url' in error) { console.log('GitHub API documentation:', error.documentation_url); } } - + toast.error(`GitHub deployment failed: ${errorMessage}`); } finally { setIsLoading(false); @@ -443,9 +460,10 @@ export function GitHubDeploymentDialog({ isOpen, onClose, projectName, files }: const handleAuthDialogClose = () => { setShowAuthDialog(false); - + // Refresh user data after auth const connection = getLocalStorage('github_connection'); + if (connection?.user && connection?.token) { setUser(connection.user); fetchRecentRepos(connection.token); @@ -657,7 +675,7 @@ export function GitHubDeploymentDialog({ isOpen, onClose, projectName, files }:
- + {/* GitHub Auth Dialog */} @@ -906,9 +924,9 @@ export function GitHubDeploymentDialog({ isOpen, onClose, projectName, files }:
- + {/* GitHub Auth Dialog */} ); -} \ No newline at end of file +} diff --git a/app/components/workbench/Workbench.client.tsx b/app/components/workbench/Workbench.client.tsx index e5d3069..315f48d 100644 --- a/app/components/workbench/Workbench.client.tsx +++ b/app/components/workbench/Workbench.client.tsx @@ -22,7 +22,7 @@ import { renderLogger } from '~/utils/logger'; import { EditorPanel } from './EditorPanel'; import { Preview } from './Preview'; import useViewport from '~/lib/hooks'; -import { PushToGitHubDialog } from '~/components/@settings/tabs/connections/components/PushToGitHubDialog'; + import * as DropdownMenu from '@radix-ui/react-dropdown-menu'; import { usePreviewStore } from '~/lib/stores/previews'; import { chatStore } from '~/lib/stores/chat'; @@ -279,11 +279,17 @@ const FileModifiedDropdown = memo( ); export const Workbench = memo( - ({ chatStarted, isStreaming, metadata, updateChatMestaData, setSelectedElement }: WorkspaceProps) => { + ({ + chatStarted, + isStreaming, + metadata: _metadata, + updateChatMestaData: _updateChatMestaData, + setSelectedElement, + }: WorkspaceProps) => { renderLogger.trace('Workbench'); const [isSyncing, setIsSyncing] = useState(false); - const [isPushDialogOpen, setIsPushDialogOpen] = useState(false); + const [fileHistory, setFileHistory] = useState>({}); // const modifiedFiles = Array.from(useStore(workbenchStore.unsavedFiles).keys()); @@ -436,17 +442,6 @@ export const Workbench = memo( {isSyncing ? 'Syncing...' : 'Sync Files'}
- setIsPushDialogOpen(true)} - > -
-
- Push to GitHub -
-
@@ -493,31 +488,6 @@ export const Workbench = memo(
- setIsPushDialogOpen(false)} - onPush={async (repoName, username, token, isPrivate) => { - try { - console.log('Dialog onPush called with isPrivate =', isPrivate); - - const commitMessage = prompt('Please enter a commit message:', 'Initial commit') || 'Initial commit'; - const repoUrl = await workbenchStore.pushToGitHub(repoName, commitMessage, username, token, isPrivate); - - if (updateChatMestaData && !metadata?.gitUrl) { - updateChatMestaData({ - ...(metadata || {}), - gitUrl: repoUrl, - }); - } - - return repoUrl; - } catch (error) { - console.error('Error pushing to GitHub:', error); - toast.error('Failed to push to GitHub'); - throw error; - } - }} - /> ) ); From 8168b9b4db3588b28d43c4d4bea3a6656af32607 Mon Sep 17 00:00:00 2001 From: Stijnus <72551117+Stijnus@users.noreply.github.com> Date: Fri, 29 Aug 2025 20:32:23 +0200 Subject: [PATCH 3/4] fix: additional linting fixes for GitHub deployment components - Fix formatting issues in DeployButton.tsx - Resolve linting errors in GitHubDeploy.client.tsx - Ensure all components meet code quality standards --- app/components/deploy/DeployButton.tsx | 8 ++- app/components/deploy/GitHubDeploy.client.tsx | 58 ++++++++++--------- 2 files changed, 37 insertions(+), 29 deletions(-) diff --git a/app/components/deploy/DeployButton.tsx b/app/components/deploy/DeployButton.tsx index a8d451d..6ff6280 100644 --- a/app/components/deploy/DeployButton.tsx +++ b/app/components/deploy/DeployButton.tsx @@ -76,7 +76,7 @@ export const DeployButton = ({ onVercelDeploy, onNetlifyDeploy, onGitHubDeploy } await onGitHubDeploy(); } else { const result = await handleGitHubDeploy(); - + if (result && result.success && result.files) { setGithubDeploymentFiles(result.files); setGithubProjectName(result.projectName); @@ -129,7 +129,9 @@ export const DeployButton = ({ onVercelDeploy, onNetlifyDeploy, onGitHubDeploy } crossOrigin="anonymous" src="https://cdn.simpleicons.org/netlify" /> - {!netlifyConn.user ? 'No Netlify Account Connected' : 'Deploy to Netlify'} + + {!netlifyConn.user ? 'No Netlify Account Connected' : 'Deploy to Netlify'} + {netlifyConn.user && } @@ -196,7 +198,7 @@ export const DeployButton = ({ onVercelDeploy, onNetlifyDeploy, onGitHubDeploy } {/* GitHub Deployment Dialog */} {showGitHubDeploymentDialog && githubDeploymentFiles && ( - setShowGitHubDeploymentDialog(false)} projectName={githubProjectName} diff --git a/app/components/deploy/GitHubDeploy.client.tsx b/app/components/deploy/GitHubDeploy.client.tsx index 9f43a04..a6846f7 100644 --- a/app/components/deploy/GitHubDeploy.client.tsx +++ b/app/components/deploy/GitHubDeploy.client.tsx @@ -14,7 +14,7 @@ export function useGitHubDeploy() { const handleGitHubDeploy = async () => { const connection = getLocalStorage('github_connection'); - + if (!connection?.token || !connection?.user) { toast.error('Please connect your GitHub account in Settings > Connections first'); return false; @@ -75,8 +75,8 @@ export function useGitHubDeploy() { } // Notify that build succeeded and deployment preparation is starting - deployArtifact.runner.handleDeployAction('deploying', 'running', { - source: 'github' + deployArtifact.runner.handleDeployAction('deploying', 'running', { + source: 'github', }); // Get all project files instead of just the build directory since we're deploying to a repository @@ -89,31 +89,32 @@ export function useGitHubDeploy() { for (const entry of entries) { const fullPath = path.join(dirPath, entry.name); + // Create a relative path without the leading slash for GitHub const relativePath = basePath ? `${basePath}/${entry.name}` : entry.name; // Skip node_modules, .git directories and other common excludes - if (entry.isDirectory() && ( - entry.name === 'node_modules' || - entry.name === '.git' || - entry.name === 'dist' || - entry.name === 'build' || - entry.name === '.cache' || - entry.name === '.next' - )) { + if ( + entry.isDirectory() && + (entry.name === 'node_modules' || + entry.name === '.git' || + entry.name === 'dist' || + entry.name === 'build' || + entry.name === '.cache' || + entry.name === '.next') + ) { continue; } if (entry.isFile()) { // Skip binary files, large files and other common excludes - if (entry.name.endsWith('.DS_Store') || - entry.name.endsWith('.log') || - entry.name.startsWith('.env')) { + if (entry.name.endsWith('.DS_Store') || entry.name.endsWith('.log') || entry.name.startsWith('.env')) { continue; } - + try { const content = await container.fs.readFile(fullPath, 'utf-8'); + // Store the file with its relative path, not the full system path files[relativePath] = content; } catch (error) { @@ -130,24 +131,29 @@ export function useGitHubDeploy() { } const fileContents = await getAllFiles('/'); - - // Show GitHub deployment dialog here - it will handle the actual deployment - // and will receive these files to deploy - - // For now, we'll just complete the deployment with a success message - // Notify that deployment preparation is complete - deployArtifact.runner.handleDeployAction('deploying', 'complete', { - source: 'github' + + /* + * Show GitHub deployment dialog here - it will handle the actual deployment + * and will receive these files to deploy + */ + + /* + * For now, we'll just complete the deployment with a success message + * Notify that deployment preparation is complete + */ + deployArtifact.runner.handleDeployAction('deploying', 'complete', { + source: 'github', }); - + return { success: true, files: fileContents, - projectName: artifact.title || 'bolt-project' + projectName: artifact.title || 'bolt-project', }; } catch (err) { console.error('GitHub deploy error:', err); toast.error(err instanceof Error ? err.message : 'GitHub deployment preparation failed'); + return false; } finally { setIsDeploying(false); @@ -159,4 +165,4 @@ export function useGitHubDeploy() { handleGitHubDeploy, isConnected: !!getLocalStorage('github_connection')?.user, }; -} \ No newline at end of file +} From 10ac0ebd8af4323d5291036d56e735aaf3dbaac2 Mon Sep 17 00:00:00 2001 From: Stijnus <72551117+Stijnus@users.noreply.github.com> Date: Fri, 29 Aug 2025 20:48:44 +0200 Subject: [PATCH 4/4] fix: final formatting and code quality improvements - Apply final Prettier formatting to DeployButton.tsx - Ensure GitHubDeploy.client.tsx meets code standards - Complete code quality improvements for GitHub deployment feature --- app/components/deploy/DeployButton.tsx | 4 +- app/components/deploy/GitHubDeploy.client.tsx | 58 ++++++++++--------- 2 files changed, 35 insertions(+), 27 deletions(-) diff --git a/app/components/deploy/DeployButton.tsx b/app/components/deploy/DeployButton.tsx index c9a0177..6ff6280 100644 --- a/app/components/deploy/DeployButton.tsx +++ b/app/components/deploy/DeployButton.tsx @@ -129,7 +129,9 @@ export const DeployButton = ({ onVercelDeploy, onNetlifyDeploy, onGitHubDeploy } crossOrigin="anonymous" src="https://cdn.simpleicons.org/netlify" /> - {!netlifyConn.user ? 'No Netlify Account Connected' : 'Deploy to Netlify'} + + {!netlifyConn.user ? 'No Netlify Account Connected' : 'Deploy to Netlify'} + {netlifyConn.user && } diff --git a/app/components/deploy/GitHubDeploy.client.tsx b/app/components/deploy/GitHubDeploy.client.tsx index 9f43a04..a6846f7 100644 --- a/app/components/deploy/GitHubDeploy.client.tsx +++ b/app/components/deploy/GitHubDeploy.client.tsx @@ -14,7 +14,7 @@ export function useGitHubDeploy() { const handleGitHubDeploy = async () => { const connection = getLocalStorage('github_connection'); - + if (!connection?.token || !connection?.user) { toast.error('Please connect your GitHub account in Settings > Connections first'); return false; @@ -75,8 +75,8 @@ export function useGitHubDeploy() { } // Notify that build succeeded and deployment preparation is starting - deployArtifact.runner.handleDeployAction('deploying', 'running', { - source: 'github' + deployArtifact.runner.handleDeployAction('deploying', 'running', { + source: 'github', }); // Get all project files instead of just the build directory since we're deploying to a repository @@ -89,31 +89,32 @@ export function useGitHubDeploy() { for (const entry of entries) { const fullPath = path.join(dirPath, entry.name); + // Create a relative path without the leading slash for GitHub const relativePath = basePath ? `${basePath}/${entry.name}` : entry.name; // Skip node_modules, .git directories and other common excludes - if (entry.isDirectory() && ( - entry.name === 'node_modules' || - entry.name === '.git' || - entry.name === 'dist' || - entry.name === 'build' || - entry.name === '.cache' || - entry.name === '.next' - )) { + if ( + entry.isDirectory() && + (entry.name === 'node_modules' || + entry.name === '.git' || + entry.name === 'dist' || + entry.name === 'build' || + entry.name === '.cache' || + entry.name === '.next') + ) { continue; } if (entry.isFile()) { // Skip binary files, large files and other common excludes - if (entry.name.endsWith('.DS_Store') || - entry.name.endsWith('.log') || - entry.name.startsWith('.env')) { + if (entry.name.endsWith('.DS_Store') || entry.name.endsWith('.log') || entry.name.startsWith('.env')) { continue; } - + try { const content = await container.fs.readFile(fullPath, 'utf-8'); + // Store the file with its relative path, not the full system path files[relativePath] = content; } catch (error) { @@ -130,24 +131,29 @@ export function useGitHubDeploy() { } const fileContents = await getAllFiles('/'); - - // Show GitHub deployment dialog here - it will handle the actual deployment - // and will receive these files to deploy - - // For now, we'll just complete the deployment with a success message - // Notify that deployment preparation is complete - deployArtifact.runner.handleDeployAction('deploying', 'complete', { - source: 'github' + + /* + * Show GitHub deployment dialog here - it will handle the actual deployment + * and will receive these files to deploy + */ + + /* + * For now, we'll just complete the deployment with a success message + * Notify that deployment preparation is complete + */ + deployArtifact.runner.handleDeployAction('deploying', 'complete', { + source: 'github', }); - + return { success: true, files: fileContents, - projectName: artifact.title || 'bolt-project' + projectName: artifact.title || 'bolt-project', }; } catch (err) { console.error('GitHub deploy error:', err); toast.error(err instanceof Error ? err.message : 'GitHub deployment preparation failed'); + return false; } finally { setIsDeploying(false); @@ -159,4 +165,4 @@ export function useGitHubDeploy() { handleGitHubDeploy, isConnected: !!getLocalStorage('github_connection')?.user, }; -} \ No newline at end of file +}