Your First Launch

In this section you will learn how to start your project for the first time

Clone the repo and install dependencies

Terminal

git clone https://github.com/raffi23/saas-template-app-router.git
cd saas-template-app-router
corepack enable
yarn
git remote remove origin

Create your .env files

Terminal

touch .env
touch .env.local

Create an account on atlas and add your database url in .env

.env

DATABASE_URL= # for mongodb create an account on https://www.mongodb.com/cloud/atlas/register and use the provided url

Note

Prisma requires DATABASE_URL to be in .env not .env.local.

Copy these keys to .env.local file and when ready, check the guides below to learn more on how to setup each one of them [skip for now]

.env.local

# Authentication
ADMIN_EMAIL= # Email address for the admin account.
AUTH_SECRET= # Secret key for authentication. Generate one here https://jwtsecret.com/generate or use random text of 43 alphanumeric characters minimum.
AUTH_GOOGLE_ID= # Google OAuth client ID for Google login (optional).
AUTH_GOOGLE_SECRET= # Secret key for the Google OAuth client (optional).
AUTH_GITHUB_ID= # GitHub OAuth client ID for GitHub login (optional).
AUTH_GITHUB_SECRET= # Secret key for the GitHub OAuth client (optional).

# Stripe Integration
STRIPE_KEY= # Stripe secret key for managing payments.
STRIPE_WEBHOOK_SECRET= # Secret for verifying Stripe webhooks.
STRIPE_DASHBOARD_LINK=https://dashboard.stripe.com/test # Stripe dashboard URL (e.g., for testing).

# AWS (Optional - for uploading files in the dashboard)
AWS_ACCESS_KEY_ID= # AWS access key ID for storage services.
AWS_SECRET_ACCESS_KEY= # Secret key for the AWS access key.

# Sending Emails (optional - needed for magic links / verify or reset password)
RESEND_KEY= # API key for the Resend email service.

# AI Integration (Optional - using ChatGPT in the dashboard)
OPENAI_API_KEY= # API key for OpenAI.

# Public URLs and Keys
NEXT_PUBLIC_BACKEND_URL=http://localhost:3000/api # Backend API base URL (local or production) use the production url on deployment used for axios base url.

# Analytics (optional - PostHog analytics)
NEXT_PUBLIC_POSTHOG_KEY= # PostHog API key for analytics.
NEXT_PUBLIC_POSTHOG_HOST= # Host URL for PostHog (e.g., https://eu.i.posthog.com).

# Customer support (optional - Tawk chat widget)
NEXT_PUBLIC_TAWK_PROPERTY_ID= # Tawk.to property ID for live chat.

Note

If you change any environment variable, you need to restart the local server or redeploy on production.

Note

When you assign ADMIN_EMAIL and sign in with it you will get automatically assigned as admin user when you login with a verified email.

e.g. Using Magic Links with an email equal to ADMIN_EMAIL will auto assign you as admin as you have received an email and opened the link within hence owning the account.

Configure your app, the files that you need to configure are [skip for now]
- next.config.ts
- src/utils/config.ts
Now you are ready to spin it up!

Terminal

# pushes database changes and runs the dev server
npm start dev
yarn dev
# builds the project locally and runs the local build
npm start dev:build
yarn dev:build
# only pushes database changes
npm start setup
yarn setup
#

Next steps

Ship in seconds