FunctionsSecretsEmptyStateLocal() — supabase Function Reference

Source Code

apps/studio/components/interfaces/Functions/FunctionsEmptyState.tsx lines 361–434

export const FunctionsSecretsEmptyStateLocal = () => {
  return (
    <>
      <Card>
        <CardHeader className="flex-row items-center justify-between">
          Local development & CLI
          <div className="flex items-center gap-x-2">
            <DocsButton href={`${DOCS_URL}/guides/functions/secrets#using-the-cli`} />
          </div>
        </CardHeader>
        <CardContent>
          <div className="text-sm text-foreground-light mt-1 mb-4 max-w-3xl">
            <p>
              Local secrets and environment variables can be loaded in either of the following two
              ways
            </p>
            <ul className="list-disc pl-6">
              <li className="prose [&>code]:text-xs text-sm max-w-full">
                Through an <code>.env</code> file placed at <code>supabase/functions/.env</code>,
                which is automatically loaded on <code>supabase start</code>
              </li>
              <li className="prose [&>code]:text-xs text-sm max-w-full">
                Through the <code>--env-file</code> option for <code>supabase functions serve</code>
                , for example: <code>supabase functions serve --env-file ./path/to/.env-file</code>
              </li>
            </ul>
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader className="flex-row items-center justify-between">
          Self-Hosted Supabase
          <div className="flex items-center gap-x-2">
            <DocsButton href={`${DOCS_URL}/guides/self-hosting/docker#configuring-services`} />
          </div>
        </CardHeader>
        <CardContent>
          <p className="prose [&>code]:text-xs space-x-1 text-sm max-w-full">
            <span>Change settings in</span>
            <a
              target="_blank"
              rel="noopener noreferrer"
              href="https://github.com/supabase/supabase/blob/master/docker/.env.example"
            >
              .env file
            </a>
            <span>and</span>
            <a
              target="_blank"
              rel="noopener noreferrer"
              href="https://github.com/supabase/supabase/blob/master/docker/docker-compose.yml"
            >
              docker-compose.yml
            </a>
            <span>at</span>
            <code>functions</code>
            <span>service</span>
          </p>
          <p className="prose [&>code]:text-xs space-x-1 text-sm max-w-full">
            <span>Secrets can also be loaded at runtime by injecting them into</span>
            <a
              target="_blank"
              rel="noopener noreferrer"
              href="https://github.com/supabase/supabase/blob/8bb82bb3a5aee631e8e6e6e0c8a5f6e97fb8f898/docker/volumes/functions/main/index.ts#L74"
            >
              main/index.ts file
            </a>
          </p>
        </CardContent>
      </Card>
    </>
  )
}