feat: init rest-analog project

typescript/rest-analog/.editorconfig

@@ -0,0 +1,16 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

typescript/rest-analog/.gitignore

@@ -0,0 +1,44 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# Compiled output
+/dist
+/tmp
+/out-tsc
+/bazel-out
+
+# Node
+/node_modules
+npm-debug.log
+yarn-error.log
+
+# IDEs and editors
+.idea/
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# Visual Studio Code
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# Miscellaneous
+/.angular/cache
+/.nx/cache
+/.nx/workspace-data
+.sass-cache/
+/connect.lock
+/coverage
+/libpeerconnection.log
+testem.log
+/typings
+
+# System files
+.DS_Store
+Thumbs.db

typescript/rest-analog/README.md

@@ -0,0 +1,291 @@
+# Fullstack Example with Analog (REST API)
+
+This example shows how to implement a **fullstack app with [Analog](https://analogjs.org/)** using [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).
+
+## Getting started
+
+### 1. Download example and install dependencies
+
+Download this example:
+
+```
+npx try-prisma@latest --template typescript/rest-analog
+```
+
+Install npm dependencies:
+
+```
+cd rest-analog
+npm install
+```
+
+<details><summary><strong>Alternative:</strong> Clone the entire repo</summary>
+
+Clone this repository:
+
+```
+git clone [email protected]:prisma/prisma-examples.git --depth=1
+```
+
+Install npm dependencies:
+
+```
+cd prisma-examples/typescript/rest-analog
+npm install
+```
+
+</details>
+
+### 2. Create and seed the database
+
+Run the following command to create your SQLite database file. 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.
+
+### 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/app/pages/index.page.ts`](./src/app/pages/index.page.ts)
+
+![](https://imgur.com/eepbOUO.png)
+
+**Signup** (located in [`./rc/app/pages/signup.page.ts`](./src/app/pages/signup.page.ts))
+
+![](https://imgur.com/iE6OaBI.png)
+
+**Create post (draft)** (located in [`./src/app/pages/create.page.ts`](./src/app/pages/create.page.ts))
+
+![](https://imgur.com/olCWRNv.png)
+
+**Drafts** (located in [`./src/app/pages/drafts.page.ts`](./src/app/pages/drafts.page.ts))
+
+![](https://imgur.com/PSMzhcd.png)
+
+**View post** (located in [`./src/app/pages/p/_id.vue`](src/app/pages/post/_id.vue)) (delete or publish here)
+
+![](https://imgur.com/zS1B11O.png)
+
+</details>
+
+## Using the REST API
+
+You can also access the REST API of the API server directly. It is running on the same host machine and port and can be accessed via the `/api` route (in this case that is `localhost:3000/api/`, so you can e.g. reach the API with [`localhost:3000/api/feed`](http://localhost:3000/api/feed)).
+
+### `GET`
+
+- `/api/post/:id`: Fetch a single post by its `id`
+- `/api/feed`: Fetch all _published_ posts
+- `/api/filterPosts?searchString={searchString}`: Filter posts by `title` or `content`
+
+### `POST`
+
+- `/api/post`: Create a new post
+  - Body:
+    - `title: String` (required): The title of the post
+    - `content: String` (optional): The content of the post
+    - `authorEmail: String` (required): The email of the user that creates the post
+- `/api/user`: Create a new user
+  - Body:
+    - `email: String` (required): The email address of the user
+    - `name: String` (optional): The name of the user
+
+### `PUT`
+
+- `/api/publish/:id`: Publish a post by its `id`
+
+### `DELETE`
+
+- `/api/post/:id`: Delete a post by its `id`
+
+## 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.
+
+Learn more about the different connection configurations in the [docs](https://www.prisma.io/docs/reference/database-reference/connection-urls).
+
+<details><summary>Expand for an overview of example configurations with different databases</summary>
+
+### PostgreSQL
+
+For PostgreSQL, the connection URL has the following structure:
+
+```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"
+}
+```
+
+### MySQL
+
+For MySQL, the connection URL has the following structure:
+
+```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;"
+}
+```
+
+### MongoDB
+
+Here is an example connection string with a local MongoDB database:
+
+```prisma
+datasource db {
+  provider = "mongodb"
+  url      = "mongodb://USERNAME:PASSWORD@HOST/DATABASE?authSource=admin&retryWrites=true&w=majority"
+}
+```
+
+</details>
+
+## 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 Vue
+
+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 --name add-profile
+```
+
+### 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',
+      },
+    },
+  },
+})
+```
+
+### 5. Build new UI features in Vue
+
+Once you have added a new endpoint to the API (e.g. `/api/profile` with `/POST`, `/PUT` and `GET` operations), you can start building a new UI component in Vue. It could e.g. be called `profile.vue` and would be located in the `pages` directory.
+
+In the application code, you can access the new endpoint via `fetch` operations and populate the UI with the data you receive from the API calls.
+
+## Next steps
+
+- Check out the [Prisma docs](https://www.prisma.io/docs)
+- Share your feedback on the [Prisma Discord](https://pris.ly/discord/)
+- Create issues and ask questions on [GitHub](https://github.com/prisma/prisma/)