Setup: Download Course Materials

Project Setup Overview

Before we can start building with Supabase, we need to set up our local development environment. This chapter walks through installing the necessary tools, scaffolding the project structure, and installing the Supabase JavaScript client library. By the end of this chapter, you will have a working project ready to connect to Supabase.

Required Tools

You need three things installed on your machine:

Node.js — The JavaScript runtime that powers our development tools. Download the LTS version from nodejs.org. Node.js includes npm, the Node package manager, which we use to install the Supabase client.
npm — Comes bundled with Node.js. It downloads and manages JavaScript packages. Verify your installation by running node -v and npm -v in your terminal.
A Code Editor — Visual Studio Code is the most popular choice for JavaScript development. It offers excellent JavaScript support, an integrated terminal, and extensions like the SQLTools plugin for working with PostgreSQL.

Installing the Supabase JS Client

There are two ways to use the Supabase client library in your project.

Via npm

For projects using a bundler like Vite, Webpack, or Parcel, install the package as a dependency:

npm init -y
npm install @supabase/supabase-js

The npm init -y command creates a package.json file with default values. The npm install command downloads the Supabase client and all its dependencies into the node_modules folder and adds it to package.json.

Via CDN

For simple HTML projects without a bundler, use a script tag:

<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>

This loads the Supabase client directly in the browser. The library is available globally under supabase namespace. You access it as supabase.createClient() instead of using ES module imports.

Environment Variables

Your Supabase project URL and anon key should never be hard-coded in your source files. Create a .env file in your project root to store these values:

VITE_SUPABASE_URL=https://your-project.supabase.co
VITE_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

If you are using Vite, environment variables must be prefixed with VITE_ to be exposed to the client. For other setups, use dotenv or load the variables manually. Add .env to your .gitignore file to avoid committing secrets.

Security Note: anon vs service_role
The anon key is safe to expose in your client-side code because Row Level Security (RLS) restricts what anonymous users can do. The service_role key, on the other hand, bypasses all RLS and grants full database access. Never expose the service_role key in client-side code or commit it to version control. It should only be used in server-side contexts like edge functions or backend services.

Project Scaffolding

Create the following folder and file structure for this tutorial:

supabase-tutorial/
  index.html
  app.js
  .env
  .gitignore
  package.json
  chapters/
    1-introduction.html
    2-setup-download.html
    3-setup-account.html
    4-auth.html
    ...

The index.html file serves as the main entry point. The app.js file holds our JavaScript logic. The chapters/ folder contains individual chapter files. The .gitignore file should include node_modules and .env.

Creating index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Supabase Tutorial</title>
</head>
<body>
  <h1>Supabase Tutorial</h1>
  <div id="app"></div>
  <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
  <script src="app.js"></script>
</body>
</html>

Creating app.js

const supabaseUrl = 'https://your-project.supabase.co'
const supabaseAnonKey = 'your-anon-key-here'

const supabase = supabase.createClient(supabaseUrl, supabaseAnonKey)

console.log('Supabase client initialized:', supabase)

Notice the use of supabase.createClient() (not createClient) because the CDN version exposes the library under the global supabase namespace.

Exercise
Create a new project folder on your computer. Inside it, create a package.json using npm init -y and install the Supabase client with npm install @supabase/supabase-js. Create index.html and app.js with the content shown above. Verify the client loads by opening the HTML file in a browser and checking the console.