supabase/DEVELOPERS.md

Developing Supabase

1. Development setup
   • Install dependencies
   • Fork the repository
2. Build Supabase
   • Choose a directory
3. Start a development server
   • Supabase Website
   • Supabase Docs
   • Supabase Studio
4. Create a pull request

• Common tasks
  • Add a redirect
• Monorepo
  • Getting started
  • Shared components
  • Installing packages
  • Development
• Community channels

Development setup

Thanks for your interest in Supabase and for wanting to contribute! Before you begin, read the code of conduct and check out the existing issues. This document describes how to set up your development environment to build and test Supabase.

Install dependencies

You need to install and configure the following dependencies on your machine to build Supabase:

• Git
• Node.js v16.x (LTS)
• npm version 7+ or Yarn

Fork the repository

To contribute code to Supabase, you must fork the Supabase Repository.

Build Supabase

1. Clone your GitHub forked repository:

   git clone https://github.com/<github_username>/supabase.git
   

2. Go to the Supabase directory:

   cd supabase
   

Choose a directory

Choose if you want to work on the Supabase Website, Supabase Docs, or Supabase Studio.

1. Go to the Supabase Website directory

   cd apps/www
   

   Go to the Supabase Docs directory

   cd apps/reference
   

   Go to the Supabase Studio directory

   cd studio
   

2. Install npm/yarn dependencies:

   npm

   npm install
   

   or with yarn

   yarn install
   

Start a development server

To debug code and to see your changes in real time, it is often useful to have a local HTTP server. Click one of the three links below to choose which development server you want to start.

• Supabase Website
• Supabase Docs
• Supabase Studio

Supabase Website

The website is moving to a new monorepo setup. See the Monorepo section below.

Supabase Docs

1. Build development server

   npm

   npm run build
   

   or with yarn

   yarn build
   

2. Start development server

   npm

   npm run start
   

   or with yarn

   yarn start
   

3. Access the local server in your web browser at http://localhost:3010/docs.

Supabase Studio

1. Start development server

   npm

   npm run dev
   

   or with yarn

   yarn dev
   

2. Access the local server in your web browser at http://localhost:8082/. See the Supabase Studio readme for more information.

Create a pull request

After making your changes, open a pull request (PR). Once you submit your pull request, others from the Supabase team/community will review it with you.

Did you have an issue, like a merge conflict, or don't know how to open a pull request? Check out GitHub's pull request tutorial on how to resolve merge conflicts and other issues. Once your PR has been merged, you will be proudly listed as a contributor in the contributor chart.

---

Common tasks

Add a redirect

Create a new entry in the redirects.js file in our main site.

Monorepo

We are in the process of migrating this repository to monorepo, using Turborepo. Eventually, the docs and the Studio will be run using Turborepo, which will significantly improve the developer workflow. You must be using NPM 7 or higher.

Getting started

npm install # install dependencies
npm run dev # start all the applications

Then edit and visit any of the following sites:

Site	Directory	Description	Local development server
supabase.com	/apps/www	The main website	http://localhost:3000
supabase.com/docs	apps/reference	Guides and Reference documentation	http://localhost:3010/docs
[POC] Community forum	/apps/temp-community-forum	GitHub Discussions in a Next.js site	http://localhost:3002
[POC] DEV articles site	/apps/temp-community-tutorials	A Next.js site for our DEV articles (which community members can write)	http://localhost:3003

Shared components

The monorepo has a set of shared components under /packages:

• /packages/common: Common React code, shared between all sites.
• /packages/config: All shared config
• /packages/spec: Generates documentation using spec files.
• /packages/tsconfig: Shared Typescript settings
• /packages/ui: Shared UI components (formerly @supabase/ui)

To use these 'packages', or any of their components from a Next.JS app, you must use next-transpile-modules in the next.config.js file. This looks like:

// next.config.js
const withTM = require('next-transpile-modules')(['ui', 'common'])
module.exports = withTM({})

Installing packages

Installing a package with NPM workspaces requires you to add the -w flag to tell NPM which workspace you want to install into.

The format is: npm install <package name> -w=<workspace to install in>.

For example:

• npm install @supabase/ui -w common: installs into ./packages/common
• npm install @supabase/ui -w www: installs into ./apps/www

You do not need to install devDependencies in each workspace. These can all be installed in the root package.

Development

npm run dev

---

Community channels

Stuck somewhere? Have any questions? Join the Discord Community Server or the Github Discussions. We are here to help!