Development

Prerequisites

To get started with TurboStarter, ensure you have the following installed and set up:

Node.js (20.x or higher)
Docker
pnpm
Supabase account (optional for local development)

It is a fast, disk space efficient package manager that uses hard links and symlinks to save one version of a module only ever once on a disk. It also has a great monorepo support. Of course, you can change it to use Bun, yarn or npm with minimal effort.

Setup environment variables

Create a .env.local files from .env.example files and fill in the required environment variables.

Check Environment variables for more details on setting up environment variables.

Start Supabase

Ensure Docker is running, then start Supabase with:

pnpm db:setup

This command initiates the Supabase web server, you should see the following output in your console:

Started supabase local development setup.
 
          API URL: http://127.0.0.1:54321
      GraphQL URL: http://127.0.0.1:54321/graphql/v1
   S3 Storage URL: http://127.0.0.1:54321/storage/v1/s3
           DB URL: postgresql://postgres:postgres@127.0.0.1:54322/postgres
       Studio URL: http://127.0.0.1:54323
       JWT secret: super-secret-jwt-token-with-at-least-32-characters-long
         anon key: your-anon-key
 service_role key: your-service-role-key
    S3 Access Key: your-access-key-id
    S3 Secret Key: your-secret-access-key
        S3 Region: local

Use these credentials to setup environment variables for Supabase local development.

Start development server

To start the application development server, run:

pnpm dev

Your development server should now be running 🎉

Plasmo will create a dev bundle for your extension and a live-reloading development server, automatically updating your extension bundle on file changes and reloading your browser on source code changes.

It also makes the icon grayscale to distinguish between development and production extension bundles.

Load the extension

Head over to chrome://extensions and enable Developer Mode.

Developer mode

Click on "Load Unpacked" and navigate to your extension's apps/extension/build/chrome-mv3-dev directory.

To see your popup, click on the puzzle piece icon on the Chrome toolbar, and click on your extension.

Pin to toolbar

Pro tip

Pin your extension to the Chrome toolbar for easy access by clicking the pin button.

Publish to stores

When you're ready to publish the project to the stores, follow the guidelines and checklist to ensure everything is set up correctly.

Supabase hosted instance

Using Supabase's hosted instance is similar to deploying to production. Therefore, you still need to follow the checklist to ensure everything is properly configured.

Prerequisites

Project development

Install dependencies

Setup environment variables

Start Supabase

Start development server

Load the extension

Publish to stores

On this page