├── static └── favicon.png ├── .gitignore ├── vite.config.js ├── src ├── app.d.ts ├── routes │ ├── +layout.svelte │ ├── +page.svelte │ ├── drafts │ │ └── +page.svelte │ ├── p │ │ └── [id] │ │ │ └── +page.svelte │ ├── signup │ │ └── +page.svelte │ └── create │ │ └── +page.svelte ├── app.html └── lib │ ├── styles │ └── style.css │ ├── components │ ├── Post.svelte │ └── Header.svelte │ └── data.json ├── tsconfig.json ├── svelte.config.js ├── README.md └── package.json /static/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prisma/demo-sveltekit/HEAD/static/favicon.png -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /build 4 | /.svelte-kit 5 | /package 6 | .env 7 | .env.* 8 | !.env.example 9 | -------------------------------------------------------------------------------- /vite.config.js: -------------------------------------------------------------------------------- 1 | import { sveltekit } from '@sveltejs/kit/vite'; 2 | 3 | /** @type {import('vite').UserConfig} */ 4 | const config = { 5 | plugins: [sveltekit()] 6 | }; 7 | 8 | export default config; 9 | -------------------------------------------------------------------------------- /src/app.d.ts: -------------------------------------------------------------------------------- 1 | // See https://kit.svelte.dev/docs/types#app 2 | // for information about these interfaces 3 | // and what to do when importing types 4 | declare namespace App { 5 | // interface Locals {} 6 | // interface Platform {} 7 | // interface PrivateEnv {} 8 | // interface PublicEnv {} 9 | } 10 | -------------------------------------------------------------------------------- /src/routes/+layout.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 |

7 |

8 | 9 |

10 | 11 | 16 | -------------------------------------------------------------------------------- /src/app.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | %sveltekit.head% 8 | 9 | 10 |

%sveltekit.body%

11 | 12 | 13 | -------------------------------------------------------------------------------- /src/routes/+page.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 |

7 |

My Blog

8 |

9 |

