The SvelteKit Enterprise Stack

Time is money and setting up a project can be time consuming when you could be working on the business logic instead.

The Stack

Every part of the SvelteKit Enterprise Stack is optimized to go blazingly fast to please stakeholders and uses:

Prisma for the database
Lucia for authentication
Tailwind for styling (with automatic class sorting) and Skeleton UI for the UI components
Stripe for payments
sveltekit-superforms to make working with forms easy
Lucide for icons
TypeScript, Prettier, ESLint, Playwright and Vitest for testing configured

Customization

Every part of the stack is modular and easy to replace.

You can change anything you want from your database to authentication if you read their documentation — for example by default Prisma uses SQLite because it requires no setup but it's trivial to change it to use any other SQL database or MongoDB if you want.

Payments

The Stripe payment method is set up to give you a starting point how to do Stripe payments with SvelteKit but easy to remove if you don't need payments.

You're going to need a Stripe account and then you can get the API keys from the Stripe dashboard you can put inside your .env file for local development or the dashboard of your host.

You can find a basic Stripe subscription example at /pricing but you're going to need to understand how to work with the Stripe API to change it to what you want and update your Prisma schema to give users access based on what they purchased.

Inside the Stripe dashboard you can add products and get the productId but also add a webhook endpoint that points to stripe/webhook where you can add your logic to respond to events like checkouts or if an invoice has been paid to give the customer access to your product.

In the case you want something more custom like Stripe elements you can look at the svelte-stripe package that has a simple integration with instructions and examples.

If this sounds complicated let Stripe handle everything and create a payment link for the product you create and just use that link.

Get Started

Using GitHub Templates

You can start a new project by pressing "Use this template" at the top which copies the project with a clean history.

Using Degit

You can use degit to download the project if you don't want to create a new repository, or if you're not using GitHub which also gives you a clean slate to start from.

pnpx degit joysofcode/enterprise-stack

Setup

You can use any package manager of your choice but I recommend you use pnpm because it's fast and doesn't destroy your hard disk because it symlinks packages.

📦️ Install the project dependencies

pnpm i

⚙️ Rename `.env.example` to `.env` and set your environment variables inside

If you're using a host like Vercel you have to enter the environment variables in their dashboard.

# Prisma
DATABASE_URL="file:./dev.db"

# Stripe
PUBLIC_STRIPE_KEY="pk_test_1234"
SECRET_STRIPE_KEY="sk_test_1234"
STRIPE_WEBHOOK_SECRET="we_1234"

📜 Create the database and generate the Prisma client from your Prisma schema

npx prisma db push

This is great for trying things out but you can use Prisma migrate for production.

You can change the database schema inside prisma/schema.prisma and run npx prisma studio to look at your database.

💿️ Run the development server

pnpm run dev

⛵️ Deploying

You can pick a SvelteKit adapter you want and deploy this to anywhere. If you don't have a full-stack hosting solution you can use a serverless SQL database provider and host your frontend somewhere else.

pnpm run build

You can also preview the build.

pnpm run preview

delight/enterprise-stack