Environment variables

Environment variables are defined in the .env file in the root of the repository and in the root of the apps/extension package.

• Shared environment variables: Defined in the root .env file. These are shared between environments (e.g., development, staging, production) and apps (e.g., web, extension).
• Environment-specific variables: Defined in .env.development and .env.production files. These are specific to the development and production environments.
• App-specific variables: Defined in the app-specific directory (e.g., apps/extension). These are specific to the app and are not shared between apps.
• Bundle-specific variables: Specific to the bundle target (e.g. .env.safari, .env.firefox) or bundle tag (e.g. .env.staging)
• Build environment variables: Not stored in the .env file. Instead, they are stored in the environment variables of the CI/CD system.
• Secret keys: They're not stored on the extension side, instead they're defined on the web side.

Shared variables

Here you can add all the environment variables that are shared across all the apps.

To override these variables in a specific environment, please add them to the specific environment file (e.g. .env.development, .env.production).

# Shared environment variables
 
# Supabase config to be used in apps to create Supabase clients.
SUPABASE_ANON_KEY=""
SUPABASE_URL="http://127.0.0.1:54321"
 
# The name of the product. This is used in various places across the apps.
PRODUCT_NAME="TurboStarter"
 
# The title of the site. This is used in the <title> tag of the site.
SITE_TITLE="Ship your startup everywhere. In minutes."
 
...

App-specific variables

Here you can add all the environment variables that are specific to the app (e.g. apps/extension).

You can also override the shared variables defined in the root .env file.

# App-specific environment variables
 
# Env variables extracted from shared to be exposed to the client in Plasmo app
PLASMO_PUBLIC_SITE_URL="${SITE_URL}"
PLASMO_PUBLIC_SUPABASE_ANON_KEY="${SUPABASE_ANON_KEY}"
PLASMO_PUBLIC_SUPABASE_URL="${SUPABASE_URL}"
 
# Auth cookie name used to retrieve existing app session through Supabase
PLASMO_PUBLIC_AUTH_COOKIE_NAME="sb-127-auth-token"
 
...

Bundle-specific variables

Plasmo also provides environment variables specific to a certain build target or build tag when creating the final bundle. Given the following build command:

"scripts": {
  "build": "plasmo build --target=safari-mv3 --tag=alpha"
}

The following env files will be considered, ordered by priority:

• .env.safari
• .env.alpha
• .env

You shouldn't worry much about this, as TurboStarter comes with already configured build processes for all the major browsers.

Build environment variables

To allow your extension to build properly on CI you need to define your environment variables on your CI/CD system (e.g. Github Actions).

TurboStarter comes with predefined Github Actions workflow used to build and submit your extension to the stores. It's located in .github/workflows/publish-extension.yml file.

To correctly set up the build environment variables, you need to define them under env section and then add them as a secrets to your repository.

...
 
jobs:
  extension:
    name: 🚀 Publish extension
    runs-on: ubuntu-latest
    environment: Production
    env:
      PLASMO_PUBLIC_SITE_URL: ${{ secrets.SITE_URL }}
      PLASMO_PUBLIC_SUPABASE_ANON_KEY: ${{ secrets.SUPABASE_ANON_KEY }}
      PLASMO_PUBLIC_SUPABASE_URL: ${{ secrets.SUPABASE_URL }}
      PLASMO_PUBLIC_AUTH_COOKIE_NAME: ${{ secrets.AUTH_COOKIE_NAME }}
 
  ...

We'll go through the whole process of building and publishing the extension in the publishing guide.

Secret keys

Secret keys and sensitive information are to be never stored on the extension app code.