Getting Started

Quickly setup your Saas with SaasDirectKit following this guide

Prerequisites

• Node.js - 22.x or newer
• Docker - Download Here
• IDE/Text editor - There is no IDE requirement, but we recommend Visual Studio Code with the official Vue extension (previously known as Volar) or WebStorm, which, along with other JetBrains IDEs, offers great Nuxt support right out-of-the-box.
• Terminal - In order to run commands

Installation

1. Clone the repository

git clone https://github.com/saasdirectkit/nuxt-directus

2. Install the dependencies

Change into the project directory and run the following command:

# pnpm
pnpm install

# npm
npm install

# yarn
yarn install

# bun
bun install

3. Set env files

Create two .env files. One in the root directory and one in the .backend directory.
Use the example .env.example file in respective directories to create your .env file. For more information on environment variables, Check here Environment variables

The root env file looks like this:

PORT=9712

NUXT_PUBLIC_SITE_URL=https://mydomain.com
NUXT_PUBLIC_APP_NAME=MyAppName
NUXT_PUBLIC_APP_LOGO=
NUXT_PUBLIC_APP_ICON=lucide:package

NUXT_PUBLIC_DOMAIN_NAME=mydomain.com
NUXT_PUBLIC_DIRECTUS_URL=https://app.mydomain.com #you can also use a different subdomain for admin panel as you wish
NUXT_DIRECTUS_STATIC_TOKEN=qboQJvX3Dho8-xxxxxxxxxxxxxxxxx #you get this after the first run. leave it for now. You will get this in the admin panel > User Directory > Administrator > your admin email > Token. Click on the generate token button. This token gives admin access to the admin apis. Info: its used for sending api requests to the admin panel.
NODE_TLS_REJECT_UNAUTHORIZED=0 #this is needed for self-signed certificates in local development. That is for the https to work in localhost. Remove this in production.

NUXT_PAYMENT_TEST_MODE=true
NUXT_LEMON_SQUEEZY_STORE_ID=
NUXT_LEMON_SQUEEZY_WEBHOOK_SECRET=
NUXT_LEMON_SQUEEZY_API_KEY=

NUXT_STRIPE_SECRET_KEY=sk_test_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
NUXT_STRIPE_WEBHOOK_SECRET=whsec_xxxxxxxxxxxxxxxxxxxxxxxxx
NUXT_POLAR_ACCESS_TOKEN=
NUXT_POLAR_WEBHOOK_SECRET=

4. Configure caddy

You need to configure the caddy file to enable https development in your local pc. You will use a domain name like https://mydomain-local.com to develop in localhost. This will help you to closely resemble your production site to avoid any unexpected errors. Edit backend/docker/caddy/Caddyfile.dev file. It will look like this:

demo.saasdirectkit-local.com {
    encode zstd gzip
    file_server /public/*
    reverse_proxy host.docker.internal:9712
    tls internal
}
app.saasdirectkit-local.com {
    reverse_proxy backend:8055
    tls internal
}

Change the first url to your frontend site url and the second url (app.saasdirectkit-local.com) to where you want the admin panel to be accessible.

Now go to your hosts file and add the corresponding mapping to the localhost.

127.0.0.1 mywebsite-local.com
127.0.0.1 app.mywebsite-local.com

I add the local into the urls inorder to distinguish from the production sites.

5. Run the server

SaasDirectkit contains an admin backend and a nuxt app.
So you need to run the admin first

Run the following command in the backend directory

docker compose up -f docker/compose.dev.yml up -d

The admin panel is booting up now.

After the docker containers are up and running, Run the following command in the root directory

npm run dev

You should see your app running on https://mydomain-local.com

And your admin panel on https://app.mydomain-local.com depending on the url that you used

Follow the setting up guide to finish setting up your admin panel