How to Set Up VS Code for Supabase Local Development — Full-stack, Next.js App Router, TypeScript, Tailwind CSS, ESLint, Prettier, Docker

Jumpstart your full-stack web app local development environment, develop unlimited Supabase local projects, develop faster without network latency, and work offline.

Photo by Tim Mossholder on Unsplash

Prerequisites

Before you begin, ensure you have the following software installed:

1. Node.js 16.8 or later.
2. macOS, Windows (including WSL), and Linux are supported.
3. Docker Desktop
4. VS Code
5. Prettier VS Code extension
6. VS Code extension to fold classes for code readability with Tailwind CSS (Optional)

Steps

1. Create new Next.js app.

npx create-next-app@latest

2. You’ll see the following prompts. These are my preferences.

# Terminal
What is your project named? <project-dir>
Would you like to use TypeScript? Yes
Would you like to use ESLint? Yes
Would you like to use Tailwind CSS? Yes
Would you like to use `src/` directory? No
Would you like to use App Router? (recommended) Yes
Would you like to customize the default import alias? No

3. Move to project dir.

cd <project-dir>

4. Set up project specific VS Code settings.

mkdir -p .vscode && echo '{ "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.formatOnSave": true }' > .vscode/settings.json

5. Prevent Prettier from conflicting with ESLint rules.

npm i -D eslint-config-prettier
echo '{ "extends": ["next/core-web-vitals", "prettier"] }' > .eslintrc.json

6. Ignore large files from being prettified.

echo '/node_modules\n/.next/' > .prettierignore

7. Add Taiwind CSS Prettier plugin to sort classes.

npm install -D prettier prettier-plugin-tailwindcss
echo '{ "plugins": ["prettier-plugin-tailwindcss"], "pluginSearchDirs": false }' > .prettierrc.json

8. Reload VS Code to ensure prettier-plugin-tailwindcss plugin works.

9. Install Next.js Auth Helpers library.

npm install @supabase/auth-helpers-nextjs @supabase/supabase-js

10. Install Supabase CLI

npm i -D supabase

11. Log in to the Supabase CLI.

npx supabase login

12. Set up Supabase configuration for local development.

npx supabase init

13. You’ll see the following prompts. These are my preferences.

# Terminal
# Generate VS Code workspace settings? [y/N] N

14. Under [auth.email] in supabase/config.toml, set enable_confirmations to true.

This will enable us to receive sign up and sign in emails in Inbucket URL: http://localhost:54324.

# supabase/config.toml
[auth.email]
enable_confirmations = true

15. Start Supabase services.

Make sure Docker Desktop is running.

npx supabase start

16. You’ll see the following on your Terminal.

# Terminal
Started supabase local development setup.

         API URL: http://localhost:54321
          DB URL: postgresql://postgres:postgres@localhost:54322/postgres
      Studio URL: http://localhost:54323
    Inbucket URL: http://localhost:54324
        anon key: eyJh......
service_role key: eyJh......

17. Copy the API URL and anon key to your environment variables .env.local.

# .env.local
NEXT_PUBLIC_SUPABASE_URL=<API URL>
NEXT_PUBLIC_SUPABASE_ANON_KEY=<anon key>

18. Start development server.

npm run dev

Notes

1. This tutorial automatically sets up Next.js’ base ESLint configuration along with a stricter Core Web Vitals rule-set.
2. npx supabase stop command to stop all Supabase services.
3. Studio URL is your local Supabase Dashboard.
4. Inbucket URL is your local email testing application (you’ll receive the sign in and sign up emails here).
5. API URL is your local Supabase project URL.

Congratulations 🚀

You have added to your toolset an experience on how to set up local development environment with Next.js, Supabase, Tailwind CSS, ESLint, Prettier, and Docker. This reference will be helpful to you in jumpstarting development of your full-stack web apps.

Thank you for spending time to read this article. 🙏

Resources

1. Getting Started: Installation | Next.js
2. Local Development | Supabase Docs