You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
112 lines
4.2 KiB
Markdown
112 lines
4.2 KiB
Markdown
# sveltekit-prisma-tailwind
|
|
|
|
Everything you need to build an awesome full stack application.
|
|
It includes:
|
|
- The [TypeScript](https://www.typescriptlang.org/) programming language
|
|
- The [SvelteKit](https://kit.svelte.dev/) app framework
|
|
- The [Prisma](https://www.prisma.io/) database ORM
|
|
- The [Tailwind](https://tailwindcss.com/) CSS framework
|
|
- [Zod](https://zod.dev/) schema validation
|
|
- [Vitest](https://vitest.dev/) for unit testing
|
|
- [Playwright](https://playwright.dev/) for browser testing
|
|
- [ESLint](https://eslint.org/) for code linting
|
|
- [Prettier](https://prettier.io/) 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:
|
|
|
|
```bash
|
|
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](https://svelte.dev/docs)
|
|
- [SvelteKit docs](https://kit.svelte.dev/docs/introduction)
|
|
|
|
SvelteKit is a combination of the [Svelte](https://svelte.dev/) component framework and [Vite](https://vitejs.dev/), similar to React's Next or Vue's Nuxt. This repository is preconfigured to use SvelteKit's [node adapter](https://kit.svelte.dev/docs/adapter-node), which will create a production node server on build.
|
|
|
|
### Working with Prisma
|
|
- [Prisma docs](https://www.prisma.io/docs)
|
|
|
|
Prisma is a Node.js and TypeScript ORM that includes both a [schema](https://www.prisma.io/docs/concepts/components/prisma-schema) for declaring your database tables, and a query builder called the [client](https://www.prisma.io/client) that's tailored to your schema.
|
|
|
|
Prisma includes a [variety](https://www.prisma.io/docs/concepts/database-connectors) of database connectors. If your database is supported, initialize prisma:
|
|
|
|
```bash
|
|
npx prisma init --datasource-provider [sqlite, postgresql, mysql, sqlserver, mongodb, cockroachdb]
|
|
```
|
|
|
|
Next, edit `prisma/schema.prisma` according to your [data model](https://www.prisma.io/docs/concepts/components/prisma-schema/data-model), and edit the DATABASE_URL in `.env` according to your database [connection URL](https://www.prisma.io/docs/reference/database-reference/connection-urls).
|
|
|
|
Finally, create your database, tables, migration file, and client:
|
|
|
|
```bash
|
|
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](https://www.prisma.io/docs/concepts/components/prisma-client/crud), [relation queries](https://www.prisma.io/docs/concepts/components/prisma-client/relation-queries), [filtering and sorting](https://www.prisma.io/docs/concepts/components/prisma-client/filtering-and-sorting), etc.
|
|
|
|
If you make any changes to the schema, prototype them with:
|
|
|
|
```bash
|
|
npx prisma db push
|
|
npx prisma generate
|
|
```
|
|
|
|
When ready, migrate the changes like you would commit them with git, and regenerate the prisma client:
|
|
|
|
```bash
|
|
npx prisma migrate dev --name (commit message)
|
|
npx prisma generate
|
|
```
|
|
|
|
### Working with Tailwind
|
|
- [Tailwind docs](https://tailwindcss.com/)
|
|
|
|
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](https://flowbite-svelte.com/)
|
|
- [Skeleton](https://www.skeleton.dev/)
|
|
- [daisyUI](https://daisyui.com/)
|
|
- [Carbon Components](https://carbon-components-svelte.onrender.com/)
|
|
|
|
Other useful UI libraries include:
|
|
- [HeroIcons](https://heroicons.com/) SVG icons
|
|
- [Hero Patterns](https://heropatterns.com/) SVG background patterns
|
|
- [Chart.js](https://www.chartjs.org/) charting library
|
|
|
|
## Testing
|
|
|
|
### Browser Tests
|
|
|
|
Add browser tests to `tests/test.ts`, and run them with:
|
|
|
|
```bash
|
|
npm run test
|
|
```
|
|
|
|
### Unit Tests
|
|
|
|
Add unit tests to `src/index.test.ts`, and run them with:
|
|
|
|
```bash
|
|
npm run test:unit
|
|
```
|
|
|
|
## Building
|
|
|
|
To create a production version of your app:
|
|
|
|
```bash
|
|
npm run build
|
|
```
|
|
|
|
You can preview the production build with `npm run preview`. |