getCodeWorkflowSteps() — supabase Function Reference

Source Code

apps/studio/components/interfaces/HomeNew/GettingStarted/GettingStarted.utils.tsx lines 19–217

export const getCodeWorkflowSteps = ({
  ref,
  openAiChat,
  connectActions,
  statuses,
}: BuildCodeStepsArgs): GettingStartedStep[] => {
  const {
    hasTables,
    hasCliSetup,
    hasSampleData,
    hasRlsPolicies,
    hasAppConnected,
    hasFirstUser,
    hasStorageObjects,
    hasEdgeFunctions,
    hasReports,
    hasGitHubConnection,
  } = statuses

  return [
    {
      key: 'install-cli',
      status: hasCliSetup ? 'complete' : 'incomplete',
      title: 'Install the Supabase CLI',
      icon: <Code strokeWidth={1} className="text-foreground-muted" size={16} />,
      description:
        'To get started, install the Supabase CLI—our command-line toolkit for managing projects locally, handling migrations, and seeding data—using the npm command below to add it to your workspace.',
      actions: [
        {
          label: 'Install via npm',
          component: (
            <CodeBlock className="w-full text-xs p-3 !bg" language="bash">
              npm install supabase --save-dev
            </CodeBlock>
          ),
        },
      ],
    },
    {
      key: 'design-db',
      status: hasTables ? 'complete' : 'incomplete',
      title: 'Design your database schema',
      icon: <Database strokeWidth={1} className="text-foreground-muted" size={16} />,
      description:
        'Next, create a schema file that defines the structure of your database, either following our declarative schema guide or asking the AI assistant to generate one for you.',
      actions: [
        {
          label: 'Create schema file',
          href: `${DOCS_URL}/guides/local-development/declarative-database-schemas`,
          variant: 'default',
        },
        {
          label: 'Generate it',
          variant: 'default',
          icon: <AiIconAnimation size={14} />,
          onClick: () =>
            openAiChat(
              'Design my database',
              'Help me create a schema file for my database. We will be using Supabase declarative schemas which you can learn about by searching docs for declarative schema.'
            ),
        },
      ],
    },
    {
      key: 'add-data',
      status: hasSampleData ? 'complete' : 'incomplete',
      title: 'Seed your database with data',
      icon: <Table strokeWidth={1} className="text-foreground-muted" size={16} />,
      description:
        'Now, create a seed file to populate your database with initial data, using the docs for guidance or letting the AI assistant draft realistic inserts.',
      actions: [
        {
          label: 'Create a seed file',
          href: `${DOCS_URL}/guides/local-development/seeding-your-database`,
          variant: 'default',
        },
        {
          label: 'Generate data',
          variant: 'default',
          icon: <AiIconAnimation size={14} />,
          onClick: () =>
            openAiChat(
              'Generate seed data',
              'Generate SQL INSERT statements for realistic seed data that I can run via the Supabase CLI.'
            ),
        },
      ],
    },
    {
      key: 'add-rls-policies',
      status: hasRlsPolicies ? 'complete' : 'incomplete',
      title: 'Secure your data with RLS policies',
      icon: <Shield strokeWidth={1} className="text-foreground-muted" size={16} />,
      description:
        "Let's secure your data by enabling Row Level Security (per-row access rules that decide who can read or write specific records) and defining policies in a migration file, either configuring them manually or letting the AI assistant draft policies for your tables.",
      actions: [
        {
          label: 'Create a migration file',
          href: `/project/${ref}/auth/policies`,
          variant: 'default',
        },
        {
          label: 'Create policies for me',
          variant: 'default',
          icon: <AiIconAnimation size={14} />,
          onClick: () =>
            openAiChat(
              'Generate RLS policies',
              'Generate RLS policies for my existing tables in the public schema and guide me through the process of adding them as migration files to my codebase '
            ),
        },
      ],
    },
    {
      key: 'connect-app',
      status: hasAppConnected ? 'complete' : 'incomplete',
      title: 'Connect your application',
      icon: <Code strokeWidth={1} className="text-foreground-muted" size={16} />,
      description:
        'Your project is ready; open the Connect sheet to grab connection details and setup guidance.',
      actions: connectActions,
    },
    {
      key: 'signup-first-user',
      status: hasFirstUser ? 'complete' : 'incomplete',
      title: 'Sign up your first user',
      icon: <UserPlus strokeWidth={1} className="text-foreground-muted" size={16} />,
      description:
        'Test your authentication setup by creating the first user account, following the docs if you need a step-by-step walkthrough.',
      actions: [
        {
          label: 'Read docs',
          href: `${DOCS_URL}/guides/auth`,
          variant: 'default',
        },
      ],
    },
    {
      key: 'upload-file',
      status: hasStorageObjects ? 'complete' : 'incomplete',
      title: 'Upload a file',
      icon: <Upload strokeWidth={1} className="text-foreground-muted" size={16} />,
      description:
        'Integrate file storage by creating a bucket via SQL and uploading a file using our client libraries.',
      actions: [
        {
          label: 'Create a bucket via SQL',
          href: `${DOCS_URL}/guides/storage/buckets/creating-buckets?queryGroups=language&language=sql`,
          variant: 'default',
        },
        {
          label: 'Upload a file',
          href: `${DOCS_URL}/guides/storage/uploads/standard-uploads`,
          variant: 'default',
        },
      ],
    },
    {
      key: 'create-edge-function',
      status: hasEdgeFunctions ? 'complete' : 'incomplete',
      title: 'Deploy an Edge Function',
      icon: <Code strokeWidth={1} className="text-foreground-muted" size={16} />,
      description:
        'Add server-side logic by creating and deploying your first Edge Function—a lightweight TypeScript or JavaScript function that runs close to your users—then revisit the list to monitor and iterate on it.',
      actions: [
        {
          label: 'Create and deploy via CLI',
          href: `${DOCS_URL}/guides/functions/quickstart`,
          variant: 'default',
        },
        { label: 'View functions', href: `/project/${ref}/functions`, variant: 'default' },
      ],
    },
    {
      key: 'monitor-progress',
      status: hasReports ? 'complete' : 'incomplete',
      title: "Monitor your project's usage",
      icon: <BarChart3 strokeWidth={1} className="text-foreground-muted" size={16} />,
      description:
        "Track your project's activity by creating custom reports for API, database, and auth events right from the reports dashboard.",
      actions: [{ label: 'Reports', href: `/project/${ref}/reports`, variant: 'default' }],
    },
    {
      key: 'connect-github',
      status: hasGitHubConnection ? 'complete' : 'incomplete',
      title: 'Connect to GitHub',
      icon: <GitBranch strokeWidth={1} className="text-foreground-muted" size={16} />,
      description:
        'Link this project to a GitHub repository to keep production in sync and spin up preview branches from pull requests.',
      actions: [
        {
          label: 'Connect to GitHub',
          href: `/project/${ref}/settings/integrations`,
          variant: 'default',
        },
      ],
    },
  ]
}