10 | {#each data as post (post.id)} 11 | {#if post.published} 12 | 13 | {/if} 14 | {/each} 15 |

16 |

17 |

18 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./.svelte-kit/tsconfig.json", 3 | "compilerOptions": { 4 | "allowJs": true, 5 | "checkJs": true, 6 | "esModuleInterop": true, 7 | "forceConsistentCasingInFileNames": true, 8 | "resolveJsonModule": true, 9 | "skipLibCheck": true, 10 | "sourceMap": true, 11 | "strict": true 12 | }, 13 | "ts-node": { 14 | "esm": true 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/routes/drafts/+page.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 |

7 |

Drafts

8 |

9 |

10 | {#each data as post (post.id)} 11 | {#if !post.published} 12 | 13 | {/if} 14 | {/each} 15 |

16 |

17 |

18 | -------------------------------------------------------------------------------- /svelte.config.js: -------------------------------------------------------------------------------- 1 | import adapter from '@sveltejs/adapter-auto'; 2 | import preprocess from 'svelte-preprocess'; 3 | 4 | /** @type {import('@sveltejs/kit').Config} */ 5 | const config = { 6 | // Consult https://github.com/sveltejs/svelte-preprocess 7 | // for more information about preprocessors 8 | preprocess: preprocess(), 9 | 10 | kit: { 11 | adapter: adapter() 12 | } 13 | }; 14 | 15 | export default config; 16 | -------------------------------------------------------------------------------- /src/lib/styles/style.css: -------------------------------------------------------------------------------- 1 | html { 2 | box-sizing: border-box; 3 | } 4 | 5 | *, 6 | *:before, 7 | *:after { 8 | box-sizing: inherit; 9 | } 10 | 11 | body { 12 | margin: 0; 13 | padding: 0; 14 | font-size: 16px; 15 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, 16 | Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; 17 | background: rgba(0, 0, 0, 0.05); 18 | } 19 | 20 | input, 21 | textarea { 22 | font-size: 16px; 23 | } 24 | 25 | button { 26 | cursor: pointer; 27 | } 28 | -------------------------------------------------------------------------------- /src/lib/components/Post.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 |

goto(`/p/${post.id}`)}> 9 |

{post.title}

10 | {post.author?.name ? `By ${post.author.name}` : "Unknown author"} 13 |

{@html post.content}

14 |

15 | 16 | 36 | -------------------------------------------------------------------------------- /src/lib/components/Header.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 15 | 16 | 47 | -------------------------------------------------------------------------------- /src/routes/p/[id]/+page.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 |

9 |

10 |

{post.title}

11 |

{post.author?.name ? `By ${post.author.name}` : "Unknown author"}

12 |

13 | {@html post.content} 14 |

15 | 21 |

22 |

23 | 24 | 45 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 🚀 Handle data in SvelteKit with Prisma 2 | 3 | This application is built using these technologies: 4 | 5 | - [Sveltekit](https://kit.svelte.dev/) as the framework 6 | - [Prisma](https://www.prisma.io/) as the ORM for migrations and database connection 7 | - [TypeScript](https://www.typescriptlang.org/) as the programming language 8 | - [SQLite](https://www.sqlite.org/index.html) as the database 9 | 10 | ## 🛠️ Getting started 11 | To get started, navigate to the directory of your choice and run the following command to clone the repository: 12 | 13 | ``` 14 | git clone https://github.com/sonylomo/demo-sveltekit.git 15 | cd demo-sveltekit 16 | ``` 17 | 18 | Install dependencies and fire up the application: 19 | 20 | ```bash 21 | npm install 22 | npm run dev 23 | ``` 24 | 25 | Awesome! Your application should be running on: [http://127.0.0.1:5173/](http://127.0.0.1:5173/) 26 | starter blog

27 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "rest-sveltekit", 3 | "version": "0.0.1", 4 | "private": true, 5 | "scripts": { 6 | "dev": "vite dev", 7 | "build": "vite build", 8 | "preview": "vite preview", 9 | "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json", 10 | "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch" 11 | }, 12 | "devDependencies": { 13 | "@sveltejs/adapter-auto": "^1.0.0", 14 | "@sveltejs/kit": "^1.0.0", 15 | "@sveltejs/package": "^1.0.0", 16 | "@typescript-eslint/eslint-plugin": "^5.45.0", 17 | "@typescript-eslint/parser": "^5.45.0", 18 | "eslint": "^8.28.0", 19 | "eslint-config-prettier": "^8.5.0", 20 | "eslint-plugin-svelte3": "^4.0.0", 21 | "prettier": "^2.8.0", 22 | "prettier-plugin-svelte": "^2.8.1", 23 | "svelte": "^3.54.0", 24 | "svelte-check": "^2.9.2", 25 | "ts-node": "10.9.1", 26 | "tslib": "^2.4.1", 27 | "typescript": "^4.9.3", 28 | "vite": "^4.0.0" 29 | }, 30 | "type": "module", 31 | "dependencies": {} 32 | } -------------------------------------------------------------------------------- /src/lib/data.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "id": 1, 4 | "author": { 5 | "name": "Alice", 6 | "email": "alice@prisma.io" 7 | }, 8 | "title": "Join the Prisma Slack", 9 | "content": "https://slack.prisma.io", 10 | "published": true 11 | }, 12 | { 13 | "id": 2, 14 | "author": { 15 | "name": "Nilu", 16 | "email": "nilu@prisma.io" 17 | }, 18 | "title": "Follow Prisma on Twitter", 19 | "content": "https://www.twitter.com/prisma", 20 | "published": true 21 | }, 22 | { 23 | "id": 3, 24 | "author": { 25 | "name": "Mahmoud", 26 | "email": "mahmoud@prisma.io" 27 | }, 28 | "title": "Ask a question about Prisma on GitHub", 29 | "content": "https://www.github.com/prisma/prisma/discussions", 30 | "published": true 31 | }, 32 | { 33 | "id": 4, 34 | "author": { 35 | "name": "Sonia", 36 | "email": "lomo@prisma.io" 37 | }, 38 | "title": "Pump Up The Jam!", 39 | "content": "https://youtu.be/9EcjWd-O4jI", 40 | "published": false 41 | } 42 | ] -------------------------------------------------------------------------------- /src/routes/signup/+page.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 |

8 | 28 |

29 | 30 | 59 | -------------------------------------------------------------------------------- /src/routes/create/+page.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 |

8 |

9 |

Create Draft

10 | {#if form?.missing}

Missing field required!

{/if} 11 | 17 | 23 |

My Blog

Drafts

{post.title}

{post.title}

Signup user

Create Draft