mirror of
https://github.com/stackblitz-labs/bolt.diy
synced 2025-06-26 18:26:38 +00:00
lint
This commit is contained in:
Strider Wilson
parent
7ae7896b8e
commit
5e0be4c26d
@ -53,7 +53,7 @@ export function DeployChatButton() {
|
|||||||
|
|
||||||
const zipContents = event.target.result as string;
|
const zipContents = event.target.result as string;
|
||||||
const directoryToFind = 'supabase';
|
const directoryToFind = 'supabase';
|
||||||
|
|
||||||
if (zipContents.includes(directoryToFind)) {
|
if (zipContents.includes(directoryToFind)) {
|
||||||
setDatabaseFound(true);
|
setDatabaseFound(true);
|
||||||
} else {
|
} else {
|
||||||
|
|||||||
@ -35,16 +35,21 @@ const DeployChatModal = ({
|
|||||||
className="fixed inset-0 bg-black bg-opacity-50 backdrop-blur-sm z-40 flex items-center justify-center"
|
className="fixed inset-0 bg-black bg-opacity-50 backdrop-blur-sm z-40 flex items-center justify-center"
|
||||||
onClick={handleOverlayClick}
|
onClick={handleOverlayClick}
|
||||||
>
|
>
|
||||||
<div className="bg-bolt-elements-background-depth-1 rounded-lg p-8 max-w-2xl w-full z-50 border border-bolt-elements-borderColor overflow-y-auto max-h-[95vh]" onClick={(e) => e.stopPropagation()}>
|
<div
|
||||||
|
className="bg-bolt-elements-background-depth-1 rounded-lg p-8 max-w-2xl w-full z-50 border border-bolt-elements-borderColor overflow-y-auto max-h-[95vh]"
|
||||||
|
onClick={(e) => e.stopPropagation()}
|
||||||
|
>
|
||||||
{status === DeployStatus.Succeeded ? (
|
{status === DeployStatus.Succeeded ? (
|
||||||
<DeploymentSuccessful deploySettings={deploySettings} setIsModalOpen={setIsModalOpen} />
|
<DeploymentSuccessful deploySettings={deploySettings} setIsModalOpen={setIsModalOpen} />
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
<h2 className="text-2xl font-bold mb-6 text-bolt-elements-textPrimary text-center">
|
<h2 className="text-2xl font-bold mb-6 text-bolt-elements-textPrimary text-center">
|
||||||
Deploy Your Application
|
Deploy Your Application
|
||||||
</h2>
|
</h2>
|
||||||
<div className="text-center mb-6 text-bolt-elements-textSecondary">
|
<div className="text-center mb-6 text-bolt-elements-textSecondary">
|
||||||
<p className="mb-2">Deploy your chat application to production using Netlify{databaseFound ? ' and Supabase' : ''}.</p>
|
<p className="mb-2">
|
||||||
|
Deploy your chat application to production using Netlify{databaseFound ? ' and Supabase' : ''}.
|
||||||
|
</p>
|
||||||
<p className="mb-2">This process will:</p>
|
<p className="mb-2">This process will:</p>
|
||||||
<div className="flex justify-center">
|
<div className="flex justify-center">
|
||||||
<ul className="text-left list-disc list-inside mb-4 inline-block">
|
<ul className="text-left list-disc list-inside mb-4 inline-block">
|
||||||
@ -59,25 +64,28 @@ const DeployChatModal = ({
|
|||||||
<div className="mb-8 p-4 bg-bolt-elements-background-depth-2 rounded-lg border border-bolt-elements-borderColor">
|
<div className="mb-8 p-4 bg-bolt-elements-background-depth-2 rounded-lg border border-bolt-elements-borderColor">
|
||||||
<h3 className="text-sm font-medium text-bolt-elements-textPrimary mb-2">Before you begin:</h3>
|
<h3 className="text-sm font-medium text-bolt-elements-textPrimary mb-2">Before you begin:</h3>
|
||||||
<p className="text-xs text-bolt-elements-textSecondary mb-3 whitespace-pre-wrap">
|
<p className="text-xs text-bolt-elements-textSecondary mb-3 whitespace-pre-wrap">
|
||||||
You'll need accounts with both Netlify and {databaseFound ? 'Supabase ' : ''}to deploy your application. If you haven't already, please sign up using the links below:
|
You'll need accounts with both Netlify and {databaseFound ? 'Supabase ' : ''}to deploy your
|
||||||
|
application. If you haven't already, please sign up using the links below:
|
||||||
</p>
|
</p>
|
||||||
<div className="flex flex-col gap-2">
|
<div className="flex flex-col gap-2">
|
||||||
<a
|
<a
|
||||||
href="https://app.netlify.com/signup"
|
href="https://app.netlify.com/signup"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener noreferrer"
|
rel="noopener noreferrer"
|
||||||
className="text-xs text-green-500 hover:text-green-600 transition-colors"
|
className="text-xs text-green-500 hover:text-green-600 transition-colors"
|
||||||
>
|
>
|
||||||
→ Sign up for Netlify
|
→ Sign up for Netlify
|
||||||
</a>
|
</a>
|
||||||
{databaseFound && <a
|
{databaseFound && (
|
||||||
href="https://supabase.com/dashboard/sign-up"
|
<a
|
||||||
target="_blank"
|
href="https://supabase.com/dashboard/sign-up"
|
||||||
rel="noopener noreferrer"
|
target="_blank"
|
||||||
className="text-xs text-green-500 hover:text-green-600 transition-colors"
|
rel="noopener noreferrer"
|
||||||
>
|
className="text-xs text-green-500 hover:text-green-600 transition-colors"
|
||||||
→ Sign up for Supabase
|
>
|
||||||
</a>}
|
→ Sign up for Supabase
|
||||||
|
</a>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -215,121 +223,121 @@ const DeployChatModal = ({
|
|||||||
|
|
||||||
{databaseFound && (
|
{databaseFound && (
|
||||||
<>
|
<>
|
||||||
<div>
|
<div>
|
||||||
<label className="block mb-2 text-sm font-medium text-bolt-elements-textPrimary">
|
<label className="block mb-2 text-sm font-medium text-bolt-elements-textPrimary">
|
||||||
Supabase Database URL
|
Supabase Database URL
|
||||||
</label>
|
</label>
|
||||||
<div className="w-full mb-2">
|
<div className="w-full mb-2">
|
||||||
<p className="text-xs text-bolt-elements-textSecondary whitespace-pre-wrap">
|
<p className="text-xs text-bolt-elements-textSecondary whitespace-pre-wrap">
|
||||||
The URL of your Supabase project, used to connect to your database.
|
The URL of your Supabase project, used to connect to your database.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
|
||||||
<input
|
|
||||||
name="supabaseDatabaseURL"
|
|
||||||
className="w-full p-3 border rounded-lg bg-bolt-elements-background-depth-2 text-bolt-elements-textPrimary border-bolt-elements-borderColor focus:ring-2 focus:ring-green-500 focus:border-transparent"
|
|
||||||
value={deploySettings?.supabase?.databaseURL}
|
|
||||||
placeholder="https://abc...def.supabase.co"
|
|
||||||
onChange={(e) => {
|
|
||||||
const supabase = {
|
|
||||||
databaseURL: e.target.value,
|
|
||||||
anonKey: deploySettings?.supabase?.anonKey || '',
|
|
||||||
serviceRoleKey: deploySettings?.supabase?.serviceRoleKey || '',
|
|
||||||
postgresURL: deploySettings?.supabase?.postgresURL || '',
|
|
||||||
};
|
|
||||||
setDeploySettings({
|
|
||||||
...deploySettings,
|
|
||||||
supabase,
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
<input
|
||||||
|
name="supabaseDatabaseURL"
|
||||||
|
className="w-full p-3 border rounded-lg bg-bolt-elements-background-depth-2 text-bolt-elements-textPrimary border-bolt-elements-borderColor focus:ring-2 focus:ring-green-500 focus:border-transparent"
|
||||||
|
value={deploySettings?.supabase?.databaseURL}
|
||||||
|
placeholder="https://abc...def.supabase.co"
|
||||||
|
onChange={(e) => {
|
||||||
|
const supabase = {
|
||||||
|
databaseURL: e.target.value,
|
||||||
|
anonKey: deploySettings?.supabase?.anonKey || '',
|
||||||
|
serviceRoleKey: deploySettings?.supabase?.serviceRoleKey || '',
|
||||||
|
postgresURL: deploySettings?.supabase?.postgresURL || '',
|
||||||
|
};
|
||||||
|
setDeploySettings({
|
||||||
|
...deploySettings,
|
||||||
|
supabase,
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label className="block mb-2 text-sm font-medium text-bolt-elements-textPrimary">
|
<label className="block mb-2 text-sm font-medium text-bolt-elements-textPrimary">
|
||||||
Supabase Anonymous Key
|
Supabase Anonymous Key
|
||||||
</label>
|
</label>
|
||||||
<div className="w-full mb-2">
|
<div className="w-full mb-2">
|
||||||
<p className="text-xs text-bolt-elements-textSecondary whitespace-pre-wrap">
|
<p className="text-xs text-bolt-elements-textSecondary whitespace-pre-wrap">
|
||||||
Public API key for client-side database access with restricted permissions.
|
Public API key for client-side database access with restricted permissions.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
|
||||||
<input
|
|
||||||
name="supabaseAnonKey"
|
|
||||||
className="w-full p-3 border rounded-lg bg-bolt-elements-background-depth-2 text-bolt-elements-textPrimary border-bolt-elements-borderColor focus:ring-2 focus:ring-green-500 focus:border-transparent"
|
|
||||||
value={deploySettings?.supabase?.anonKey}
|
|
||||||
placeholder="ey..."
|
|
||||||
onChange={(e) => {
|
|
||||||
const supabase = {
|
|
||||||
databaseURL: deploySettings?.supabase?.databaseURL || '',
|
|
||||||
anonKey: e.target.value,
|
|
||||||
serviceRoleKey: deploySettings?.supabase?.serviceRoleKey || '',
|
|
||||||
postgresURL: deploySettings?.supabase?.postgresURL || '',
|
|
||||||
};
|
|
||||||
setDeploySettings({
|
|
||||||
...deploySettings,
|
|
||||||
supabase,
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
<input
|
||||||
|
name="supabaseAnonKey"
|
||||||
|
className="w-full p-3 border rounded-lg bg-bolt-elements-background-depth-2 text-bolt-elements-textPrimary border-bolt-elements-borderColor focus:ring-2 focus:ring-green-500 focus:border-transparent"
|
||||||
|
value={deploySettings?.supabase?.anonKey}
|
||||||
|
placeholder="ey..."
|
||||||
|
onChange={(e) => {
|
||||||
|
const supabase = {
|
||||||
|
databaseURL: deploySettings?.supabase?.databaseURL || '',
|
||||||
|
anonKey: e.target.value,
|
||||||
|
serviceRoleKey: deploySettings?.supabase?.serviceRoleKey || '',
|
||||||
|
postgresURL: deploySettings?.supabase?.postgresURL || '',
|
||||||
|
};
|
||||||
|
setDeploySettings({
|
||||||
|
...deploySettings,
|
||||||
|
supabase,
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label className="block mb-2 text-sm font-medium text-bolt-elements-textPrimary">
|
<label className="block mb-2 text-sm font-medium text-bolt-elements-textPrimary">
|
||||||
Supabase Service Role Key
|
Supabase Service Role Key
|
||||||
</label>
|
</label>
|
||||||
<div className="w-full mb-2">
|
<div className="w-full mb-2">
|
||||||
<p className="text-xs text-bolt-elements-textSecondary whitespace-pre-wrap">
|
<p className="text-xs text-bolt-elements-textSecondary whitespace-pre-wrap">
|
||||||
Admin API key for server-side operations with full database access.
|
Admin API key for server-side operations with full database access.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
|
||||||
<input
|
|
||||||
name="supabaseServiceRoleKey"
|
|
||||||
className="w-full p-3 border rounded-lg bg-bolt-elements-background-depth-2 text-bolt-elements-textPrimary border-bolt-elements-borderColor focus:ring-2 focus:ring-green-500 focus:border-transparent"
|
|
||||||
value={deploySettings?.supabase?.serviceRoleKey}
|
|
||||||
placeholder="ey..."
|
|
||||||
onChange={(e) => {
|
|
||||||
const supabase = {
|
|
||||||
databaseURL: deploySettings?.supabase?.databaseURL || '',
|
|
||||||
anonKey: deploySettings?.supabase?.anonKey || '',
|
|
||||||
serviceRoleKey: e.target.value,
|
|
||||||
postgresURL: deploySettings?.supabase?.postgresURL || '',
|
|
||||||
};
|
|
||||||
setDeploySettings({
|
|
||||||
...deploySettings,
|
|
||||||
supabase,
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
<input
|
||||||
|
name="supabaseServiceRoleKey"
|
||||||
|
className="w-full p-3 border rounded-lg bg-bolt-elements-background-depth-2 text-bolt-elements-textPrimary border-bolt-elements-borderColor focus:ring-2 focus:ring-green-500 focus:border-transparent"
|
||||||
|
value={deploySettings?.supabase?.serviceRoleKey}
|
||||||
|
placeholder="ey..."
|
||||||
|
onChange={(e) => {
|
||||||
|
const supabase = {
|
||||||
|
databaseURL: deploySettings?.supabase?.databaseURL || '',
|
||||||
|
anonKey: deploySettings?.supabase?.anonKey || '',
|
||||||
|
serviceRoleKey: e.target.value,
|
||||||
|
postgresURL: deploySettings?.supabase?.postgresURL || '',
|
||||||
|
};
|
||||||
|
setDeploySettings({
|
||||||
|
...deploySettings,
|
||||||
|
supabase,
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label className="block mb-2 text-sm font-medium text-bolt-elements-textPrimary">
|
<label className="block mb-2 text-sm font-medium text-bolt-elements-textPrimary">
|
||||||
Supabase Postgres URL
|
Supabase Postgres URL
|
||||||
</label>
|
</label>
|
||||||
<div className="w-full mb-2">
|
<div className="w-full mb-2">
|
||||||
<p className="text-xs text-bolt-elements-textSecondary whitespace-pre-wrap">
|
<p className="text-xs text-bolt-elements-textSecondary whitespace-pre-wrap">
|
||||||
Direct connection URL to your Postgres database for advanced operations.
|
Direct connection URL to your Postgres database for advanced operations.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
|
||||||
<input
|
|
||||||
name="supabasePostgresURL"
|
|
||||||
className="w-full p-3 border rounded-lg bg-bolt-elements-background-depth-2 text-bolt-elements-textPrimary border-bolt-elements-borderColor focus:ring-2 focus:ring-green-500 focus:border-transparent"
|
|
||||||
value={deploySettings?.supabase?.postgresURL}
|
|
||||||
placeholder="postgresql://postgres:<password>@db.abc...def.supabase.co:5432/postgres"
|
|
||||||
onChange={(e) => {
|
|
||||||
const supabase = {
|
|
||||||
databaseURL: deploySettings?.supabase?.databaseURL || '',
|
|
||||||
anonKey: deploySettings?.supabase?.anonKey || '',
|
|
||||||
serviceRoleKey: deploySettings?.supabase?.serviceRoleKey || '',
|
|
||||||
postgresURL: e.target.value,
|
|
||||||
};
|
|
||||||
setDeploySettings({
|
|
||||||
...deploySettings,
|
|
||||||
supabase,
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
<input
|
||||||
|
name="supabasePostgresURL"
|
||||||
|
className="w-full p-3 border rounded-lg bg-bolt-elements-background-depth-2 text-bolt-elements-textPrimary border-bolt-elements-borderColor focus:ring-2 focus:ring-green-500 focus:border-transparent"
|
||||||
|
value={deploySettings?.supabase?.postgresURL}
|
||||||
|
placeholder="postgresql://postgres:<password>@db.abc...def.supabase.co:5432/postgres"
|
||||||
|
onChange={(e) => {
|
||||||
|
const supabase = {
|
||||||
|
databaseURL: deploySettings?.supabase?.databaseURL || '',
|
||||||
|
anonKey: deploySettings?.supabase?.anonKey || '',
|
||||||
|
serviceRoleKey: deploySettings?.supabase?.serviceRoleKey || '',
|
||||||
|
postgresURL: e.target.value,
|
||||||
|
};
|
||||||
|
setDeploySettings({
|
||||||
|
...deploySettings,
|
||||||
|
supabase,
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,29 +1,33 @@
|
|||||||
const DeploymentSuccessful = ({ deploySettings, setIsModalOpen }: { deploySettings: any, setIsModalOpen: (isOpen: boolean) => void }) => {
|
const DeploymentSuccessful = ({
|
||||||
return (
|
deploySettings,
|
||||||
<>
|
setIsModalOpen,
|
||||||
<h2 className="text-2xl font-bold mb-6 text-bolt-elements-textPrimary text-center">
|
}: {
|
||||||
Deployment Succeeded! 🎉
|
deploySettings: any;
|
||||||
</h2>
|
setIsModalOpen: (isOpen: boolean) => void;
|
||||||
<div className="text-center">
|
}) => {
|
||||||
<p className="text-bolt-elements-textSecondary mb-6">
|
return (
|
||||||
Your application has been successfully deployed. You can now access it at the URL below.
|
<>
|
||||||
</p>
|
<h2 className="text-2xl font-bold mb-6 text-bolt-elements-textPrimary text-center">Deployment Succeeded! 🎉</h2>
|
||||||
<div className="flex justify-center gap-2">
|
<div className="text-center">
|
||||||
<a href={deploySettings?.siteURL} target="_blank" rel="noopener noreferrer">
|
<p className="text-bolt-elements-textSecondary mb-6">
|
||||||
<button className="px-4 py-3 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors font-medium">
|
Your application has been successfully deployed. You can now access it at the URL below.
|
||||||
{deploySettings?.siteURL}
|
</p>
|
||||||
</button>
|
<div className="flex justify-center gap-2">
|
||||||
</a>
|
<a href={deploySettings?.siteURL} target="_blank" rel="noopener noreferrer">
|
||||||
<button
|
<button className="px-4 py-3 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors font-medium">
|
||||||
onClick={() => setIsModalOpen(false)}
|
{deploySettings?.siteURL}
|
||||||
className="px-4 py-3 bg-gray-300 rounded-lg hover:bg-gray-400 transition-colors font-medium"
|
</button>
|
||||||
>
|
</a>
|
||||||
Close
|
<button
|
||||||
</button>
|
onClick={() => setIsModalOpen(false)}
|
||||||
</div>
|
className="px-4 py-3 bg-gray-300 rounded-lg hover:bg-gray-400 transition-colors font-medium"
|
||||||
</div>
|
>
|
||||||
</>
|
Close
|
||||||
);
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default DeploymentSuccessful;
|
export default DeploymentSuccessful;
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user