Initial commit

.dockerignore

@@ -0,0 +1,10 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

.drone.yml

@@ -0,0 +1,114 @@
+---
+kind: pipeline
+type: docker
+name: build
+
+steps:
+- name: build
+  image: node:19
+  environment:
+    DATABASE_URL:
+      from_secret: DATABASE_URL
+    DB_USER:
+      from_secret: DB_USER
+    DB_PASSWORD:
+      from_secret: DB_PASSWORD
+  commands:
+  - npm install
+  - npm run check
+  - npx playwright install --with-deps
+  - npm run test
+  - npm run test:unit
+  - npm run build
+
+trigger:
+  event:
+  - push
+  - promote
+  - rollback
+
+---
+kind: pipeline
+type: exec
+name: deploy demo
+
+platform:
+  os: linux
+  arch: amd64
+
+steps:
+- name: deploy
+  environment:
+    COMPOSE_PROJECT_NAME: ${DRONE_REPO_NAME}
+    ORIGIN:
+      from_secret: DEMO_ORIGIN
+    PORT:
+      from_secret: PORT
+    DATABASE_URL:
+      from_secret: DATABASE_URL
+    DB_USER:
+      from_secret: DB_USER
+    DB_PASSWORD:
+      from_secret: DB_PASSWORD
+  commands:
+  - docker compose up -d --build
+
+depends_on:
+  - build
+
+trigger:
+  branch:
+  - demo
+  event:
+  - push
+  - promote
+  - rollback
+  target:
+    exclude:
+    - production
+
+---
+kind: pipeline
+type: ssh
+name: deploy prod
+
+server:
+  host:
+    from_secret: host
+  user: 
+    from_secret: username
+  ssh_key:
+    from_secret: ssh_key
+
+platform:
+  os: linux
+  arch: amd64
+
+steps:
+- name: deploy
+  environment:
+    COMPOSE_PROJECT_NAME: ${DRONE_REPO_NAME,,}
+    ORIGIN:
+      from_secret: PROD_ORIGIN
+    PORT:
+      from_secret: PORT
+    DATABASE_URL:
+      from_secret: DATABASE_URL
+    DB_USER:
+      from_secret: DB_USER
+    DB_PASSWORD:
+      from_secret: DB_PASSWORD
+  commands:
+  - docker compose up -d --build
+
+depends_on:
+  - build
+
+trigger:
+  branch:
+  - demo
+  event:
+  - promote
+  - rollback
+  target:
+  - production

.eslintignore

@@ -0,0 +1,13 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

.eslintrc.cjs

@@ -0,0 +1,20 @@
+module.exports = {
+	root: true,
+	parser: '@typescript-eslint/parser',
+	extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
+	plugins: ['svelte3', '@typescript-eslint'],
+	ignorePatterns: ['*.cjs'],
+	overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
+	settings: {
+		'svelte3/typescript': () => require('typescript')
+	},
+	parserOptions: {
+		sourceType: 'module',
+		ecmaVersion: 2020
+	},
+	env: {
+		browser: true,
+		es2017: true,
+		node: true
+	}
+};

.gitignore

@@ -0,0 +1,10 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

.npmrc

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

.prettierignore

@@ -0,0 +1,13 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

.prettierrc

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

Dockerfile

@@ -0,0 +1,24 @@
+FROM node:19 AS node
+
+# Define environment variables
+ARG ORIGIN
+ENV ORIGIN $ORIGIN
+ARG DATABASE_URL
+ENV DATABASE_URL $DATABASE_URL
+
+# Install dependencies
+WORKDIR /app
+COPY ./package.json .
+COPY ./package-lock.json .
+COPY ./svelte.config.js .
+RUN npm install
+
+# Move everything to container
+COPY . .
+
+# Build for production
+RUN npm run build
+
+# Launch app
+CMD ["node", "build"]
+EXPOSE 3000

README.md

@@ -0,0 +1,112 @@
+# 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`.

docker-compose.yml

