Skip to main content

Environment Setup

This guide walks through setting up a local development environment for Artbase Studio.

Prerequisites​

Required Software​

SoftwareVersionPurpose
Node.js20+JavaScript runtime
pnpm8+Package manager
Git2.40+Version control
Docker24+Local services (optional)

Accounts Needed​

ServicePurposeRequired
SupabaseDatabase, authYes
StripePaymentsFor payment features
ResendEmailFor email features

Installation​

1. Clone Repository​

git clone https://github.com/artbase/artbase.git
cd artbase

2. Install Dependencies​

pnpm install

3. Environment Variables​

Copy the example environment file:

cp apps/web/.env.example apps/web/.env.local

4. Configure Supabase​

  1. Create project at supabase.com
  2. Get credentials from Settings > API
  3. Add to .env.local:
NEXT_PUBLIC_SUPABASE_URL=https://xxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJ...
SUPABASE_SERVICE_ROLE_KEY=eyJ...

Option B: Local Supabase​

npx supabase start

5. Run Migrations​

npx supabase db push

6. Seed Database (Optional)​

pnpm db:seed

Environment Variables​

Required Variables​

# Supabase
NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=
SUPABASE_SERVICE_ROLE_KEY=

# App URL
NEXT_PUBLIC_APP_URL=http://localhost:3000

Optional Variables​

# Stripe (for payments)
STRIPE_SECRET_KEY=sk_test_...
STRIPE_WEBHOOK_SECRET=whsec_...
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_...

# Stripe Connect (for gallery)
STRIPE_CONNECT_CLIENT_ID=ca_...

# Email (Resend)
RESEND_API_KEY=re_...

# Etsy Integration
ETSY_API_KEY=
ETSY_SHARED_SECRET=

# Analytics
NEXT_PUBLIC_POSTHOG_KEY=

Environment Files​

FilePurposeGit
.env.exampleTemplateCommitted
.env.localLocal devIgnored
.env.testTestingIgnored
.env.productionProd (Vercel)Not in repo

Running Locally​

Development Server​

# Web app
pnpm dev

# Specific app
pnpm --filter @artbase/web dev

With All Services​

# Start everything
pnpm dev:all

This starts:

  • Web app on localhost:3000
  • Docs on localhost:3001
  • Supabase Studio on localhost:54323

IDE Setup​

VS Code Extensions​

Recommended extensions (.vscode/extensions.json):

{
  "recommendations": [
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "bradlc.vscode-tailwindcss",
    "prisma.prisma"
  ]
}

VS Code Settings​

Recommended settings (.vscode/settings.json):

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

Troubleshooting​

Port Already in Use​

# Find process
lsof -i :3000

# Kill process
kill -9 <PID>

Supabase Connection Issues​

# Check Supabase status
npx supabase status

# Restart Supabase
npx supabase stop && npx supabase start

Node Version Mismatch​

# Use correct version
nvm use 20

# Or with Volta
volta install node@20

Dependency Issues​

# Clean install
rm -rf node_modules pnpm-lock.yaml
pnpm install

Next Steps​