sveltekit-prisma-tailwind

Everything you need to build an awesome full stack application. It includes:

• The TypeScript programming language
• The SvelteKit app framework
• The Prisma database ORM
• The Tailwind CSS framework
• Zod schema validation
• Vitest for unit testing
• Playwright for browser testing
• ESLint for code linting
• Prettier for code formatting

This repository is also preconfigured for continuous integration and continuous deployment. Tests will automatically run on push, and the demo branch will automatically deploy to a staging environment.

Developing

Once you've created a project and installed dependencies with npm install (or pnpm install or yarn), start a development server:

npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open

Working with SvelteKit

• Svelte docs
• SvelteKit docs

SvelteKit is a combination of the Svelte component framework and Vite, similar to React's Next or Vue's Nuxt. This repository is preconfigured to use SvelteKit's node adapter, which will create a production node server on build.

Working with Prisma

• Prisma docs

Prisma is a Node.js and TypeScript ORM that includes both a schema for declaring your database tables, and a query builder called the client that's tailored to your schema.

Prisma includes a variety of database connectors. If your database is supported, initialize prisma:

npx prisma init --datasource-provider [sqlite, postgresql, mysql, sqlserver, mongodb, cockroachdb]

Next, edit prisma/schema.prisma according to your data model, and edit the DATABASE_URL in .env according to your database connection URL.

Finally, create your database, tables, migration file, and client:

npx prisma migrate dev --name init
npx prisma generate

You're now ready to send queries to the database! Refer to the Prisma Client documentation for CRUD operations, relation queries, filtering and sorting, etc.

If you make any changes to the schema, prototype them with:

npx prisma db push
npx prisma generate

When ready, migrate the changes like you would commit them with git, and regenerate the prisma client:

npx prisma migrate dev --name (commit message)
npx prisma generate

Working with Tailwind

• Tailwind docs

Tailwind is a utility-first CSS framework, similar to bootstrap, that can be composed to build any design, directly in your markup.

To speed up your development process, you might want to use a component library. Some popular options are:

• Flowbite-Svelte
• Skeleton
• daisyUI
• Carbon Components

Other useful UI libraries include:

• HeroIcons SVG icons
• Hero Patterns SVG background patterns
• Chart.js charting library

Testing

Browser Tests

Add browser tests to tests/test.ts, and run them with:

npm run test

Unit Tests

Add unit tests to src/index.test.ts, and run them with:

npm run test:unit

Building

To create a production version of your app:

npm run build

You can preview the production build with npm run preview.