@@ -0,0 +1,15 @@
+version: '3.9'
+
+services:
+  app:
+    build:
+      context: .
+      args:
+        ORIGIN: ${ORIGIN}
+        DATABASE_URL: ${DATABASE_URL}
+    container_name: ${DRONE_REPO_NAME}
+    environment:
+      ORIGIN: ${ORIGIN}
+      DATABASE_URL: ${DATABASE_URL}
+    ports:
+      - "${PORT}:3000"

package.json

@@ -0,0 +1,47 @@
+{
+	"name": "sveltekit-prisma-tailwind",
+	"version": "0.0.1",
+	"private": true,
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
+		"test": "playwright test",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"test:unit": "vitest run",
+		"test:unit:watch": "vitest",
+		"lint": "prettier --plugin-search-dir . --check . && eslint .",
+		"format": "prettier --plugin-search-dir . --write ."
+	},
+	"devDependencies": {
+		"@playwright/test": "^1.28.1",
+		"@sveltejs/adapter-auto": "^2.0.0",
+		"@sveltejs/kit": "^1.5.0",
+		"@types/node": "^18.15.3",
+		"@typescript-eslint/eslint-plugin": "^5.45.0",
+		"@typescript-eslint/parser": "^5.45.0",
+		"autoprefixer": "^10.4.14",
+		"eslint": "^8.28.0",
+		"eslint-config-prettier": "^8.5.0",
+		"eslint-plugin-svelte3": "^4.0.0",
+		"postcss": "^8.4.21",
+		"prettier": "^2.8.0",
+		"prettier-plugin-svelte": "^2.8.1",
+		"prisma": "^4.11.0",
+		"svelte": "^3.54.0",
+		"svelte-check": "^3.0.1",
+		"tailwindcss": "^3.2.7",
+		"ts-node": "^10.9.1",
+		"tslib": "^2.4.1",
+		"typescript": "^4.9.3",
+		"vite": "^4.0.0",
+		"vitest": "^0.25.3"
+	},
+	"type": "module",
+	"dependencies": {
+		"@prisma/client": "^4.11.0",
+		"@sveltejs/adapter-node": "^1.2.3",
+		"zod": "^3.21.4"
+	}
+}

playwright.config.ts

@@ -0,0 +1,11 @@
+import type { PlaywrightTestConfig } from '@playwright/test';
+
+const config: PlaywrightTestConfig = {
+	webServer: {
+		command: 'npm run build && npm run preview',
+		port: 4173
+	},
+	testDir: 'tests'
+};
+
+export default config;

postcss.config.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/app.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

src/app.d.ts

@@ -0,0 +1,12 @@
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+declare global {
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface Platform {}
+	}
+}
+
+export {};

src/app.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="apple-touch-icon" sizes="180x180" href="%sveltekit.assets%/apple-touch-icon.png">
+		<link rel="icon" type="image/png" sizes="32x32" href="%sveltekit.assets%/favicon-32x32.png">
+		<link rel="icon" type="image/png" sizes="16x16" href="%sveltekit.assets%/favicon-16x16.png">
+		<link rel="manifest" href="%sveltekit.assets%/site.webmanifest">
+		<link rel="mask-icon" href="%sveltekit.assets%/safari-pinned-tab.svg" color="#5bbad5">
+		<meta name="msapplication-TileColor" content="#da532c">
+		<meta name="theme-color" content="#ffffff">
+		<meta name="viewport" content="width=device-width" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>

src/index.test.ts

@@ -0,0 +1,7 @@
+import { describe, it, expect } from 'vitest';
+
+describe('sum test', () => {
+	it('adds 1 + 2 to equal 3', () => {
+		expect(1 + 2).toBe(3);
+	});
+});

src/routes/+layout.svelte

@@ -0,0 +1,5 @@
+<script>
+	import '../app.css';
+</script>
+
+<slot />

src/routes/+page.svelte

@@ -0,0 +1,2 @@
+<h1>Welcome to SvelteKit</h1>
+<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>

static/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#da532c</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

static/safari-pinned-tab.svg

