Install the Boilerplate

Step 1

Download, fork or clone the repo (opens in a new tab) and install dependencies.

git clone https://github.com/The-SaaS-Factory/next-14-saas-boilerplate.git
cd next-14-saas-boilerplate
npm install

Step 2

Create a MySQL DB in your local environment (Xampp, Wamp, Laragon, etc).

Step 3

Copy the .env.example file to .env and update the environment variables accordingly.

⚠️

The DATABASE_URL variable is the connection string to your MySQL DB. Example: mysql://root:root@localhost:3306/saas-boilerplate

Step 4

Run the prisma commands to push the schema to the database and generate the client.

npx prisma db push

Step 5

Put some data in the database by running the seed command. (Recommended)

Run the seed

npx prisma db seed  

Step 6

Run the app in the development mode.

npm run dev --turbo

Step 7

Configure Clerk

Create an new application in https://dashboard.clerk.com/ (opens in a new tab)

  • Update in the .env file the "CLERK_SECRET_KEY", "NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY",
  • Enable the Organizations option in the Clerk's organizations panel
  • Create an webhook and update the "CLERK_WEBHOOK_SECRET" in the .env file IMPORTANT
⚠️

For Clerk to send the information to your local project(Through webhook) and synchronize the database, you must expose your localhost with services such as ngrok or cloudflare

⚠️

Whatever tunneling service you use to expose your local host, it must end with this path: /en/api/clerk

  • Update the session token, go to the clerk dashboard and update the session token in the Customize session token section, put this
{
	"metadata": "{{user.public_metadata}}"
}
⚠️

This is necessary for the User onboarding to work correctly

Step 8

Create the Super Admin user: In https://localhost:3000 (opens in a new tab) create a new user

In Clerk

{
  "isSuperAdmin": true,
  "permissions": ["superAdmin:totalAccess"]
}
⚠️

For it to work we must have run seed or manually placed the permissions in the permissions table of our database