Setup - Supaplate Documentation

On this page we will learn how to do the minimal setup required to run Supaplate.

Most features are disabled by default, on later pages we will enable and understand each feature one by one.

Requirements

Node.js 20.x or higher
Git
A code editor (VSCode, Cursor, etc)

Get started

Decompress the project

Decompress the downloaded .zip file and open the folder in your code editor.

Install dependencies

cd <your-project-name>
npm install

Environment variables

Supaplate uses environment variables to configure the app, it comes with an example file .env.example that you should rename to .env.

Linux/MacOS

mv .env.example .env

Windows (PowerShell)

ren .env.example .env

Before you can run the development server, you need to set the required environment variables in the .env file or you will get the following errors:

Internal server error: supabaseUrl is required.
Error: Missing Supabase environment variables

Supabase Setup

URL and Keys

After logging in to Supabase, create a new project.

Make sure to set a strong database password and to write it down in a safe place, you won't be able to see it again later.

Also make sure to choose the region that is closest to your users.

Once your project is created, head to the the "Data API" section of your project settings.

You will see a project URL, an anon public key and a service role key.

Copy and paste them in your .env file:

# example
SUPABASE_URL="https://your-project-url.supabase.co"
SUPABASE_ANON_KEY="your-anon-key"
SUPABASE_SERVICE_ROLE_KEY="your-service-role-key"

Database URL

To be able to manage the database using Drizzle ORM, we need to set the DATABASE_URL environment variable.

Click on the "Connect" button in the top bar of your Supabase project and copy paste the URL of from the 'Shared Pooler' section into the .env file.

# example
DATABASE_URL="postgresql://postgres:your-database-password@your-project-region.pooler.supabase.co:5432/postgres"

Run the database migrations

Run the following command to apply the set up migrations to your database.

npm run db:migrate

This command will create a profiles and payments table in your database, as well as a trigger to handle user registration and a function to handle updated_at column updates.

More on that in the database schema page.

Windows Users Only

If you are on Windows, you need to install the cross-env command in your terminal.

npm install --save-dev cross-env

and then modify the package.json file to use cross-env in your dev script.

"dev":"cross-env NODE_OPTIONS='--import ./instrument.server.mjs' react-router dev",

Run the development server

With all the environment variables set, you can now run the development server.

npm run dev

You should be able to see the app running on http://localhost:5173 and you should be able to see the home page.

The project isn't ready for production yet, we need to do some more setup, keep reading to learn how to do it.