supabase edge functions - starter

supabase-edge-functions--starter.md

supabase edge functions - starter

• this need a workspace to work because supabase-edge-functions run on deno and the linter and config is different for typescript and deno

1. move existing files to a folder (website, frontend, etc)
2. create a new workspace file to vscode config called name-of-your-project.code-workspace and inside put this:

{
  "folders": [
    {
      "name": "project-root",
      "path": "./"
    },
    {
      "name": "name-of-the-another-existing-folder",
      "path": "name-of-the-another-existing-folder"
    },
    {
      "name": "supabase-functions",
      "path": "supabase/functions"
    }
  ],
  "settings": {
    "files.exclude": {
      "name-of-the-other-folder/": true,
      "supabase/functions/": true
    },
    "deno.enable": true,
    "deno.lint": true,
    "deno.unstable": true
  }
}

• 2.1 rename name-of-the-another-existing-folder with the real folder name that you create previously

3. in project root run pnpm dlx supabase init

• 3.1 choose no to "Generate VS Code workspace settings?"

4. run pnpm dlx supabase functions new hello-world to create your function (change "hello-world" for the name you like, here and in the next steps)

5. create a new file in supabase/ -> .prettierrc.mjs and add this code inside:

/**
 * @type {import('prettier').Options}
 */
export default {
  printWidth: 80,
  tabWidth: 2,
  useTabs: false,
  semi: false,
  singleQuote: false,
  trailingComma: "none",
  bracketSpacing: true,
  bracketSameLine: true,
  plugins: ["@ianvs/prettier-plugin-sort-imports"],
  importOrder: [
    "<BUILTIN_MODULES>", // Node.js built-in modules
    "<THIRD_PARTY_MODULES>", // Imports not matched by other special words or groups.
    "",
    "^~(.*)$",
    "",
    "^[.]{2}",
    "",
    "^[.]",
  ],
};

6. create a new file in supabase/ called tsconfig.json and add this code inside:

{
  "exclude": ["node_modules"],
  "include": ["./**/*.ts"],
  "compilerOptions": {
    "strict": true,
    "skipLibCheck": true,
    "target": "esnext",
    "allowJs": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "incremental": true,
    "esModuleInterop": true,
    "module": "esnext",
    "resolveJsonModule": true,
    "declaration": false,
    "declarationMap": false,
    "inlineSources": false,
    "moduleResolution": "node",
    "noUnusedLocals": false,
    "noUnusedParameters": false,
    "preserveWatchOutput": true,
    "verbatimModuleSyntax": true,
    "experimentalDecorators": true,
    "inlineSourceMap": true,
    "isolatedModules": true,
    "jsx": "react",
    "moduleDetection": "force",
    "useDefineForClassFields": true,
    "allowImportingTsExtensions": true
  }
}

7. pnpm init

• 7.1. pnpm add -D @ianvs/prettier-plugin-sort-imports prettier supabase typescript
• 7.2. add /node_modules to .gitignore

8. add five scripts on supabase/package.json

"scripts": {
    "deno-check:hello-world": "deno check --all functions/hello-world/index.ts",
    "supabase:deploy-function--hello-world": "supabase functions deploy hello-world --no-verify-jwt --project-ref xxxx-YOUR-SUPABASE-PROJECT-REF-xxxx",
    "deploy:hello-world": "pnpm deno-check:hello-world && pnpm supabase:deploy-function--hello-world",
    "——————————————————————————————————————————————": "——————————————————————————————————————————————————",
    "supabase:set-secrets": "supabase secrets set --env-file ./supabase/.env --project-ref xxxx-YOUR-SUPABASE-PROJECT-REF-xxxx",
    "supabase:gen-types": "npx supabase gen types typescript --project-id xxxx-YOUR-SUPABASE-PROJECT-REF-xxxx --schema public > functions/_shared/db/interfaces/supabase-gen-types.ts"
}

• 8.1. replace xxxx-YOUR-SUPABASE-PROJECT-REF-xxxx with your supabase project ref (get from supabase dashboard url)

9. in supabase/functions/hello-world/index.ts add this line:

import { serve } from "https://deno.land/[email protected]/http/server.ts";

• 9.1. change Deno.serve for serve

10. in vscode - File - Open Workspace from File... - open the name-of-your-project.code-workspace file that you created previously

11. install Deno extension in vscode if you dont have it already

12. run pnpm supabase login

13. run pnpm deploy:hello-world

You are ready to go! 🎉

optional

1. you can run pnpm supabase:gen-types to generate types for supabase when you needed from the database

2. you can run pnpm supabase:set-secrets to set the secrets from the .env file

---

for more info this is the supabase guide -> https://supabase.com/docs/guides/functions/quickstart and deno config environment https://deno.land/manual/getting_started/setup_your_environment