Merge pull request #13975 from supabase/thor/ef-docs-workspaces

feat: add vs code workspaces docs.

apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts

@@ -577,7 +577,16 @@ export const functions = {
           name: 'Connecting directly to Postgres',
           url: '/guides/functions/connect-to-postgres',
         },
+      ],
+    },
+    {
+      name: 'Third-Party Tools',
+      url: undefined,
+      items: [
         { name: 'Dart Edge on Supabase', url: '/guides/functions/dart-edge' },
+        { name: 'Browserless.io', url: '/guides/functions/examples/screenshots' },
+        { name: 'OpenAI API', url: '/guides/functions/examples/openai' },
+        { name: 'Upstash Redis', url: '/guides/functions/examples/upstash-redis' },
       ],
     },
     {

apps/docs/pages/guides/functions/dart-edge.mdx

@@ -10,6 +10,15 @@ export const meta = {
 
 > ⚠️ WARNING: Dart Edge is an experimental project - it's probably not ready for production usage unless you're okay with living on the 'edge'. Open issues on [Dart Edge repo](https://github.com/invertase/dart_edge) if you encounter any issues.
 
+<div class="video-container">
+  <iframe
+    src="https://www.youtube-nocookie.com/embed/53jhgrDONW4"
+    frameBorder="1"
+    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+    allowFullScreen
+  ></iframe>
+</div>
+
 ## **Pre requirements**
 
 Make sure you have [the edge CLI](https://docs.dartedge.dev/#getting-started) installed in addition to [the Supabase CLI](https://supabase.com/docs/guides/cli#installation).

apps/docs/pages/guides/functions/local-development.mdx

@@ -6,6 +6,52 @@ export const meta = {
   description: 'Run your Edge Functions locally.',
 }
 
+## Setting Up Your Environment
+
+You can follow the [Deno guide](https://deno.com/manual@v1.32.5/getting_started/setup_your_environment) for setting up your development environment with your favorite editor/IDE.
+
+When developing with VS Code inside of an existing application, you can utilize [multi-root workspaces](https://code.visualstudio.com/docs/editor/workspaces#_multiroot-workspaces).
+
+<div className="video-container">
+  <iframe
+    src="https://www.youtube-nocookie.com/embed/lFhU3L8VoSQ"
+    frameBorder="1"
+    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+    allowFullScreen
+  ></iframe>
+</div>
+
+For example, see this `edge-functions.code-workspace` configuration for a CRA (create react app) client with Supabase Edge Functions. You can find the complete example on [GitHub](https://github.com/supabase/supabase/tree/master/examples/edge-functions).
+
+```json
+{
+  "folders": [
+    {
+      "name": "project-root",
+      "path": "./"
+    },
+    {
+      "name": "client",
+      "path": "app"
+    },
+    {
+      "name": "supabase-functions",
+      "path": "supabase/functions"
+    }
+  ],
+  "settings": {
+    "files.exclude": {
+      "node_modules/": true,
+      "app/": true,
+      "supabase/functions/": true
+    },
+    "deno.importMap": "./supabase/functions/import_map.json"
+  }
+}
+```
+
+## Running Edge Functions locally
+
 You can run your Edge Function locally using [`supabase functions serve`](/docs/reference/cli/usage#supabase-functions-serve):
 
 ```bash
@@ -15,7 +61,7 @@ supabase functions serve # start the Functions watcher
 
 The `functions serve` command has hot-reloading capabilities. It will watch for any changes to your files and restart the Deno server.
 
-### Invoking Edge Functions locally
+## Invoking Edge Functions locally
 
 While serving your local Edge Function, you can invoke it using curl:
 

apps/docs/pages/guides/functions/quickstart.mdx

@@ -88,6 +88,50 @@ const { data, error } = await supabase.functions.invoke('hello-world', {
 
 After invoking your Edge Function you should see the response `{ "message":"Hello Functions!" }`.
 
+## Setting Up Your Environment
+
+You can follow the [Deno guide](https://deno.com/manual@v1.32.5/getting_started/setup_your_environment) for setting up your development environment with your favorite editor/IDE.
+
+When developing with VS Code inside of an existing application, you can utilize [multi-root workspaces](https://code.visualstudio.com/docs/editor/workspaces#_multiroot-workspaces).
+
+<div className="video-container">
+  <iframe
+    src="https://www.youtube-nocookie.com/embed/lFhU3L8VoSQ"
+    frameBorder="1"
+    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+    allowFullScreen
+  ></iframe>
+</div>
+
+For example, see this `edge-functions.code-workspace` configuration for a CRA (create react app) client with Supabase Edge Functions. You can find the complete example on [GitHub](https://github.com/supabase/supabase/tree/master/examples/edge-functions).
+
+```json
+{
+  "folders": [
+    {
+      "name": "project-root",
+      "path": "./"
+    },
+    {
+      "name": "client",
+      "path": "app"
+    },
+    {
+      "name": "supabase-functions",
+      "path": "supabase/functions"
+    }
+  ],
+  "settings": {
+    "files.exclude": {
+      "node_modules/": true,
+      "app/": true,
+      "supabase/functions/": true
+    },
+    "deno.importMap": "./supabase/functions/import_map.json"
+  }
+}
+```
+
 ## Database Functions vs Edge Functions
 
 For data-intensive operations we recommend using [Database Functions](/docs/guides/database/functions), which are executed within your database