DA-3044 SvelteKit Example Project (#7766)

* sveltekit app created

* prisma added

* prisma setup

* svelte integration

* removed old, added new

* readme added

Author: aidankmcalister

orm/sveltekit/.gitignore

@@ -1,8 +1,24 @@
-.DS_Store
 node_modules
-/build
+/src/generated/prisma
+
+# Output
+.output
+.vercel
+.netlify
+.wrangler
 /.svelte-kit
-/package
+/build
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Env
 .env
 .env.*
 !.env.example
+!.env.test
+
+# Vite
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

orm/sveltekit/.npmrc

@@ -0,0 +1 @@
+engine-strict=true

orm/sveltekit/.prettierignore

@@ -0,0 +1,6 @@
+# Package Managers
+package-lock.json
+pnpm-lock.yaml
+yarn.lock
+bun.lock
+bun.lockb

orm/sveltekit/.prettierrc

@@ -0,0 +1,15 @@
+{
+	"useTabs": true,
+	"singleQuote": true,
+	"trailingComma": "none",
+	"printWidth": 100,
+	"plugins": ["prettier-plugin-svelte"],
+	"overrides": [
+		{
+			"files": "*.svelte",
+			"options": {
+				"parser": "svelte"
+			}
+		}
+	]
+}

orm/sveltekit/README.md

@@ -1,18 +1,18 @@
-# Fullstack Example with SvelteKit Actions and Load Functions
+# SvelteKit Example
 
-This example shows how to implement a **fullstack app in TypeScript with [SvelteKit](https://kit.svelte.dev/)** using SvelteKit's [actions](https://kit.svelte.dev/docs/form-actions) and [load](https://kit.svelte.dev/docs/form-actions#loading-data) functions and [Prisma Client](https://www.prisma.io/docs/reference/tools-and-interfaces/prisma-client). It uses a SQLite database file with some initial dummy data which you can find at [`./prisma/dev.db`](./prisma/dev.db).
+This example shows how to implement a simple web app using [SvelteKit](https://svelte.dev/docs/kit) and [Prisma ORM](https://www.prisma.io/docs).
 
 ## Getting started
 
-### 1. Download example and navigate into the project directory
+### 1. Download the example and navigate to the project directory
 
 Download this example:
 
 ```
 npx try-prisma@latest --template orm/sveltekit
 ```
 
-Then, navigate into the project directory:
+Then navigate to the project directory
 
 ```
 cd sveltekit
@@ -41,281 +41,52 @@ This example uses a local SQLite database by default. If you want to use to [Pri
 
 1. Set up a new Prisma Postgres instance in the Prisma Data Platform [Console](https://console.prisma.io) and copy the database connection URL.
 2. Update the `datasource` block to use `postgresql` as the `provider` and paste the database connection URL as the value for `url`:
-    ```prisma
-    datasource db {
-      provider = "postgresql"
-      url      = "prisma+postgres://accelerate.prisma-data.net/?api_key=ey...."
-    }
-    ```
-
-    > **Note**: In production environments, we recommend that you set your connection URL via an [environment variable](https://www.prisma.io/docs/orm/more/development-environment/environment-variables/managing-env-files-and-setting-variables), e.g. using a `.env` file.
-3. Install the Prisma Accelerate extension:
-    ```
-    npm install @prisma/extension-accelerate
-    ```
-4. Add the Accelerate extension to the `PrismaClient` instance:
-    ```diff
-    + import { withAccelerate } from "@prisma/extension-accelerate"
-
-    + const prisma = new PrismaClient().$extends(withAccelerate())
-    ```
-
-That's it, your project is now configured to use Prisma Postgres!
-
-### 2. Create and seed the database
-
-Run the following command to create your database. This also creates the `User` and `Post` tables that are defined in [`prisma/schema.prisma`](./prisma/schema.prisma):
-
-```
-npx prisma migrate dev --name init
-```
-
-When `npx prisma migrate dev` is executed against a newly created database, seeding is also triggered. The seed file in [`prisma/seed.ts`](./prisma/seed.ts) will be executed and your database will be populated with the sample data.
-
-**If you switched to Prisma Postgres in the previous step**, you need to trigger seeding manually (because Prisma Postgres already created an empty database instance for you, so seeding isn't triggered):
-
-```
-npx prisma db seed
-```
-
-
-### 3. Start the app
-
-```
-npm run dev
-```
-
-The app is now running, navigate to [`http://localhost:5173/`](http://localhost:5173/) in your browser to explore its UI.
-
-<details><summary>Expand for a tour through the UI of the app</summary>
-
-<br />
-
-**Blog** (located in [`./src/routes/+page.svelte`](./src/routes/+page.svelte))
-
-![home page](https://user-images.githubusercontent.com/49971500/214607585-2b21d5ea-7810-4f58-b866-f58f267e48a2.png)
-
-**Signup** (located in [`./src/routes/signup/+page.svelte`](./src/routes/signup/+page.svelte))
-
-![Sign up page](https://user-images.githubusercontent.com/49971500/214607832-be532abb-c28a-496c-b5b9-54295ab40edf.png)
-
-**Create post (draft)** (located in [`./src/routes/create/+page.svelte`](./src/routes/create/+page.svelte))
-
-![Create Post page](https://user-images.githubusercontent.com/49971500/214608388-022b23c6-05c5-4892-9839-a9e8c2de37c7.png)
-
-**Drafts** (located in [`./src/routes/drafts/+page.svelte`](./src/routes/drafts/+page.svelte))
-
-![View Draft[(https://user-images.githubusercontent.com/49971500/214608068-8a8b2b12-f47b-434f-b668-14fdd1df9edd.png)
-
-**View post** (located in [`./src/routes/p/[id]/+page.svelte`](./src/routes/p/[id]/+page.svelte)) (delete or publish here)
-
-![View Post](https://user-images.githubusercontent.com/49971500/214607411-9b470fa3-bc88-4b14-86e6-9ec18fd2e3dd.png)
-
-</details>
-
-## Using the SvelteKit Actions and Load functions
-
-The `load` functions interact with the server to get data into your pages while the `actions` function mutates your data. Both these functions are defined in the `+page.server.ts` in the respective route folders.
-
-### `LOAD`
-- `/`: Fetch all *published* posts
-- `/drafts`: Fetch all *drafted* posts
-- `/p/:id`: Fetch a *single* post by its `id`
-
-### `ACTIONS`
-- `/create`: Create a new post
-    - `default` action body:
-        - `title: String` (required): The title of the post
-        - `content: String` (required): The content of the post
-        - `authorEmail: String` (required): The email post's author
-- `/p/:id`:
-    - `publishPost` action: Publish a post by its `id`
-    - `deletePost` action: Delete a post by its `id`
-- `/signup`: Create a new user
-    - `default` action body:
-        - `email: String` (required): The email address of the user
-        - `name: String` (required): The name of the user
-
-## Evolving the app
-
-Evolving the application typically requires three steps:
-
-1. Migrate your database using Prisma Migrate
-1. Update your server-side application code
-1. Build new UI features in Svelte
-
-For the following example scenario, assume you want to add a "profile" feature to the app where users can create a profile and write a short bio about themselves.
-
-### 1. Migrate your database using Prisma Migrate
-
-The first step is to add a new table, e.g. called `Profile`, to the database. You can do this by adding a new model to your [Prisma schema file](./prisma/schema.prisma) file and then running a migration afterwards:
-
-```diff
-// schema.prisma
-
-model Post {
-  id        Int     @default(autoincrement()) @id
-  title     String
-  content   String?
-  published Boolean @default(false)
-  author    User?   @relation(fields: [authorId], references: [id])
-  authorId  Int
-}
-
-model User {
-  id      Int      @default(autoincrement()) @id
-  name    String?
-  email   String   @unique
-  posts   Post[]
-+ profile Profile?
-}
-
-+model Profile {
-+  id     Int     @default(autoincrement()) @id
-+  bio    String?
-+  userId Int     @unique
-+  user   User    @relation(fields: [userId], references: [id])
-+}
-```
-
-Once you've updated your data model, you can execute the changes against your database with the following command:
-
-```
-npx prisma migrate dev
-```
-
-### 2. Update your application code
-
-You can now use your `PrismaClient` instance to perform operations against the new `Profile` table. Here are some examples:
-
-#### Create a new profile for an existing user
-
-```ts
-const profile = await prisma.profile.create({
-  data: {
-    bio: "Hello World",
-    user: {
-      connect: { email: "[email protected]" },
-    },
-  },
-});
-```
-
-#### Create a new user with a new profile
-
-```ts
-const user = await prisma.user.create({
-  data: {
-    email: "[email protected]",
-    name: "John",
-    profile: {
-      create: {
-        bio: "Hello World",
-      },
-    },
-  },
-});
-```
-
-#### Update the profile of an existing user
-
-```ts
-const userWithUpdatedProfile = await prisma.user.update({
-  where: { email: "[email protected]" },
-  data: {
-    profile: {
-      update: {
-        bio: "Hello Friends",
-      },
-    },
-  },
-});
-```
-
-
-### 3. Build new UI features in Svelte
 
-Once you have added a new route to your app (e.g. `/profile/+page.server.ts` with respective load and action operations), you can start building a new UI component in Svelte. It could e.g. be called `/profile/+page.svelte` and would be located in the `src/routes` directory.
+   ```prisma
+   datasource db {
+     provider = "postgresql"
+     url      = "prisma+postgres://accelerate.prisma-data.net/?api_key=ey...."
+   }
+   ```
 
-In the application code, you can manipulate data using `actions` and populate the UI with the data you receive from the `load` function.
+   > **Note**: In production environments, we recommend that you set your connection URL via an [environment variable](https://www.prisma.io/docs/orm/more/development-environment/environment-variables/managing-env-files-and-setting-variables), e.g. using a `.env` file.
 
+3. Install the Prisma Accelerate extension:
+   ```
+   npm install @prisma/extension-accelerate
+   ```
+4. Add the Accelerate extension to the `PrismaClient` instance:
 
-## Switch to another database (e.g. PostgreSQL, MySQL, SQL Server, MongoDB)
-
-If you want to try this example with another database than SQLite, you can adjust the the database connection in [`prisma/schema.prisma`](./prisma/schema.prisma) by reconfiguring the `datasource` block.
+   ```diff
+   + import { withAccelerate } from "@prisma/extension-accelerate"
 
-Learn more about the different connection configurations in the [docs](https://www.prisma.io/docs/reference/database-reference/connection-urls).
+   + const prisma = new PrismaClient().$extends(withAccelerate())
+   ```
 
-<details><summary>Expand for an overview of example configurations with different databases</summary>
+That's it, your project is now configured to use Prisma Postgres!
 
-### PostgreSQL
+### 2. Generate Prisma Client
 
-For PostgreSQL, the connection URL has the following structure:
+Run the following command to generate the Prisma Client. This is what you will be using to interact with your database.
 
-```prisma
-datasource db {
-  provider = "postgresql"
-  url      = "postgresql://USER:PASSWORD@HOST:PORT/DATABASE?schema=SCHEMA"
-}
 ```
-
-Here is an example connection string with a local PostgreSQL database:
-
-```prisma
-datasource db {
-  provider = "postgresql"
-  url      = "postgresql://janedoe:mypassword@localhost:5432/notesapi?schema=public"
-}
+npx prisma generate
 ```
 
-### MySQL
-
-For MySQL, the connection URL has the following structure:
+### 3. Start the SvelteKit server
 
-```prisma
-datasource db {
-  provider = "mysql"
-  url      = "mysql://USER:PASSWORD@HOST:PORT/DATABASE"
-}
 ```
-
-Here is an example connection string with a local MySQL database:
-
-```prisma
-datasource db {
-  provider = "mysql"
-  url      = "mysql://janedoe:mypassword@localhost:3306/notesapi"
-}
-```
-
-### Microsoft SQL Server
-
-Here is an example connection string with a local Microsoft SQL Server database:
-
-```prisma
-datasource db {
-  provider = "sqlserver"
-  url      = "sqlserver://localhost:1433;initial catalog=sample;user=sa;password=mypassword;"
-}
+npm run dev
 ```
 
-### MongoDB
-
-Here is an example connection string with a local MongoDB database:
+The server is now running at http://localhost:5173
 
-```prisma
-datasource db {
-  provider = "mongodb"
-  url      = "mongodb://USERNAME:PASSWORD@HOST/DATABASE?authSource=admin&retryWrites=true&w=majority"
-}
-```
+## Switch to another database
 
-</details>
+If you want to try this example with another database than SQLite, refer to the [Databases](https://www.prisma.io/docs/orm/overview/databases) section in our documentation
 
 ## Next steps
 
 - Check out the [Prisma docs](https://www.prisma.io/docs)
-- [Join our community on Discord](https://pris.ly/discord?utm_source=github&utm_medium=prisma_examples&utm_content=next_steps_section) to share feedback and interact with other users.
-- [Subscribe to our YouTube channel](https://pris.ly/youtube?utm_source=github&utm_medium=prisma_examples&utm_content=next_steps_section) for live demos and video tutorials.
-- [Follow us on X](https://pris.ly/x?utm_source=github&utm_medium=prisma_examples&utm_content=next_steps_section) for the latest updates.
-- Report issues or ask [questions on GitHub](https://pris.ly/github?utm_source=github&utm_medium=prisma_examples&utm_content=next_steps_section).
+- Share your feedback on the [Prisma Discord](https://pris.ly/discord/)
+- Create issues and ask questions on [GitHub](https://github.com/prisma/prisma/)