Experiments >

Supabase + SvelteKit + GitPod template #2

Experiment #14620th April, 2021by Joshua Nussbaum

In the last experiment, I setup a template for running supabase + svelte-kit on GitPod.

The one setup task required is providing environment variables.

Normally, you would define them in .env file on the file system. With GitPod, everything the projects file system will be get shared in snapshots.

GitPod provides a more secure approach, allowing environment variables to be defined on your user account, in the Settings / Variables screen, or with the cli tool gp env.


To make it clear this needs to set up before running npm run dev. I updated the init command in .gitpod.yml to check if the environment vars are configured before running the dev server. It also displays setup instructions when they’re missing.


  - init: npm install
    command: |
        NC='\033[0m' # No Color

        # check if VITE_SUPABASE_URL is defined
        gp env | grep --quiet VITE_SUPABASE_URL

        # check if return value is 1
        if [ $? -eq 1 ]
          # print error and setup instructions
          printf "${RED}Missing environment variables for supabase.${NC}\n\n"
          printf "To configure them:\n\n1. run: ${BOLD}gp env -e VITE_SUPABASE_URL=your_supabase_url VITE_SUPABASE_ANON_KEY=your_supabase_anon_key${NC}\n2. close and re-open your workspace\n"
          # environment vars are setup, so run dev server
          npm run dev


setup instructions
view all experiments

Stay tuned in

Learn how to add more experimentation to your workflow