add v10 next-prisma-starter-websockets example

.github/workflows/examples.yml

@@ -34,7 +34,7 @@ jobs:
             .interop/cloudflare-workers,
             next-prisma-starter,
             next-prisma-starter-sqlite,
-            # next-prisma-starter-websockets,
+            next-prisma-starter-websockets,
             # next-prisma-todomvc,
             standalone-server,
           ]

examples/next-prisma-starter-websockets/.env

@@ -0,0 +1,12 @@
+# Environment variables declared in this file are automatically made available to Prisma.
+# See the documentation for more detail: https://pris.ly/d/prisma-schema#using-environment-variables
+
+# Prisma supports the native connection string format for PostgreSQL, MySQL and SQLite.
+# See the documentation for all the connection string options: https://pris.ly/d/connection-strings
+
+# Make sure to override these in deployment
+DATABASE_URL="postgresql://postgres:@localhost:5932/trpc-starter-websockets?schema=public"
+APP_URL="http://localhost:3000"
+WS_URL="ws://localhost:3001"
+NEXTAUTH_URL="http://localhost:3000/api/auth"
+# NEXTAUTH_SECRET=""

examples/next-prisma-starter-websockets/.eslintrc

@@ -0,0 +1,35 @@
+{
+  "parser": "@typescript-eslint/parser", // Specifies the ESLint parser
+  "extends": [
+    "plugin:@typescript-eslint/recommended", // Uses the recommended rules from the @typescript-eslint/eslint-plugin
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:prettier/recommended"
+  ],
+  "parserOptions": {
+    "ecmaVersion": 2018, // Allows for the parsing of modern ECMAScript features
+    "sourceType": "module", // Allows for the use of imports,
+    "project": "tsconfig.json"
+  },
+  "rules": {
+    // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
+    "@typescript-eslint/explicit-function-return-type": "off",
+    "@typescript-eslint/explicit-module-boundary-types": "off",
+    "react/react-in-jsx-scope": "off",
+    "react/prop-types": "off",
+    "@typescript-eslint/no-explicit-any": "off"
+  },
+  // "overrides": [
+  //   {
+  //     "files": [],
+  //     "rules": {
+  // "@typescript-eslint/no-unused-vars": "off"
+  //     }
+  //   }
+  // ],
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  }
+}

examples/next-prisma-starter-websockets/.github/FUNDING.yml

@@ -0,0 +1,3 @@
+# These are supported funding model platforms
+
+github: KATT

examples/next-prisma-starter-websockets/.github/dependabot.yml

@@ -0,0 +1,7 @@
+version: 2
+updates:
+  - package-ecosystem: npm
+    directory: '/'
+    schedule:
+      interval: daily
+    open-pull-requests-limit: 2

examples/next-prisma-starter-websockets/.github/workflows/codeql-analysis.yml

@@ -0,0 +1,71 @@
+# For most projects, this workflow file will not need changing; you simply need
+# to commit it to your repository.
+#
+# You may wish to alter this file to override the set of languages analyzed,
+# or to provide custom queries or build logic.
+#
+# ******** NOTE ********
+# We have attempted to detect the languages in your repository. Please check
+# the `language` matrix defined below to confirm you have the correct set of
+# supported CodeQL languages.
+#
+name: "CodeQL"
+
+on:
+  push:
+    branches: [ main, 0.x ]
+  pull_request:
+    # The branches below must be a subset of the branches above
+    branches: [ main ]
+  schedule:
+    - cron: '27 0 * * 0'
+
+jobs:
+  analyze:
+    name: Analyze
+    runs-on: ubuntu-latest
+    permissions:
+      actions: read
+      contents: read
+      security-events: write
+
+    strategy:
+      fail-fast: false
+      matrix:
+        language: [ 'typescript' ]
+        # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python' ]
+        # Learn more:
+        # https://docs.github.com/en/free-pro-team@latest/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#changing-the-languages-that-are-analyzed
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v2
+
+    # Initializes the CodeQL tools for scanning.
+    - name: Initialize CodeQL
+      uses: github/codeql-action/init@v1
+      with:
+        languages: ${{ matrix.language }}
+        # If you wish to specify custom queries, you can do so here or in a config file.
+        # By default, queries listed here will override any specified in a config file.
+        # Prefix the list here with "+" to use these queries and those in the config file.
+        # queries: ./path/to/local/query, your-org/your-repo/queries@main
+
+    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
+    # If this step fails, then you should remove it and run the build manually (see below)
+    - name: Autobuild
+      uses: github/codeql-action/autobuild@v1
+
+    # ℹ️ Command-line programs to run using the OS shell.
+    # 📚 https://git.io/JvXDl
+
+    # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
+    #    and modify them (or add more) to build your code if your project
+    #    uses a compiled language
+
+    #- run: |
+    #   make bootstrap
+    #   make release
+
+    - name: Perform CodeQL Analysis
+      uses: github/codeql-action/analyze@v1

examples/next-prisma-starter-websockets/.github/workflows/main.yml

