• Blog
  • Documentation
  • Courses
  • Changelog
  • AI Starters
  • UI Kit
  • FAQ
  • Supamode
    New
  • Pricing

Launch your next SaaS in record time with Makerkit, a React SaaS Boilerplate for Next.js and Supabase.

Makerkit is a product of Makerkit Pte Ltd (registered in the Republic of Singapore)Company Registration No: 202407149CFor support or inquiries, please contact us

About
  • FAQ
  • Contact
  • Verify your Discord
  • Consultation
  • Open Source
  • Become an Affiliate
Product
  • Documentation
  • Blog
  • Changelog
  • UI Blocks
  • Figma UI Kit
  • AI SaaS Starters
License
  • Activate License
  • Upgrade License
  • Invite Member
Legal
  • Terms of License
  • Global Configuration
    • Environment Variables
    • Feature Flags
  • Server Actions
    • Sending CSRF Token to Actions
    • Server Actions Error Handling
  • The Makerkit SDK
    • User SDK
    • Organization SDK
    • Organization Subscription SDK
    • Data Loader SDK
  • Architecture and Folder Structure
    • Structure your Application
    • Data Model
    • Introduction
    • Initial Setup
    • Running the App
    • Project Configuration
    • Environment Variables
    • Tailwind CSS and Styling
    • Authentication
    • Onboarding Flow
    • Database Schema
    • Supabase: Data Fetching
    • Supabase: Data Writing
    • Routing
    • Building the Tasks page
    • Building the Task Detail page
    • API Routes
    • Application Pages
    • API Routes Validation
    • Translations
    • Functions you need to know
    • Adding pages to the Marketing Site
    • Deploying to Production
    • Updating to the latest version
This documentation is for a legacy version of Next.js and Supabase. For the latest version, please visit the Next.js and Supabase V2 documentation

Running the App | Next.js Supabase SaaS Kit

Learn how to run the app locally for development and testing.

When we run the stack of a Makerkit application, we will need to run a few commands before:

  1. Next.js: First, we need to run the Next.js development server
  2. Supabase: We need to run the Supabase local environment using Docker
  3. Stripe CLI (optional): If you plan on interacting with Stripe, you are also required to run the Stripe CLI, which allows us to test the webhooks from Stripe against our local server.

Why do we need to run the Supabase local environment?

The guide below will show you how to run the application locally. But why locally? Developing locally has many advantages over developing on a remote server:

Speedy Development: Local development lets you work without the hindrance of network latency or internet disruptions.

Simplified Collaboration: It's typically easier to collaborate with teammates when developing locally on the same project.

Cost Efficiency: Supabase offers a generous free tier, including two free projects. However, if you need more than two, local development comes into play. You can create countless local projects and establish links with live projects at your convenience for launch.

Code-Based Configuration: Any modifications to your tables via the Dashboard aren't reflected in code. Adopting local development workflows allows you to maintain all table schemas in code.

Once you are ready to deploy your application, you can do so by following the production checklist guide.

Fore more information, check out the Supabase documentation.

Install and Run Docker

Before we can run the Supabase local environment, we need to run Docker, as Supabase uses it for running its local environment.

You can use Docker Desktop, Colima, OrbStack, or any other Docker-compatible solution.

Running the Next.js development server

Run the following command from your IDE or from your terminal:

text
npm run dev

This command will start the Next.js server at localhost:3000. If you navigate to this page, you should be able to see the landing page of your application:

Running the Supabase Local environment

To run the Supabase local environment, we need to first run Docker. If you don't have Docker installed, you can download and install Docker Desktop or alternatives such as Colima or Orbstack.

Then, open a new terminal (or, better, from your IDE) and run the following commands:

text
npm run supabase:start

If everything is working correctly, you will see the output below:

text
> supabase start
Applying migration 20221215192558_schema.sql...
Seeding data supabase/seed.sql...
Started supabase local development setup.
API URL: http://localhost:54321
DB URL: postgresql://postgres:postgres@localhost:54322/postgres
Studio URL: http://localhost:54323
Inbucket URL: http://localhost:54324
JWT secret: super-secret-jwt-token-with-at-least-32-characters-long
anon key: ****************************************************
service_role key: ****************************************************

Now, we need to copy the anon key and service_role key values and add them to the .env.local file:

text
NEXT_PUBLIC_SUPABASE_ANON_KEY=****************************************************
SUPABASE_SERVICE_ROLE_KEY=****************************************************

When you need to stop the development environment, you can run the following command:

text
npm run supabase:stop

Supabase Studio UI

To access the Supabase Studio UI, open a new tab in your browser and navigate to http://localhost:54323.

Makerkit's template adds some data to your project by default for testing reasons. In fact, the data you see is used to run the Cypress E2E tests. This is why you'll see some pre-populated data in your project.

Running the Stripe CLI (optional)

Optionally, if you want to run Stripe locally (e.g., sending webhooks to your local server), we need two more steps.

  1. Have a Stripe account
  2. Run the Stripe CLI (or install Stripe on your OS)

To run the CLI, run the following command:

text
npm run stripe:listen

When running the command above for the first time, Stripe will ask you to login. You can do so by following the instructions in the terminal.

After signing in, run the command again.

text
npm run stripe:listen

The above command runs the Stripe CLI and will route webhooks coming from Stripe to your local endpoint. For example, in the Supabase Next.js SaaS starter, this endpoint is at /stripe/webhook.

Adding the Stripe Webhook Secret

When running the command, it will print a webhook key used to sign the messages from Stripe. You will need to add this key to your local environment variables file as below:

text
STRIPE_WEBHOOK_SECRET=<KEY>

The webhook printed should not change, so you may only need to do this the first time.

Signing In for the first time

You should now be able to sign in. To quickly get started, use the following credentials:

text
email = test@makerkit.dev
password = testingpassword

Email Confirmations for Testing with InBucket

When signing up, Supabase sends an email confirmation to a testing account.

You can access the InBucket testing emails at http://localhost:54324/monitor, and can follow the links to complete the sign up process.

InBucket is started automatically when you run npm run supabase:start.

More about developing locally with Supabase

For more information about developing locally with Supabase, check out the Supabase documentation.

On this page
  1. Install and Run Docker
    1. Running the Next.js development server
    2. Running the Supabase Local environment
    3. Running the Stripe CLI (optional)
    4. Signing In for the first time
    5. Email Confirmations for Testing with InBucket
  2. More about developing locally with Supabase