Getting Started

In this tutorial, we’ll guide you through the initial setup of SveltePak. The steps include cloning the project repository, installing necessary dependencies, configuring your database, and launching the development server locally.

Tools & libraries

  • Frameworks: SvelteKit / Vite
  • Database: Prisma
  • Authentication: Lucia Auth
  • UI: ShadcnUI Svelte
  • Headless UI: Melt UI
  • CSS: Tailwind CSS
  • Internationalization: SvelteKit i18n
  • Email: SvelteKit Email
  • Payments: LemonSqueezy
  • Linting: ESLint
  • Formatting: Prettier

Prerequisites

  • Node.js (v18 or higher)
  • Git
  • npm / yarn / pnpm / bun
  • VSCode / WebStorm / Vim / Emacs / etc.

Project setup

The easiest way to get started with SveltePak is to use the npx command to create a new project. This will clone the SveltePak repository, install all the dependencies and set up the database for you.

npx sveltepaker new my-awesome-project

Please note that access to the SveltePak repository is required to use this command. Access is provided immediately after purchasing a SveltePak.

A few questions will be asked during the setup process:

  • Project name
  • Database provider
  • Database connection string

This will clone the sveltepak repository, install all the dependencies and set up the database for you.

Create a new database

SveltePak uses Prisma ORM, which means it supports a variety of databases. Before creating a new SveltePak project, make sure to have created a new database and have the connection string ready. For example, when using PostgreSQL, the connection string will look something like this:

postgresql://user:password@localhost:5432/my-database

Recommended database providers are PlanetScale and Supabase.

Start your development server

Once the project is set up, you can start the development server by running the following command:

pnpm dev

Open http://localhost:5173 in your browser to see the your app.