@@ -0,0 +1,40 @@
+name: E2E-testing
+on: [push]
+jobs:
+  e2e:
+    env:
+      DATABASE_URL: postgresql://postgres:@localhost:5432/trpcdb
+      NODE_ENV: test
+      NEXTAUTH_SECRET: supersecret
+    runs-on: ${{ matrix.os }}
+    strategy:
+      matrix:
+        node: ['14.x']
+        os: [ubuntu-latest]
+    services:
+      postgres:
+        image: postgres:12.1
+        env:
+          POSTGRES_USER: postgres
+          POSTGRES_DB: trpcdb
+        ports:
+          - 5432:5432
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v2
+
+      # - name: Install deps and build (with cache)
+      #   uses: bahmutov/npm-install@v1
+      - run: yarn install
+
+      - name: Next.js cache
+        uses: actions/cache@v2
+        with:
+          path: ${{ github.workspace }}/.next/cache
+          key: ${{ runner.os }}-${{ runner.node }}--nextjs
+
+      - run: yarn playwright install-deps
+      - run: yarn lint
+      - run: yarn build
+      - run: yarn test-start
+      - run: yarn test-dev

examples/next-prisma-starter-websockets/.gitignore

@@ -0,0 +1,37 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
+
+*.db
+*.db-journal

examples/next-prisma-starter-websockets/.vscode/extensions.json

@@ -0,0 +1,7 @@
+{
+  "recommendations": [
+    "esbenp.prettier-vscode",
+    "dbaeumer.vscode-eslint",
+    "prisma.prisma"
+  ]
+}

examples/next-prisma-starter-websockets/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

examples/next-prisma-starter-websockets/README.md

@@ -0,0 +1,80 @@
+# Prisma + tRPC + WebSockets
+
+> ℹ️ WebSockets is a beta feature & may change without major version bump ℹ️
+
+
+- Try demo http://websockets.trpc.io/
+
+
+## Features
+
+- 🧙‍♂️ E2E type safety with [tRPC](https://trpc.io)
+- ⚡ Full-stack React with Next.js
+- ⚡ WebSockets / Subscription support
+- ⚡ Database with Prisma
+- 🔐 Authorization using [next-auth](https://next-auth.js.org/)
+- ⚙️ VSCode extensions
+- 🎨 ESLint + Prettier
+- 💚 CI setup using GitHub Actions:
+  - ✅ E2E testing with [Playwright](https://playwright.dev/)
+  - ✅ Linting
+
+
+## Setup
+
+```bash
+yarn create next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-starter-websockets trpc-prisma-starter-websockets
+cd trpc-prisma-starter-websockets
+yarn
+yarn dx
+```
+
+## Deployment
+
+### Using [Render](https://render.com/)
+
+The project contains a [`render.yaml`](./render.yaml) [*"Blueprint"*](https://render.com/docs/blueprint-spec) which makes the project easily deployable on [Render](https://render.com/).
+
+Go to [dashboard.render.com/blueprints](https://dashboard.render.com/blueprints) and connect to this Blueprint and see how the app and database automatically gets deployed.
+
+
+## Files of note
+
+<table>
+  <thead>
+    <tr>
+      <th>Path</th>
+      <th>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><a href="./prisma/schema.prisma"><code>./prisma/schema.prisma</code></a></td>
+      <td>Prisma schema</td>
+    </tr>
+    <tr>
+      <td><a href="./src/api/trpc/[trpc].tsx"><code>./src/api/trpc/[trpc].tsx</code></a></td>
+      <td>tRPC response handler</td>
+    </tr>
+    <tr>
+      <td><a href="./src/server/routers"><code>./src/server/routers</code></a></td>
+      <td>Your app's different tRPC-routers</td>
+    </tr>
+  </tbody>
+</table>
+
+## Commands
+
+```bash
+yarn build      # runs `prisma generate` + `prisma migrate` + `next build`
+yarn db-nuke    # resets local db
+yarn dev        # starts next.js + WebSocket server
+yarn dx         # starts postgres db + runs migrations + seeds + starts next.js 
+yarn test-dev   # runs e2e tests on dev
+yarn test-start # runs e2e tests on `next start` - build required before
+yarn test:unit  # runs normal jest unit tests
+yarn test:e2e   # runs e2e tests
+```
+---
+
+Created by [@alexdotjs](https://twitter.com/alexdotjs).

examples/next-prisma-starter-websockets/docker-compose.yaml

@@ -0,0 +1,14 @@
+version: '3.6'
+services:
+  postgres:
+    image: postgres:13
+    ports:
+      - '5932:5432' # expose pg on port 5932 to not collide with pg from elswhere
+    restart: always
+    volumes:
+      - db_data:/var/lib/postgresql/data
+    environment:
+      POSTGRES_PASSWORD: ${PGPASSWORD}
+      POSTGRES_HOST_AUTH_METHOD: trust
+volumes:
+  db_data:

examples/next-prisma-starter-websockets/jest-playwright.config.js

@@ -0,0 +1,8 @@
+// https://github.com/playwright-community/jest-playwright/#configuration
+module.exports = {
+  browsers: ['chromium', 'firefox'],
+  exitOnPageError: false, // GitHub currently throws errors
+  launchOptions: {
+    headless: true,
+  },
+};

examples/next-prisma-starter-websockets/jest.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  verbose: true,
+  preset: 'jest-playwright-preset',
+  transform: {
+    '^.+\\.ts$': 'ts-jest',
+  },
+};

examples/next-prisma-starter-websockets/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

examples/next-prisma-starter-websockets/next.config.js

@@ -0,0 +1,14 @@
+/**
+ * @link https://nextjs.org/docs/api-reference/next.config.js/introduction
+ */
+
+module.exports = {
+  serverRuntimeConfig: {
+    // Will only be available on the server side
+  },
+  publicRuntimeConfig: {
+    // Will be available on both server and client
+    APP_URL: process.env.APP_URL,
+    WS_URL: process.env.WS_URL,
+  },
+};