@@ -0,0 +1,34 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="512.000000pt" height="512.000000pt" viewBox="0 0 512.000000 512.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.14, written by Peter Selinger 2001-2017
+</metadata>
+<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M2347 4714 c-1 -1 -69 -4 -152 -7 -82 -4 -161 -9 -175 -11 -14 -2
+-52 -7 -85 -10 -75 -8 -110 -13 -210 -32 -77 -15 -96 -19 -140 -28 -181 -40
+-433 -144 -575 -239 -126 -85 -246 -245 -321 -432 -35 -87 -82 -281 -94 -390
+-4 -33 -9 -71 -11 -85 -17 -93 -25 -1201 -11 -1430 27 -434 133 -760 312 -961
+53 -59 167 -155 240 -201 74 -47 130 -75 257 -126 81 -33 297 -89 418 -108 19
+-3 46 -7 60 -9 14 -3 50 -7 80 -11 30 -3 66 -7 80 -10 141 -23 924 -23 1100 1
+19 3 55 7 80 10 170 21 374 79 480 137 67 36 168 108 194 137 11 12 22 18 25
+14 13 -18 367 -296 377 -297 11 -1 49 42 84 94 8 12 36 50 61 84 25 33 103
+140 173 236 l127 175 -23 15 c-12 8 -31 24 -42 35 -11 11 -96 70 -190 131
+-195 127 -184 108 -145 256 5 20 12 63 15 95 3 32 7 64 10 72 8 24 18 510 18
+901 1 323 -6 542 -19 635 -3 17 -7 53 -10 80 -8 70 -42 265 -59 338 -24 102
+-108 272 -183 370 -98 127 -302 303 -449 387 -144 82 -328 144 -464 156 -36 3
+-68 8 -72 10 -11 7 -753 24 -761 18z m418 -979 c164 -19 283 -65 323 -124 21
+-32 54 -128 67 -196 41 -212 52 -392 41 -710 -2 -49 -5 -154 -6 -232 -2 -78
+-6 -146 -9 -152 -6 -8 -467 317 -532 375 -8 8 -21 14 -27 14 -6 0 -50 -57 -98
+-127 -49 -71 -92 -132 -97 -138 -4 -5 -58 -82 -119 -169 -105 -150 -110 -160
+-92 -173 10 -7 31 -24 45 -38 28 -25 60 -48 324 -226 94 -63 175 -118 180
+-122 6 -5 36 -25 68 -46 33 -21 55 -41 50 -44 -19 -12 -162 -44 -213 -47 -94
+-6 -361 -4 -450 3 -104 9 -239 41 -300 70 -24 12 -55 37 -67 56 -26 38 -72
+175 -79 236 -3 22 -7 46 -10 54 -13 40 -19 234 -19 661 0 506 4 584 35 707 61
+239 165 315 500 368 83 13 370 13 485 0z"/>
+</g>
+</svg>

static/site.webmanifest

@@ -0,0 +1,19 @@
+{
+    "name": "",
+    "short_name": "",
+    "icons": [
+        {
+            "src": "/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}

svelte.config.js

@@ -0,0 +1,18 @@
+import adapter from '@sveltejs/adapter-node';
+import { vitePreprocess } from '@sveltejs/kit/vite';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
+	// for more information about preprocessors
+	preprocess: vitePreprocess(),
+
+	kit: {
+		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
+		// If your environment is not supported or you settled on a specific environment, switch out the adapter.
+		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
+		adapter: adapter()
+	}
+};
+
+export default config;

tailwind.config.cjs

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./src/**/*.{html,js,svelte,ts}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}

tests/test.ts

@@ -0,0 +1,6 @@
+import { expect, test } from '@playwright/test';
+
+test('index page has expected h1', async ({ page }) => {
+	await page.goto('/');
+	await expect(page.getByRole('heading', { name: 'Welcome to SvelteKit' })).toBeVisible();
+});

tsconfig.json

@@ -0,0 +1,17 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true
+	}
+	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
+	//
+	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
+	// from the referenced tsconfig.json - TypeScript does not merge them in
+}

vite.config.ts

@@ -0,0 +1,9 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+	plugins: [sveltekit()],
+	test: {
+		include: ['src/**/*.{test,spec}.{js,ts}']
+	}
+});