├── with-nuxt ├── types │ └── index.ts ├── public │ ├── robots.txt │ └── favicon.ico ├── .gitignore ├── server │ ├── tsconfig.json │ └── api │ │ ├── dinosaurs.get.ts │ │ └── dinosaurs │ │ └── [name].get.ts ├── tsconfig.json ├── assets │ └── css │ │ └── main.css ├── app.vue ├── README.md ├── tailwind.config.js ├── pages │ ├── [name].vue │ └── index.vue ├── package.json └── nuxt.config.ts ├── with-qwik ├── public │ ├── robots.txt │ ├── manifest.json │ └── favicon.svg ├── src │ ├── global.css │ ├── types.tsx │ ├── routes │ │ ├── layout.tsx │ │ ├── api │ │ │ └── dinosaurs │ │ │ │ ├── index.ts │ │ │ │ └── [name] │ │ │ │ └── index.ts │ │ ├── service-worker.ts │ │ ├── [name] │ │ │ └── index.tsx │ │ └── index.tsx │ ├── entry.dev.tsx │ ├── entry.preview.tsx │ ├── entry.ssr.tsx │ ├── root.tsx │ └── components │ │ └── router-head │ │ └── router-head.tsx ├── README.md ├── qwik.env.d.ts ├── tsconfig.json ├── package.json └── vite.config.ts ├── with-grafana ├── .env.example ├── deno.json ├── Dockerfile ├── readme.md ├── otel-collector.yml └── main.ts ├── .gitignore ├── with-honeycomb ├── .env.example ├── Dockerfile ├── deno.json ├── readme.md ├── otel-collector.yml └── main.ts ├── with-react ├── .vite │ └── deps │ │ ├── package.json │ │ ├── react.js.map │ │ ├── react.js │ │ └── _metadata.json ├── static │ ├── dinosaur-api.png │ └── react-dinosaur-app-demo.gif ├── src │ ├── main.jsx │ ├── App.jsx │ ├── pages │ │ ├── Dinosaur.jsx │ │ └── Index.jsx │ ├── App.css │ ├── index.css │ └── assets │ │ └── react.svg ├── vite.config.mjs ├── deno.json ├── index.html ├── api │ └── main.ts └── public │ └── vite.svg ├── with-astro ├── src │ ├── env.d.ts │ └── pages │ │ ├── [dinosaur].astro │ │ └── index.astro ├── tsconfig.json ├── .vscode │ ├── extensions.json │ └── launch.json ├── README.md ├── astro.config.mjs ├── .gitignore ├── package.json └── public │ └── favicon.svg ├── with-solidjs ├── src │ ├── vite-env.d.ts │ ├── types.ts │ ├── App.css │ ├── index.tsx │ ├── App.tsx │ ├── pages │ │ ├── Dinosaur.tsx │ │ └── Index.tsx │ ├── index.css │ └── assets │ │ └── solid.svg ├── README.md ├── tsconfig.json ├── vite.config.ts ├── index.html ├── package.json ├── dist │ ├── index.html │ ├── assets │ │ └── index-BvsELfKN.css │ └── vite.svg ├── deno.json ├── api │ └── main.ts └── public │ └── vite.svg ├── with-tanstack ├── .vite │ └── deps │ │ ├── package.json │ │ └── _metadata.json ├── src │ ├── vite-env.d.ts │ ├── components │ │ ├── Layout.tsx │ │ ├── DinosaurDetail.tsx │ │ └── DinosaurList.tsx │ ├── routeTree.tsx │ ├── main.tsx │ ├── App.css │ ├── App.tsx │ ├── index.css │ └── assets │ │ └── react.svg ├── .vscode │ └── extensions.json ├── README.md ├── tsconfig.json ├── deno.json ├── .gitignore ├── index.html ├── vite.config.ts ├── tsconfig.node.json ├── tsconfig.app.json ├── eslint.config.js ├── package.json ├── api │ └── main.ts └── public │ └── vite.svg ├── with-drizzle ├── .env ├── readme.md ├── deno.json ├── drizzle.config.ts ├── drizzle │ ├── meta │ │ ├── _journal.json │ │ └── 0000_snapshot.json │ ├── relations.ts │ ├── schema.ts │ └── 0000_slippery_stryfe.sql └── src │ ├── db │ ├── relations.ts │ ├── schema.ts │ └── db.ts │ └── script.ts ├── with-fresh ├── static │ ├── favicon.ico │ ├── logo.svg │ └── styles.css ├── utils.ts ├── .gitignore ├── dev.ts ├── routes │ ├── api │ │ └── [name].tsx │ ├── _app.tsx │ └── index.tsx ├── components │ └── Button.tsx ├── islands │ └── Counter.tsx ├── README.md ├── main.ts └── deno.json ├── with-vue ├── static │ ├── vue-demo.gif │ ├── api-response.png │ └── default-vue-app.png ├── src │ ├── App.vue │ ├── main.js │ ├── store.js │ ├── components │ │ ├── Dinosaur.vue │ │ ├── HomePage.vue │ │ └── Dinosaurs.vue │ ├── assets │ │ └── vue.svg │ ├── router │ │ └── index.ts │ └── style.css ├── deno.json ├── vite.config.mjs ├── index.html ├── api │ └── main.ts └── public │ └── vite.svg ├── with-oak-deno-kv ├── deno.jsonc ├── main.ts ├── readme.md └── db.ts ├── with-redis ├── images │ ├── cached-redis-body.png │ ├── cached-redis-header.png │ ├── uncached-redis-body.png │ └── uncached-redis-header.png └── main.ts ├── with-prisma ├── static │ ├── 1-dinosaurs-in-prisma.png │ ├── 2-dinosaurs-from-api.png │ └── 3-new-dinosaur-in-prisma.png ├── prisma │ ├── migrations │ │ ├── migration_lock.toml │ │ └── 20221102030334_init │ │ │ └── migration.sql │ ├── schema.prisma │ └── seed.ts ├── deno.json ├── package.json └── main.ts ├── on-aws-lightsail ├── static │ ├── new-image-on-docker-hub.png │ ├── hello-world-from-localhost.png │ ├── create-container-service-on-aws.png │ └── hello-world-from-deno-and-aws-lightsail.png ├── Dockerfile ├── docker-compose.yml ├── main.ts └── container.template.json ├── on-digital-ocean ├── static │ ├── hello-world-from-localhost.png │ ├── hello-from-deno-and-digital-ocean.png │ └── new-deno-image-on-digital-ocean-container-registry.png ├── Dockerfile ├── docker-compose.yml └── main.ts ├── hello-world ├── main.ts ├── deno.json ├── Readme.md ├── deno.lock └── index.html ├── on-google-cloud-run ├── static │ ├── hello-from-google-cloud-run.png │ ├── image-in-google-artifact-registry.png │ └── new-repository-in-google-artifact-repository.png ├── Dockerfile ├── docker-compose.yml └── main.ts ├── simple-server ├── deno.json ├── readme.md ├── main.ts ├── public │ └── images │ │ ├── deploy.svg │ │ └── deno.svg └── pages │ ├── about.html │ └── index.html ├── with-trpc ├── readme.md ├── deno.json ├── server │ ├── trpc.ts │ ├── db.ts │ └── index.ts ├── deno.lock └── client │ └── index.ts ├── with-hyperdx ├── Dockerfile ├── deno.json ├── readme.md └── otel-collector.yml ├── with-apollo ├── schema.ts ├── main.ts └── resolvers.ts ├── with-express ├── main.ts └── readme.md ├── with-mongoose ├── model │ └── Dinosaur.ts ├── main.ts └── README.md ├── with-planetscale ├── main.ts └── README.md ├── with-fastify ├── main.ts └── readme.md ├── with-mysql2 ├── main.ts └── README.md └── readme.md /with-nuxt/types/index.ts: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /with-qwik/public/robots.txt: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /with-qwik/src/global.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /with-nuxt/public/robots.txt: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /with-nuxt/.gitignore: -------------------------------------------------------------------------------- 1 | .output 2 | .nuxt -------------------------------------------------------------------------------- /with-grafana/.env.example: -------------------------------------------------------------------------------- 1 | OPENAI_API_KEY=xxx -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | .DS_Store 3 | **/node_modules -------------------------------------------------------------------------------- /with-honeycomb/.env.example: -------------------------------------------------------------------------------- 1 | OPENAI_API_KEY=xxx -------------------------------------------------------------------------------- /with-react/.vite/deps/package.json: -------------------------------------------------------------------------------- 1 | {"type":"module"} -------------------------------------------------------------------------------- /with-astro/src/env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /with-astro/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "astro/tsconfigs/strict" 3 | } -------------------------------------------------------------------------------- /with-solidjs/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /with-tanstack/.vite/deps/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "type": "module" 3 | } 4 | -------------------------------------------------------------------------------- /with-tanstack/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /with-drizzle/.env: -------------------------------------------------------------------------------- 1 | DATABASE_URL=postgresql://postgres:admin@localhost:5432/drizzle-orm 2 | -------------------------------------------------------------------------------- /with-nuxt/server/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../.nuxt/tsconfig.server.json" 3 | } 4 | -------------------------------------------------------------------------------- /with-qwik/src/types.tsx: -------------------------------------------------------------------------------- 1 | export type Dino = { 2 | name: string; 3 | description: string; 4 | }; 5 | -------------------------------------------------------------------------------- /with-fresh/static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/denoland/examples/main/with-fresh/static/favicon.ico -------------------------------------------------------------------------------- /with-nuxt/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/denoland/examples/main/with-nuxt/public/favicon.ico -------------------------------------------------------------------------------- /with-tanstack/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": [ 3 | "denoland.vscode-deno" 4 | ] 5 | } -------------------------------------------------------------------------------- /with-vue/static/vue-demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/denoland/examples/main/with-vue/static/vue-demo.gif -------------------------------------------------------------------------------- /with-vue/static/api-response.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/denoland/examples/main/with-vue/static/api-response.png -------------------------------------------------------------------------------- /with-oak-deno-kv/deno.jsonc: -------------------------------------------------------------------------------- 1 | { 2 | "tasks": { 3 | "dev": "deno run -A --watch --unstable main.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /with-react/static/dinosaur-api.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/denoland/examples/main/with-react/static/dinosaur-api.png -------------------------------------------------------------------------------- /with-vue/static/default-vue-app.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/denoland/examples/main/with-vue/static/default-vue-app.png -------------------------------------------------------------------------------- /with-solidjs/src/types.ts: -------------------------------------------------------------------------------- 1 | // src/types.ts 2 | export type Dino = { 3 | name: string; 4 | description: string; 5 | }; 6 | -------------------------------------------------------------------------------- /with-nuxt/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | // https://nuxt.com/docs/guide/concepts/typescript 3 | "extends": "./.nuxt/tsconfig.json" 4 | } 5 | -------------------------------------------------------------------------------- /with-redis/images/cached-redis-body.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/denoland/examples/main/with-redis/images/cached-redis-body.png -------------------------------------------------------------------------------- /with-astro/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["astro-build.astro-vscode"], 3 | "unwantedRecommendations": [] 4 | } 5 | -------------------------------------------------------------------------------- /with-redis/images/cached-redis-header.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/denoland/examples/main/with-redis/images/cached-redis-header.png -------------------------------------------------------------------------------- /with-redis/images/uncached-redis-body.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/denoland/examples/main/with-redis/images/uncached-redis-body.png -------------------------------------------------------------------------------- /with-prisma/static/1-dinosaurs-in-prisma.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/denoland/examples/main/with-prisma/static/1-dinosaurs-in-prisma.png -------------------------------------------------------------------------------- /with-prisma/static/2-dinosaurs-from-api.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/denoland/examples/main/with-prisma/static/2-dinosaurs-from-api.png -------------------------------------------------------------------------------- /with-react/static/react-dinosaur-app-demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/denoland/examples/main/with-react/static/react-dinosaur-app-demo.gif -------------------------------------------------------------------------------- /with-redis/images/uncached-redis-header.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/denoland/examples/main/with-redis/images/uncached-redis-header.png -------------------------------------------------------------------------------- /with-prisma/static/3-new-dinosaur-in-prisma.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/denoland/examples/main/with-prisma/static/3-new-dinosaur-in-prisma.png -------------------------------------------------------------------------------- /on-aws-lightsail/static/new-image-on-docker-hub.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/denoland/examples/main/on-aws-lightsail/static/new-image-on-docker-hub.png -------------------------------------------------------------------------------- /with-astro/README.md: -------------------------------------------------------------------------------- 1 | # How to use Astro with Deno 2 | 3 | _Originally published on 4 | [deno.com/blog](https://deno.com/blog/build-astro-with-deno)._ 5 | -------------------------------------------------------------------------------- /with-react/.vite/deps/react.js.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "sources": [], 4 | "sourcesContent": [], 5 | "mappings": "", 6 | "names": [] 7 | } 8 | -------------------------------------------------------------------------------- /with-vue/src/App.vue: -------------------------------------------------------------------------------- 1 | 3 | 4 | 7 | 8 | 10 | -------------------------------------------------------------------------------- /on-aws-lightsail/static/hello-world-from-localhost.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/denoland/examples/main/on-aws-lightsail/static/hello-world-from-localhost.png -------------------------------------------------------------------------------- /on-digital-ocean/static/hello-world-from-localhost.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/denoland/examples/main/on-digital-ocean/static/hello-world-from-localhost.png -------------------------------------------------------------------------------- /with-nuxt/server/api/dinosaurs.get.ts: -------------------------------------------------------------------------------- 1 | import data from "./data.json"; 2 | 3 | export default defineCachedEventHandler(() => { 4 | return data; 5 | }); 6 | -------------------------------------------------------------------------------- /with-tanstack/README.md: -------------------------------------------------------------------------------- 1 | # How to build an app with Tanstack and Deno 2 | 3 | [Full tutorial published here.](https://docs.deno.com/examples/tanstack_tutorial) 4 | -------------------------------------------------------------------------------- /hello-world/main.ts: -------------------------------------------------------------------------------- 1 | import { serveFile } from "jsr:@std/http/file-server"; 2 | 3 | Deno.serve((req: Request) => { 4 | return serveFile(req, "./index.html"); 5 | }); -------------------------------------------------------------------------------- /with-qwik/README.md: -------------------------------------------------------------------------------- 1 | # How to build a Qwik app with Deno 2 | 3 | [Read the full tutorial in the Deno documentation.](https://docs.deno.com/examples/qwik_tutorial/) 4 | -------------------------------------------------------------------------------- /with-solidjs/README.md: -------------------------------------------------------------------------------- 1 | # How to build a SolidJS app with Deno 2 | 3 | _Originally published on 4 | [deno.com/blog](https://deno.com/blog/build-solidjs-with-deno)._ 5 | -------------------------------------------------------------------------------- /on-aws-lightsail/static/create-container-service-on-aws.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/denoland/examples/main/on-aws-lightsail/static/create-container-service-on-aws.png -------------------------------------------------------------------------------- /on-google-cloud-run/static/hello-from-google-cloud-run.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/denoland/examples/main/on-google-cloud-run/static/hello-from-google-cloud-run.png -------------------------------------------------------------------------------- /with-react/.vite/deps/react.js: -------------------------------------------------------------------------------- 1 | import { 2 | require_react 3 | } from "./chunk-BJFMU22U.js"; 4 | export default require_react(); 5 | //# sourceMappingURL=react.js.map 6 | -------------------------------------------------------------------------------- /on-digital-ocean/static/hello-from-deno-and-digital-ocean.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/denoland/examples/main/on-digital-ocean/static/hello-from-deno-and-digital-ocean.png -------------------------------------------------------------------------------- /simple-server/deno.json: -------------------------------------------------------------------------------- 1 | { 2 | "tasks": { 3 | "dev": "deno run --watch -RN main.ts" 4 | }, 5 | "imports": { 6 | "@std/assert": "jsr:@std/assert@1" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /with-fresh/utils.ts: -------------------------------------------------------------------------------- 1 | import { createDefine } from "fresh"; 2 | 3 | export interface State { 4 | title: string; 5 | } 6 | 7 | export const define = createDefine(); 8 | -------------------------------------------------------------------------------- /with-tanstack/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": [], 3 | "references": [ 4 | { "path": "./tsconfig.app.json" }, 5 | { "path": "./tsconfig.node.json" } 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /with-trpc/readme.md: -------------------------------------------------------------------------------- 1 | # How to build a typesafe API with tRPC and Deno 2 | 3 | _Originally published on 4 | [deno.com/blog](https://deno.com/blog/build-typesafe-apis-trpc)._ 5 | -------------------------------------------------------------------------------- /on-google-cloud-run/static/image-in-google-artifact-registry.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/denoland/examples/main/on-google-cloud-run/static/image-in-google-artifact-registry.png -------------------------------------------------------------------------------- /with-prisma/prisma/migrations/migration_lock.toml: -------------------------------------------------------------------------------- 1 | # Please do not edit this file manually 2 | # It should be added in your version-control system (i.e. Git) 3 | provider = "postgresql" -------------------------------------------------------------------------------- /on-aws-lightsail/static/hello-world-from-deno-and-aws-lightsail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/denoland/examples/main/on-aws-lightsail/static/hello-world-from-deno-and-aws-lightsail.png -------------------------------------------------------------------------------- /with-drizzle/readme.md: -------------------------------------------------------------------------------- 1 | # How to build a database app with Drizzle ORM and Deno 2 | 3 | _Originally published on 4 | [deno.com/blog](https://deno.com/blog/build-database-app-drizzle)._ 5 | -------------------------------------------------------------------------------- /with-prisma/deno.json: -------------------------------------------------------------------------------- 1 | { 2 | "tasks": { 3 | "migrate": "deno run -A --unstable npm:prisma migrate dev --name init", 4 | "dev": "deno run -A --unstable main.ts" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /hello-world/deno.json: -------------------------------------------------------------------------------- 1 | { 2 | "tasks": { 3 | "dev": "deno run --watch --allow-read --allow-net main.ts" 4 | }, 5 | "imports": { 6 | "@std/assert": "jsr:@std/assert@1" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /on-aws-lightsail/Dockerfile: -------------------------------------------------------------------------------- 1 | FROM denoland/deno 2 | 3 | EXPOSE 8000 4 | 5 | WORKDIR /app 6 | 7 | ADD . /app 8 | 9 | RUN deno cache main.ts 10 | 11 | CMD ["run", "--allow-net", "main.ts"] -------------------------------------------------------------------------------- /on-aws-lightsail/docker-compose.yml: -------------------------------------------------------------------------------- 1 | version: '3' 2 | 3 | services: 4 | web: 5 | build: . 6 | container_name: deno-container 7 | image: deno-image 8 | ports: 9 | - "8000:8000" -------------------------------------------------------------------------------- /on-digital-ocean/Dockerfile: -------------------------------------------------------------------------------- 1 | FROM denoland/deno 2 | 3 | EXPOSE 8000 4 | 5 | WORKDIR /app 6 | 7 | ADD . /app 8 | 9 | RUN deno cache main.ts 10 | 11 | CMD ["run", "--allow-net", "main.ts"] -------------------------------------------------------------------------------- /on-digital-ocean/docker-compose.yml: -------------------------------------------------------------------------------- 1 | version: '3' 2 | 3 | services: 4 | web: 5 | build: . 6 | container_name: deno-container 7 | image: deno-image 8 | ports: 9 | - "8000:8000" -------------------------------------------------------------------------------- /on-google-cloud-run/Dockerfile: -------------------------------------------------------------------------------- 1 | FROM denoland/deno 2 | 3 | EXPOSE 8000 4 | 5 | WORKDIR /app 6 | 7 | ADD . /app 8 | 9 | RUN deno cache main.ts 10 | 11 | CMD ["run", "--allow-net", "main.ts"] -------------------------------------------------------------------------------- /on-google-cloud-run/docker-compose.yml: -------------------------------------------------------------------------------- 1 | version: '3' 2 | 3 | services: 4 | web: 5 | build: . 6 | container_name: deno-container 7 | image: deno-image 8 | ports: 9 | - "8000:8000" -------------------------------------------------------------------------------- /on-google-cloud-run/static/new-repository-in-google-artifact-repository.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/denoland/examples/main/on-google-cloud-run/static/new-repository-in-google-artifact-repository.png -------------------------------------------------------------------------------- /with-astro/astro.config.mjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | import { defineConfig } from "astro/config"; 3 | 4 | // https://astro.build/config 5 | export default defineConfig({ 6 | output: "server", 7 | }); 8 | -------------------------------------------------------------------------------- /on-digital-ocean/static/new-deno-image-on-digital-ocean-container-registry.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/denoland/examples/main/on-digital-ocean/static/new-deno-image-on-digital-ocean-container-registry.png -------------------------------------------------------------------------------- /with-tanstack/.vite/deps/_metadata.json: -------------------------------------------------------------------------------- 1 | { 2 | "hash": "ed0358f5", 3 | "configHash": "00852ea5", 4 | "lockfileHash": "e3b0c442", 5 | "browserHash": "9e46bbd8", 6 | "optimized": {}, 7 | "chunks": {} 8 | } -------------------------------------------------------------------------------- /with-drizzle/deno.json: -------------------------------------------------------------------------------- 1 | { 2 | "imports": { 3 | "@types/pg": "npm:@types/pg@^8.11.10", 4 | "drizzle-kit": "npm:drizzle-kit@^0.27.2", 5 | "drizzle-orm": "npm:drizzle-orm@^0.36.0", 6 | "pg": "npm:pg@^8.13.1" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /with-solidjs/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": [], 3 | "references": [], 4 | "compilerOptions": { 5 | "jsx": "preserve", 6 | "jsxImportSource": "solid-js", 7 | "lib": ["DOM", "DOM.Iterable", "ESNext"] 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /with-vue/src/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from "vue"; 2 | import "./style.css"; 3 | import App from "./App.vue"; 4 | import router from "./router/index.ts"; 5 | 6 | const app = createApp(App); 7 | app.use(router); 8 | app.mount("#app"); 9 | -------------------------------------------------------------------------------- /with-nuxt/assets/css/main.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | a.btn-primary { 6 | display: inline-block; 7 | margin: 0.5rem; 8 | } 9 | 10 | a.btn-secondary::before { 11 | content: "← "; 12 | } -------------------------------------------------------------------------------- /with-qwik/src/routes/layout.tsx: -------------------------------------------------------------------------------- 1 | import { component$, Slot } from "@builder.io/qwik"; 2 | 3 | export default component$(() => { 4 | return ( 5 | <> 6 |
7 | 8 |
9 | 10 | ); 11 | }); 12 | -------------------------------------------------------------------------------- /simple-server/readme.md: -------------------------------------------------------------------------------- 1 | # Simple server example 2 | 3 | Deploy your own version of this example with a couple of clicks 4 | 5 | [![Deploy on Deno](https://deno.com/button)](https://app.deno.com/new?clone=https://github.com/denoland/examples&path=simple-server) -------------------------------------------------------------------------------- /with-qwik/qwik.env.d.ts: -------------------------------------------------------------------------------- 1 | // This file can be used to add references for global types like `vite/client`. 2 | 3 | // Add global `vite/client` types. For more info, see: https://vitejs.dev/guide/features#client-types 4 | /// 5 | -------------------------------------------------------------------------------- /with-grafana/deno.json: -------------------------------------------------------------------------------- 1 | { 2 | "tasks": { 3 | "start": "deno --allow-env --allow-net --env-file main.ts", 4 | "otel": "OTEL_DENO=true OTEL_SERVICE_NAME=chat-app deno run --unstable-otel --allow-net --allow-read --allow-env --env-file main.ts" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /with-vue/src/store.js: -------------------------------------------------------------------------------- 1 | import { reactive } from "vue"; 2 | 3 | export const store = reactive({ 4 | dinosaur: {}, 5 | setDinosaur(name, description) { 6 | this.dinosaur.name = name; 7 | this.dinosaur.description = description; 8 | }, 9 | }); 10 | -------------------------------------------------------------------------------- /with-honeycomb/Dockerfile: -------------------------------------------------------------------------------- 1 | FROM otel/opentelemetry-collector:latest 2 | 3 | # Copy the OTel Collector config into the container 4 | COPY otel-collector.yml /otel-config.yml 5 | 6 | # Run the OTel Collector with the provided config 7 | CMD ["--config", "/otel-config.yml"] -------------------------------------------------------------------------------- /with-hyperdx/Dockerfile: -------------------------------------------------------------------------------- 1 | FROM otel/opentelemetry-collector:latest 2 | 3 | # Copy the OTel Collector config into the container 4 | COPY otel-collector.yml /otel-config.yml 5 | 6 | # Run the OTel Collector with the provided config 7 | CMD ["--config", "/otel-config.yml"] -------------------------------------------------------------------------------- /with-grafana/Dockerfile: -------------------------------------------------------------------------------- 1 | FROM otel/opentelemetry-collector-contrib:latest 2 | 3 | # Copy the OTel Collector config into the container 4 | COPY otel-collector.yml /otel-config.yml 5 | 6 | # Run the OTel Collector with the provided config 7 | CMD ["--config", "/otel-config.yml"] -------------------------------------------------------------------------------- /with-fresh/.gitignore: -------------------------------------------------------------------------------- 1 | # dotenv environment variable files 2 | .env 3 | .env.development.local 4 | .env.test.local 5 | .env.production.local 6 | .env.local 7 | 8 | # Fresh build directory 9 | _fresh/ 10 | # npm + other dependencies 11 | node_modules/ 12 | vendor/ 13 | 14 | -------------------------------------------------------------------------------- /on-aws-lightsail/main.ts: -------------------------------------------------------------------------------- 1 | import { Application } from "https://deno.land/x/oak@v11.1.0/mod.ts"; 2 | 3 | const app = new Application(); 4 | 5 | app.use((ctx) => { 6 | ctx.response.body = "Hello from Deno and AWS Lightsail!"; 7 | }); 8 | 9 | await app.listen({ port: 8000 }); 10 | -------------------------------------------------------------------------------- /on-digital-ocean/main.ts: -------------------------------------------------------------------------------- 1 | import { Application } from "https://deno.land/x/oak@v11.1.0/mod.ts"; 2 | 3 | const app = new Application(); 4 | 5 | app.use((ctx) => { 6 | ctx.response.body = "Hello from Deno and Digital Ocean"; 7 | }); 8 | 9 | await app.listen({ port: 8000 }); 10 | -------------------------------------------------------------------------------- /with-astro/.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.2.0", 3 | "configurations": [ 4 | { 5 | "command": "./node_modules/.bin/astro dev", 6 | "name": "Development server", 7 | "request": "launch", 8 | "type": "node-terminal" 9 | } 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /on-google-cloud-run/main.ts: -------------------------------------------------------------------------------- 1 | import { Application } from "https://deno.land/x/oak@v11.1.0/mod.ts"; 2 | 3 | const app = new Application(); 4 | 5 | app.use((ctx) => { 6 | ctx.response.body = "Hello from Deno and Google Cloud Run!"; 7 | }); 8 | 9 | await app.listen({ port: 8000 }); 10 | -------------------------------------------------------------------------------- /with-drizzle/drizzle.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "drizzle-kit"; 2 | 3 | export default defineConfig({ 4 | out: "./drizzle", 5 | schema: "./src/db/schema.ts", 6 | dialect: "postgresql", 7 | dbCredentials: { 8 | url: Deno.env.get("DATABASE_URL")!, 9 | }, 10 | }); 11 | -------------------------------------------------------------------------------- /with-solidjs/src/App.css: -------------------------------------------------------------------------------- 1 | .dinosaur { 2 | display: block; 3 | text-decoration: none; 4 | color: #333; 5 | padding: 0.5rem; 6 | margin: 0.5rem 0; 7 | border: 1px solid #ccc; 8 | border-radius: 4px; 9 | } 10 | 11 | .dinosaur:hover { 12 | background-color: #f0f0f0; 13 | } 14 | -------------------------------------------------------------------------------- /with-qwik/src/routes/api/dinosaurs/index.ts: -------------------------------------------------------------------------------- 1 | import { RequestHandler } from "@builder.io/qwik-city"; 2 | import data from "~/data/dinosaurs.json" with { type: "json" }; 3 | 4 | export const onGet: RequestHandler = async ({ json }) => { 5 | const dinosaurs = data; 6 | json(200, dinosaurs); 7 | }; 8 | -------------------------------------------------------------------------------- /with-tanstack/deno.json: -------------------------------------------------------------------------------- 1 | { 2 | "tasks": { 3 | "dev": "deno task dev:api & deno task dev:vite", 4 | "dev:api": "deno --allow-env --allow-net api/main.ts", 5 | "dev:vite": "deno -A npm:vite" 6 | }, 7 | "imports": { 8 | "@hono/hono": "jsr:@hono/hono@^4.7.0" 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /with-drizzle/drizzle/meta/_journal.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "7", 3 | "dialect": "postgresql", 4 | "entries": [ 5 | { 6 | "idx": 0, 7 | "version": "7", 8 | "when": 1730925973649, 9 | "tag": "0000_slippery_stryfe", 10 | "breakpoints": true 11 | } 12 | ] 13 | } -------------------------------------------------------------------------------- /with-react/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | import App from "./App"; 4 | import "./index.css"; 5 | 6 | ReactDOM.createRoot(document.getElementById("root")).render( 7 | 8 | 9 | , 10 | ); 11 | -------------------------------------------------------------------------------- /with-fresh/dev.ts: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env -S deno run -A --watch=static/,routes/ 2 | 3 | import { Builder } from "fresh/dev"; 4 | 5 | const builder = new Builder(); 6 | 7 | if (Deno.args.includes("build")) { 8 | await builder.build(); 9 | } else { 10 | await builder.listen(() => import("./main.ts")); 11 | } 12 | -------------------------------------------------------------------------------- /with-fresh/routes/api/[name].tsx: -------------------------------------------------------------------------------- 1 | import { define } from "../../utils.ts"; 2 | 3 | export const handler = define.handlers({ 4 | GET(ctx) { 5 | const name = ctx.params.name; 6 | return new Response( 7 | `Hello, ${name.charAt(0).toUpperCase() + name.slice(1)}!`, 8 | ); 9 | }, 10 | }); 11 | -------------------------------------------------------------------------------- /with-qwik/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://json.schemastore.org/web-manifest-combined.json", 3 | "name": "qwik-project-name", 4 | "short_name": "Welcome to Qwik", 5 | "start_url": ".", 6 | "display": "standalone", 7 | "background_color": "#fff", 8 | "description": "A Qwik project app." 9 | } 10 | -------------------------------------------------------------------------------- /with-honeycomb/deno.json: -------------------------------------------------------------------------------- 1 | { 2 | "tasks": { 3 | "start": "deno --allow-env --allow-net --env-file main.ts", 4 | "otel": "OTEL_DENO=true OTEL_SERVICE_NAME=chat-app deno run --unstable-otel --allow-net --allow-read --allow-env --env-file main.ts" 5 | }, 6 | "imports": { 7 | "express": "npm:express@^4.1.8" 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /with-hyperdx/deno.json: -------------------------------------------------------------------------------- 1 | { 2 | "tasks": { 3 | "start": "deno --allow-env --allow-net --env-file main.ts", 4 | "otel": "OTEL_DENO=true OTEL_SERVICE_NAME=chat-app deno run --unstable-otel --allow-net --allow-read --allow-env --env-file main.ts" 5 | }, 6 | "imports": { 7 | "express": "npm:express@^4.1.8" 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /with-solidjs/src/index.tsx: -------------------------------------------------------------------------------- 1 | // src/index.tsx 2 | 3 | import { render } from "solid-js/web"; 4 | import App from "./App.tsx"; 5 | import "./index.css"; 6 | 7 | const wrapper = document.getElementById("root"); 8 | 9 | if (!wrapper) { 10 | throw new Error("Wrapper div not found"); 11 | } 12 | 13 | render(() => , wrapper); 14 | -------------------------------------------------------------------------------- /with-nuxt/app.vue: -------------------------------------------------------------------------------- 1 | 14 | -------------------------------------------------------------------------------- /with-vue/src/components/Dinosaur.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /with-react/vite.config.mjs: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "npm:vite@^3.1.3"; 2 | import react from "npm:@vitejs/plugin-react@^2.1"; 3 | 4 | import "npm:react@^18.2"; 5 | import "npm:react-dom@^18.2/client"; 6 | import "npm:react-router-dom@^6.4"; 7 | 8 | // https://vitejs.dev/config/ 9 | export default defineConfig({ 10 | plugins: [react()], 11 | }); 12 | -------------------------------------------------------------------------------- /with-nuxt/README.md: -------------------------------------------------------------------------------- 1 | # How to build a Nuxt app with Deno 2 | 3 | [Read the full tutorial in the Deno documentation.](https://docs.deno.com/examples/nuxt_tutorial/) 4 | 5 | 6 | Deploy your own version of this example with a couple of clicks 7 | 8 | [![Deploy on Deno](https://deno.com/button)](https://app.deno.com/new?clone=https://github.com/denoland/examples&path=with-nuxt) -------------------------------------------------------------------------------- /with-trpc/deno.json: -------------------------------------------------------------------------------- 1 | { 2 | "tasks": { 3 | "start": "deno -A server/index.ts", 4 | "client": "deno -A client/index.ts" 5 | }, 6 | "imports": { 7 | "@std/path": "jsr:@std/path@^1.0.6", 8 | "@trpc/client": "npm:@trpc/client@^11.0.0-rc.593", 9 | "@trpc/server": "npm:@trpc/server@^11.0.0-rc.593", 10 | "zod": "npm:zod@^3.23.8" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /with-solidjs/vite.config.ts: -------------------------------------------------------------------------------- 1 | // vite.config.ts 2 | import { defineConfig } from "vite"; 3 | import solid from "vite-plugin-solid"; 4 | 5 | export default defineConfig({ 6 | plugins: [solid()], 7 | server: { 8 | proxy: { 9 | "/api": { 10 | target: "http://localhost:8000", 11 | changeOrigin: true, 12 | }, 13 | }, 14 | }, 15 | }); 16 | -------------------------------------------------------------------------------- /with-nuxt/tailwind.config.js: -------------------------------------------------------------------------------- 1 | // tailwind.config.js 2 | /** @type {import('tailwindcss').Config} */ 3 | export default { 4 | content: [ 5 | "./components/**/*.{js,vue,ts}", 6 | "./layouts/**/*.vue", 7 | "./pages/**/*.vue", 8 | "./plugins/**/*.{js,ts}", 9 | "./app.vue", 10 | ], 11 | theme: { 12 | extend: {}, 13 | }, 14 | plugins: [], 15 | }; 16 | -------------------------------------------------------------------------------- /with-react/deno.json: -------------------------------------------------------------------------------- 1 | { 2 | "tasks": { 3 | "dev": "deno run -A --unstable --node-modules-dir npm:vite", 4 | "build": "deno run -A --unstable --node-modules-dir npm:vite build", 5 | "preview": "deno run -A --unstable --node-modules-dir npm:vite preview", 6 | "serve": "deno run --allow-net --allow-read https://deno.land/std@0.157.0/http/file_server.ts dist/" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /with-vue/deno.json: -------------------------------------------------------------------------------- 1 | { 2 | "tasks": { 3 | "dev": "deno run -A --unstable --node-modules-dir npm:vite", 4 | "build": "deno run -A --unstable --node-modules-dir npm:vite build", 5 | "preview": "deno run -A --unstable --node-modules-dir npm:vite preview", 6 | "serve": "deno run --allow-net --allow-read https://deno.land/std@0.157.0/http/file_server.ts dist/" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /with-tanstack/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /with-vue/vite.config.mjs: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "npm:vite@^3.1.3"; 2 | import vue from "npm:@vitejs/plugin-vue@^3.2.39"; 3 | 4 | // NOTE(bartlomieju): this is a papercut that shouldn't be required, see README.md 5 | import "npm:vue@^3.2.39"; 6 | import "npm:vue-router@4"; 7 | 8 | // https://vitejs.dev/config/ 9 | export default defineConfig({ 10 | plugins: [vue()], 11 | }); 12 | -------------------------------------------------------------------------------- /with-astro/.gitignore: -------------------------------------------------------------------------------- 1 | # build output 2 | dist/ 3 | # generated types 4 | .astro/ 5 | 6 | # dependencies 7 | node_modules/ 8 | 9 | # logs 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | pnpm-debug.log* 14 | 15 | 16 | # environment variables 17 | .env 18 | .env.production 19 | 20 | # macOS-specific files 21 | .DS_Store 22 | 23 | # jetbrains setting folder 24 | .idea/ 25 | -------------------------------------------------------------------------------- /with-astro/src/pages/[dinosaur].astro: -------------------------------------------------------------------------------- 1 | --- 2 | import data from "../../data/dinosaurs.json"; 3 | const { dinosaur } = Astro.params; 4 | const dinosaurObj = data.find((item) => item.name.toLowerCase() === dinosaur); 5 | if (!dinosaurObj) return Astro.redirect("/404"); 6 | const { name, description } = dinosaurObj; 7 | --- 8 | 9 |

{ name }

10 | 11 |

12 | { description } 13 |

-------------------------------------------------------------------------------- /hello-world/Readme.md: -------------------------------------------------------------------------------- 1 | # Deno Examples: Hello, World! 2 | 3 | Simply serving a single file over HTTP 4 | 5 | ## Get your own copy to explore 6 | 7 | You can clone this example into a repo of your own, and use it to set up a new application hosted on Deno Deploy in a few clicks 8 | 9 | [![Deploy on Deno](https://deno.com/button)](https://app.deno.com/new?clone=https://github.com/denoland/examples&path=hello-world) -------------------------------------------------------------------------------- /with-apollo/schema.ts: -------------------------------------------------------------------------------- 1 | // A schema is a collection of type definitions (hence "typeDefs") 2 | // that together define the "shape" of queries that are executed against 3 | // your data. 4 | export const typeDefs = ` 5 | 6 | type Dinosaur { 7 | name: String 8 | description: String 9 | } 10 | 11 | type Query { 12 | dinosaurs: [Dinosaur] 13 | dinosaur(name: String): Dinosaur 14 | } 15 | `; 16 | -------------------------------------------------------------------------------- /with-prisma/prisma/schema.prisma: -------------------------------------------------------------------------------- 1 | generator client { 2 | provider = "prisma-client-js" 3 | previewFeatures = ["deno"] 4 | output = "../generated/client" 5 | } 6 | 7 | datasource db { 8 | provider = "postgresql" 9 | url = env("DATABASE_URL") 10 | } 11 | 12 | model Dinosaur { 13 | id Int @id @default(autoincrement()) 14 | name String @unique 15 | description String 16 | } 17 | -------------------------------------------------------------------------------- /with-trpc/server/trpc.ts: -------------------------------------------------------------------------------- 1 | import { initTRPC } from "@trpc/server"; 2 | 3 | /** 4 | * Initialization of tRPC backend 5 | * Should be done only once per backend! 6 | */ 7 | 8 | const t = initTRPC.create(); 9 | 10 | /** 11 | * Export reusable router and procedure helpers 12 | * that can be used throughout the router 13 | */ 14 | 15 | export const router = t.router; 16 | export const publicProcedure = t.procedure; 17 | -------------------------------------------------------------------------------- /with-vue/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + Vue 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /with-drizzle/drizzle/relations.ts: -------------------------------------------------------------------------------- 1 | import { relations } from "drizzle-orm/relations"; 2 | import { dinosaurs, tasks } from "./schema"; 3 | 4 | export const tasksRelations = relations(tasks, ({one}) => ({ 5 | dinosaur: one(dinosaurs, { 6 | fields: [tasks.dinosaurId], 7 | references: [dinosaurs.id] 8 | }), 9 | })); 10 | 11 | export const dinosaursRelations = relations(dinosaurs, ({many}) => ({ 12 | tasks: many(tasks), 13 | })); -------------------------------------------------------------------------------- /with-react/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /with-solidjs/src/App.tsx: -------------------------------------------------------------------------------- 1 | import { Router, Route } from "@solidjs/router"; 2 | import Index from "./pages/Index.tsx"; 3 | import Dinosaur from "./pages/Dinosaur.tsx"; 4 | import "./App.css"; 5 | 6 | const App = () => { 7 | return ( 8 | 9 | 10 | 11 | 12 | ); 13 | }; 14 | 15 | export default App; 16 | -------------------------------------------------------------------------------- /with-solidjs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + Solid + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /with-tanstack/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /with-drizzle/src/db/relations.ts: -------------------------------------------------------------------------------- 1 | import { relations } from "drizzle-orm/relations"; 2 | import { dinosaurs, tasks } from "./schema.ts"; 3 | 4 | export const tasksRelations = relations(tasks, ({ one }) => ({ 5 | dinosaur: one(dinosaurs, { 6 | fields: [tasks.dinosaurId], 7 | references: [dinosaurs.id], 8 | }), 9 | })); 10 | 11 | export const dinosaursRelations = relations(dinosaurs, ({ many }) => ({ 12 | tasks: many(tasks), 13 | })); 14 | -------------------------------------------------------------------------------- /with-prisma/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-prisma-project", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "devDependencies": { 13 | "prisma": "^4.5.0" 14 | }, 15 | "dependencies": { 16 | "@prisma/client": "^4.5.0", 17 | "dotenv-cli": "^6.0.0" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /with-tanstack/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import react from "@vitejs/plugin-react"; 3 | 4 | // https://vite.dev/config/ 5 | // export default defineConfig({ 6 | // plugins: [react()], 7 | // }); 8 | 9 | export default defineConfig({ 10 | plugins: [react()], 11 | server: { 12 | proxy: { 13 | "/api": { 14 | target: "http://localhost:8000", 15 | changeOrigin: true, 16 | }, 17 | }, 18 | }, 19 | }); 20 | -------------------------------------------------------------------------------- /with-astro/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "pink-pulsar", 3 | "type": "module", 4 | "version": "0.0.1", 5 | "scripts": { 6 | "dev": "astro dev", 7 | "start": "astro dev", 8 | "build": "astro check && astro build", 9 | "preview": "astro preview", 10 | "astro": "astro" 11 | }, 12 | "dependencies": { 13 | "@astrojs/node": "^8.3.4", 14 | "astro": "^4.16.7", 15 | "@astrojs/check": "^0.9.4", 16 | "typescript": "^5.6.3" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /with-fresh/components/Button.tsx: -------------------------------------------------------------------------------- 1 | import type { ComponentChildren } from "preact"; 2 | 3 | export interface ButtonProps { 4 | id?: string; 5 | onClick?: () => void; 6 | children?: ComponentChildren; 7 | disabled?: boolean; 8 | } 9 | 10 | export function Button(props: ButtonProps) { 11 | return ( 12 | 12 |

{props.count}

13 | 14 | 15 | ); 16 | } 17 | -------------------------------------------------------------------------------- /with-vue/src/router/index.ts: -------------------------------------------------------------------------------- 1 | import { createRouter, createWebHistory } from "vue-router"; 2 | import HomePage from "../components/HomePage.vue"; 3 | import Dinosaur from "../components/Dinosaur.vue"; 4 | 5 | const routes = [ 6 | { 7 | path: "/", 8 | name: "Home", 9 | component: HomePage, 10 | }, 11 | { 12 | path: "/:dinosaur", 13 | name: "Dinosaur", 14 | component: Dinosaur, 15 | props: true, 16 | }, 17 | ]; 18 | 19 | const router = createRouter({ 20 | history: createWebHistory("/"), 21 | routes, 22 | }); 23 | 24 | export default router; 25 | -------------------------------------------------------------------------------- /on-aws-lightsail/container.template.json: -------------------------------------------------------------------------------- 1 | { 2 | "containers": { 3 | "app": { 4 | "image": "", 5 | "environment": { 6 | "APP_ENV": "release" 7 | }, 8 | "ports": { 9 | "8000": "HTTP" 10 | } 11 | } 12 | }, 13 | "publicEndpoint": { 14 | "containerName": "app", 15 | "containerPort": 8000, 16 | "healthCheck": { 17 | "healthyThreshold": 2, 18 | "unhealthyThreshold": 2, 19 | "timeoutSeconds": 5, 20 | "intervalSeconds": 10, 21 | "path": "/", 22 | "successCodes": "200-499" 23 | } 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /with-nuxt/pages/index.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 19 | -------------------------------------------------------------------------------- /with-react/src/App.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { 3 | BrowserRouter as Router, 4 | Navigate, 5 | Route, 6 | Routes, 7 | } from "react-router-dom"; 8 | import Index from "./pages/Index.jsx"; 9 | import Dinosaur from "./pages/Dinosaur.jsx"; 10 | 11 | export default function App(props) { 12 | return ( 13 | 14 | 15 | } /> 16 | } /> 17 | } /> 18 | 19 | 20 | ); 21 | } 22 | -------------------------------------------------------------------------------- /with-astro/src/pages/index.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import data from "../../data/dinosaurs.json"; 3 | --- 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Dinosaurs 12 | 13 | 14 |

Dinosaurs

15 | 22 | 23 | -------------------------------------------------------------------------------- /with-qwik/src/entry.dev.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * WHAT IS THIS FILE? 3 | * 4 | * Development entry point using only client-side modules: 5 | * - Do not use this mode in production! 6 | * - No SSR 7 | * - No portion of the application is pre-rendered on the server. 8 | * - All of the application is running eagerly in the browser. 9 | * - More code is transferred to the browser than in SSR mode. 10 | * - Optimizer/Serialization/Deserialization code is not exercised! 11 | */ 12 | import { render, type RenderOptions } from "@builder.io/qwik"; 13 | import Root from "./root"; 14 | 15 | export default function (opts: RenderOptions) { 16 | return render(document, , opts); 17 | } 18 | -------------------------------------------------------------------------------- /with-react/src/pages/Dinosaur.jsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | import { Link, useParams } from "react-router-dom"; 3 | 4 | const Dinosaur = () => { 5 | const { dinosaur } = useParams(); 6 | const [dino, setDino] = useState({}); 7 | useEffect(() => { 8 | fetch(`http://localhost:8000/api/${dinosaur}`) 9 | .then(async (res) => await res.json()) 10 | .then((json) => setDino(json)); 11 | }, []); 12 | 13 | return ( 14 |
15 |

{dino.name}

16 |

17 | {dino.description} 18 |

19 | See all 20 |
21 | ); 22 | }; 23 | 24 | export default Dinosaur; 25 | -------------------------------------------------------------------------------- /with-qwik/src/routes/api/dinosaurs/[name]/index.ts: -------------------------------------------------------------------------------- 1 | import { RequestHandler } from "@builder.io/qwik-city"; 2 | import data from "~/data/dinosaurs.json" with { type: "json" }; 3 | 4 | export const onGet: RequestHandler = async ({ params, json }) => { 5 | const { name } = params; 6 | const dinosaurs = data; 7 | 8 | if (!name) { 9 | json(400, { error: "No dinosaur name provided." }); 10 | return; 11 | } 12 | 13 | const dinosaur = dinosaurs.find( 14 | (dino) => dino.name.toLowerCase() === name.toLowerCase(), 15 | ); 16 | 17 | if (!dinosaur) { 18 | json(404, { error: "No dinosaur found." }); 19 | return; 20 | } 21 | 22 | json(200, dinosaur); 23 | }; 24 | -------------------------------------------------------------------------------- /with-express/main.ts: -------------------------------------------------------------------------------- 1 | import express from "npm:express@4.18.2"; 2 | import data from "./data.json" with { type: "json" }; 3 | 4 | const app = express(); 5 | 6 | app.get("/", (req, res) => { 7 | res.send("Welcome to the Dinosaur API!"); 8 | }); 9 | 10 | app.get("/api", (req, res) => { 11 | res.send(data); 12 | }); 13 | 14 | app.get("/api/:dinosaur", (req, res) => { 15 | if (req?.params?.dinosaur) { 16 | const found = data.find((item) => 17 | item.name.toLowerCase() === req.params.dinosaur.toLowerCase() 18 | ); 19 | if (found) { 20 | res.send(found); 21 | } else { 22 | res.send("No dinosaurs found."); 23 | } 24 | } 25 | }); 26 | 27 | app.listen(8000); 28 | -------------------------------------------------------------------------------- /with-nuxt/server/api/dinosaurs/[name].get.ts: -------------------------------------------------------------------------------- 1 | import data from "../data.json"; 2 | 3 | export default defineCachedEventHandler((event) => { 4 | const name = getRouterParam(event, 'name'); 5 | 6 | if (!name) { 7 | throw createError({ 8 | statusCode: 400, 9 | message: "No dinosaur name provided", 10 | }); 11 | } 12 | 13 | const dinosaur = data.find( 14 | (dino) => dino.name.toLowerCase() === name.toLowerCase(), 15 | ); 16 | 17 | if (!dinosaur) { 18 | throw createError({ 19 | statusCode: 404, 20 | message: "Dinosaur not found", 21 | }); 22 | } 23 | 24 | return dinosaur; 25 | }); 26 | -------------------------------------------------------------------------------- /with-fresh/README.md: -------------------------------------------------------------------------------- 1 | # Fresh project 2 | 3 | Your new Fresh project is ready to go. You can follow the Fresh "Getting 4 | Started" guide here: https://fresh.deno.dev/docs/getting-started 5 | 6 | ### Usage 7 | 8 | Make sure to install Deno: 9 | https://docs.deno.com/runtime/getting_started/installation 10 | 11 | Then start the project in development mode: 12 | 13 | ``` 14 | deno task dev 15 | ``` 16 | 17 | This will watch the project directory and restart as necessary. 18 | 19 | 20 | ### Clone and deploy 21 | 22 | Deploy your own version of this example with a couple of clicks 23 | 24 | [![Deploy on Deno](https://deno.com/button)](https://app.deno.com/new?clone=https://github.com/denoland/examples&path=with-fresh) 25 | -------------------------------------------------------------------------------- /with-tanstack/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", 4 | "target": "ES2022", 5 | "lib": ["ES2023"], 6 | "module": "ESNext", 7 | "skipLibCheck": true, 8 | 9 | /* Bundler mode */ 10 | "moduleResolution": "bundler", 11 | "allowImportingTsExtensions": true, 12 | "isolatedModules": true, 13 | "moduleDetection": "force", 14 | "noEmit": true, 15 | 16 | /* Linting */ 17 | "strict": true, 18 | "noUnusedLocals": true, 19 | "noUnusedParameters": true, 20 | "noFallthroughCasesInSwitch": true, 21 | "noUncheckedSideEffectImports": true 22 | }, 23 | "include": ["vite.config.ts"] 24 | } 25 | -------------------------------------------------------------------------------- /with-hyperdx/readme.md: -------------------------------------------------------------------------------- 1 | # How to export telemetry data to Hyperdx 2 | 3 | This code accompanies tutorial 4 | ["How to export telemetry data to Hyperdx"](http://docs.deno.com/examples/hyperdx_tutorial). 5 | 6 | ## Run the app 7 | 8 | Make sure `.env` is populated with 9 | [an OpenAI API key](https://platform.openai.com/api-keys). 10 | 11 | ```bash 12 | $ deno task otel 13 | ``` 14 | 15 | ## Run OpenTelemetry collector 16 | 17 | To run the separate OTel collector service: 18 | 19 | ``` 20 | $ docker build -t otel-collector . && docker run -p 4317:4317 -p 4318:4318 otel-collector 21 | ``` 22 | 23 | For more information about Hyperdx, 24 | [please refer to their documentation](https://www.hyperdx.io/docs/install/opentelemetry). 25 | -------------------------------------------------------------------------------- /with-qwik/src/routes/service-worker.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * WHAT IS THIS FILE? 3 | * 4 | * The service-worker.ts file is used to have state of the art prefetching. 5 | * https://qwik.dev/qwikcity/prefetching/overview/ 6 | * 7 | * Qwik uses a service worker to speed up your site and reduce latency, ie, not used in the traditional way of offline. 8 | * You can also use this file to add more functionality that runs in the service worker. 9 | */ 10 | import { setupServiceWorker } from "@builder.io/qwik-city/service-worker"; 11 | 12 | setupServiceWorker(); 13 | 14 | addEventListener("install", () => self.skipWaiting()); 15 | 16 | addEventListener("activate", () => self.clients.claim()); 17 | 18 | declare const self: ServiceWorkerGlobalScope; 19 | -------------------------------------------------------------------------------- /with-honeycomb/readme.md: -------------------------------------------------------------------------------- 1 | # How to export telemetry data to Honeycomb.io 2 | 3 | This code accompanies tutorial 4 | ["How to export telemetry data to Honeycomb.io"](http://docs.deno.com/examples/honeycomb_tutorial). 5 | 6 | ## Run the app 7 | 8 | Make sure `.env` is populated with 9 | [an OpenAI API key](https://platform.openai.com/api-keys). 10 | 11 | ```bash 12 | $ deno task otel 13 | ``` 14 | 15 | ## Run OpenTelemetry collector 16 | 17 | To run the separate OTel collector service: 18 | 19 | ``` 20 | $ docker build -t otel-collector . && docker run -p 4317:4317 -p 4318:4318 otel-collector 21 | ``` 22 | 23 | For more information about Honeycomb, 24 | [please refer to their documentation](https://docs.honeycomb.io/send-data/opentelemetry/collector/). 25 | -------------------------------------------------------------------------------- /with-tanstack/src/routeTree.tsx: -------------------------------------------------------------------------------- 1 | // ./src/routeTree.tsx 2 | 3 | import { RootRoute, Route } from "@tanstack/react-router"; 4 | import { DinosaurList } from "./components/DinosaurList"; 5 | import { DinosaurDetail } from "./components/DinosaurDetail"; 6 | import { Layout } from "./components/Layout"; 7 | 8 | const rootRoute = new RootRoute({ 9 | component: Layout, 10 | }); 11 | 12 | const indexRoute = new Route({ 13 | getParentRoute: () => rootRoute, 14 | path: "/", 15 | component: DinosaurList, 16 | }); 17 | 18 | const dinosaurRoute = new Route({ 19 | getParentRoute: () => rootRoute, 20 | path: "dinosaur/$name", 21 | component: DinosaurDetail, 22 | }); 23 | 24 | export const routeTree = rootRoute.addChildren([indexRoute, dinosaurRoute]); 25 | -------------------------------------------------------------------------------- /with-qwik/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "allowJs": true, 4 | "target": "ES2017", 5 | "module": "ES2022", 6 | "lib": ["es2022", "DOM", "WebWorker", "DOM.Iterable"], 7 | "jsx": "react-jsx", 8 | "jsxImportSource": "@builder.io/qwik", 9 | "strict": true, 10 | "forceConsistentCasingInFileNames": true, 11 | "resolveJsonModule": true, 12 | "moduleResolution": "Bundler", 13 | "esModuleInterop": true, 14 | "skipLibCheck": true, 15 | "incremental": true, 16 | "isolatedModules": true, 17 | "outDir": "tmp", 18 | "noEmit": true, 19 | "paths": { 20 | "~/*": ["./src/*"] 21 | } 22 | }, 23 | "files": ["./.eslintrc.cjs"], 24 | "include": ["src", "./*.d.ts", "./*.config.ts"] 25 | } 26 | -------------------------------------------------------------------------------- /with-solidjs/deno.json: -------------------------------------------------------------------------------- 1 | { 2 | "tasks": { 3 | "dev": "deno task dev:api & deno task dev:vite", 4 | "dev:api": "deno run --allow-env --allow-net --allow-read api/main.ts", 5 | "dev:vite": "deno run -A npm:vite", 6 | "build": "deno run -A npm:vite build", 7 | "serve": { 8 | "command": "deno task dev:api", 9 | "description": "Run the build, and then start the API server", 10 | "dependencies": ["deno task build"] 11 | } 12 | }, 13 | "imports": { 14 | "@hono/hono": "jsr:@hono/hono@^4.6.12", 15 | "@solidjs/router": "npm:@solidjs/router@^0.14.10" 16 | }, 17 | "compilerOptions": { 18 | "jsx": "react-jsx", 19 | "jsxImportSource": "solid-js", 20 | "lib": ["DOM", "DOM.Iterable", "ESNext"] 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /with-qwik/src/entry.preview.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * WHAT IS THIS FILE? 3 | * 4 | * It's the bundle entry point for `npm run preview`. 5 | * That is, serving your app built in production mode. 6 | * 7 | * Feel free to modify this file, but don't remove it! 8 | * 9 | * Learn more about Vite's preview command: 10 | * - https://vitejs.dev/config/preview-options.html#preview-options 11 | * 12 | */ 13 | import { createQwikCity } from "@builder.io/qwik-city/middleware/node"; 14 | import qwikCityPlan from "@qwik-city-plan"; 15 | // make sure qwikCityPlan is imported before entry 16 | import render from "./entry.ssr"; 17 | 18 | /** 19 | * The default export is the QwikCity adapter used by Vite preview. 20 | */ 21 | export default createQwikCity({ render, qwikCityPlan }); 22 | -------------------------------------------------------------------------------- /simple-server/main.ts: -------------------------------------------------------------------------------- 1 | import { serveDir, serveFile } from "jsr:@std/http/file-server"; 2 | 3 | // make a data set of a list of photos from the photos folder 4 | const pages: string[] = []; 5 | for await (const file of Deno.readDir(`./pages`)) { 6 | pages.push(file.name); 7 | } 8 | 9 | console.log(pages); 10 | 11 | Deno.serve((req: Request) => { 12 | const pathname = new URL(req.url).pathname; 13 | 14 | 15 | 16 | if (pathname.startsWith("/static")) { 17 | return serveDir(req, { 18 | fsRoot: "public", 19 | urlRoot: "static", 20 | }); 21 | } 22 | 23 | if(pages.includes(pathname.slice(1))) { 24 | return serveFile(req, `./pages${pathname}`); 25 | } 26 | 27 | 28 | return new Response("404: Not Found", { 29 | status: 404, 30 | }); 31 | }); -------------------------------------------------------------------------------- /with-grafana/readme.md: -------------------------------------------------------------------------------- 1 | # How to export telemetry data to Grafana Cloud 2 | 3 | This code accompanies tutorial 4 | ["How to export telemetry data to Grafana"](http://docs.deno.com/examples/grafana_tutorial). 5 | 6 | ## Run the app 7 | 8 | Make sure `.env` is populated with 9 | [an OpenAI API key](https://platform.openai.com/api-keys). 10 | 11 | ```bash 12 | $ deno task otel 13 | ``` 14 | 15 | ## Run OpenTelemetry collector 16 | 17 | To run the separate OTel collector service: 18 | 19 | ``` 20 | $ docker build -t otel-collector . && docker run -p 4317:4317 -p 4318:4318 otel-collector 21 | ``` 22 | 23 | For more information about Grafana, 24 | [please refer to their documentation](https://grafana.com/docs/grafana-cloud/monitor-applications/application-observability/collector/). 25 | -------------------------------------------------------------------------------- /with-react/src/App.css: -------------------------------------------------------------------------------- 1 | #root { 2 | max-width: 1280px; 3 | margin: 0 auto; 4 | padding: 2rem; 5 | text-align: center; 6 | } 7 | 8 | .logo { 9 | height: 6em; 10 | padding: 1.5em; 11 | will-change: filter; 12 | } 13 | .logo:hover { 14 | filter: drop-shadow(0 0 2em #646cffaa); 15 | } 16 | .logo.react:hover { 17 | filter: drop-shadow(0 0 2em #61dafbaa); 18 | } 19 | 20 | @keyframes logo-spin { 21 | from { 22 | transform: rotate(0deg); 23 | } 24 | to { 25 | transform: rotate(360deg); 26 | } 27 | } 28 | 29 | @media (prefers-reduced-motion: no-preference) { 30 | a:nth-of-type(2) .logo { 31 | animation: logo-spin infinite 20s linear; 32 | } 33 | } 34 | 35 | .card { 36 | padding: 2em; 37 | } 38 | 39 | .read-the-docs { 40 | color: #888; 41 | } 42 | -------------------------------------------------------------------------------- /with-astro/public/favicon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 9 | 10 | -------------------------------------------------------------------------------- /with-solidjs/api/main.ts: -------------------------------------------------------------------------------- 1 | import { Hono } from "@hono/hono"; 2 | import data from "./data.json" with { type: "json" }; 3 | 4 | const app = new Hono(); 5 | 6 | app.get("/", (c) => { 7 | return c.text("Welcome to the dinosaur API!"); 8 | }); 9 | 10 | app.get("/api/dinosaurs", (c) => { 11 | return c.json(data); 12 | }); 13 | 14 | app.get("/api/dinosaurs/:dinosaur", (c) => { 15 | if (!c.req.param("dinosaur")) { 16 | return c.text("No dinosaur name provided."); 17 | } 18 | 19 | const dinosaur = data.find((item) => 20 | item.name.toLowerCase() === c.req.param("dinosaur").toLowerCase() 21 | ); 22 | 23 | console.log(dinosaur); 24 | 25 | if (dinosaur) { 26 | return c.json(dinosaur); 27 | } else { 28 | return c.notFound(); 29 | } 30 | }); 31 | 32 | Deno.serve(app.fetch); 33 | -------------------------------------------------------------------------------- /with-tanstack/src/main.tsx: -------------------------------------------------------------------------------- 1 | // main.tsx 2 | 3 | import React from "react"; 4 | import ReactDOM from "react-dom/client"; 5 | import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; 6 | import { createRouter, RouterProvider } from "@tanstack/react-router"; 7 | import { routeTree } from "./routeTree"; 8 | 9 | const queryClient = new QueryClient(); 10 | 11 | const router = createRouter({ routeTree }); 12 | 13 | declare module "@tanstack/react-router" { 14 | interface Register { 15 | router: typeof router; 16 | } 17 | } 18 | 19 | ReactDOM.createRoot(document.getElementById("root")!).render( 20 | 21 | 22 | 23 | 24 | , 25 | ); 26 | -------------------------------------------------------------------------------- /with-tanstack/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", 4 | "target": "ES2020", 5 | "useDefineForClassFields": true, 6 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 7 | "module": "ESNext", 8 | "skipLibCheck": true, 9 | 10 | /* Bundler mode */ 11 | "moduleResolution": "bundler", 12 | "allowImportingTsExtensions": true, 13 | "isolatedModules": true, 14 | "moduleDetection": "force", 15 | "noEmit": true, 16 | "jsx": "react-jsx", 17 | 18 | /* Linting */ 19 | "strict": true, 20 | "noUnusedLocals": true, 21 | "noUnusedParameters": true, 22 | "noFallthroughCasesInSwitch": true, 23 | "noUncheckedSideEffectImports": true 24 | }, 25 | "include": ["src"] 26 | } 27 | -------------------------------------------------------------------------------- /with-vue/src/components/HomePage.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 30 | 31 | 36 | -------------------------------------------------------------------------------- /with-hyperdx/otel-collector.yml: -------------------------------------------------------------------------------- 1 | receivers: 2 | otlp: 3 | protocols: 4 | grpc: 5 | endpoint: 0.0.0.0:4317 6 | http: 7 | endpoint: 0.0.0.0:4318 8 | 9 | exporters: 10 | otlphttp/hdx: 11 | endpoint: "https://in-otel.hyperdx.io" 12 | headers: 13 | authorization: "YOUR_HYPERDX_API_KEY" 14 | compression: gzip 15 | 16 | processors: 17 | batch: 18 | 19 | service: 20 | pipelines: 21 | traces: 22 | receivers: [otlp] 23 | processors: [batch] 24 | exporters: [otlphttp/hdx] 25 | metrics: 26 | receivers: [otlp] 27 | processors: [batch] 28 | exporters: [otlphttp/hdx] 29 | logs: 30 | receivers: [otlp] 31 | processors: [batch] 32 | exporters: [otlphttp/hdx] 33 | 34 | # ad5fde7d-184f-419f-8fc1-c74ef12d20cd 35 | -------------------------------------------------------------------------------- /with-fresh/main.ts: -------------------------------------------------------------------------------- 1 | import { App, staticFiles } from "fresh"; 2 | import { define, type State } from "./utils.ts"; 3 | 4 | export const app = new App(); 5 | 6 | app.use(staticFiles()); 7 | 8 | // this is the same as the /api/:name route defined via a file. feel free to delete this! 9 | app.get("/api2/:name", (ctx) => { 10 | const name = ctx.params.name; 11 | return new Response( 12 | `Hello, ${name.charAt(0).toUpperCase() + name.slice(1)}!`, 13 | ); 14 | }); 15 | 16 | // this can also be defined via a file. feel free to delete this! 17 | const exampleLoggerMiddleware = define.middleware((ctx) => { 18 | console.log(`${ctx.req.method} ${ctx.req.url}`); 19 | return ctx.next(); 20 | }); 21 | app.use(exampleLoggerMiddleware); 22 | 23 | // Include file-system based routes here 24 | app.fsRoutes(); 25 | -------------------------------------------------------------------------------- /with-tanstack/src/App.css: -------------------------------------------------------------------------------- 1 | #root { 2 | max-width: 1280px; 3 | margin: 0 auto; 4 | padding: 2rem; 5 | text-align: center; 6 | } 7 | 8 | .logo { 9 | height: 6em; 10 | padding: 1.5em; 11 | will-change: filter; 12 | transition: filter 300ms; 13 | } 14 | .logo:hover { 15 | filter: drop-shadow(0 0 2em #646cffaa); 16 | } 17 | .logo.react:hover { 18 | filter: drop-shadow(0 0 2em #61dafbaa); 19 | } 20 | 21 | @keyframes logo-spin { 22 | from { 23 | transform: rotate(0deg); 24 | } 25 | to { 26 | transform: rotate(360deg); 27 | } 28 | } 29 | 30 | @media (prefers-reduced-motion: no-preference) { 31 | a:nth-of-type(2) .logo { 32 | animation: logo-spin infinite 20s linear; 33 | } 34 | } 35 | 36 | .card { 37 | padding: 2em; 38 | } 39 | 40 | .read-the-docs { 41 | color: #888; 42 | } 43 | -------------------------------------------------------------------------------- /with-drizzle/drizzle/schema.ts: -------------------------------------------------------------------------------- 1 | import { pgTable, serial, text, foreignKey, integer, timestamp, boolean } from "drizzle-orm/pg-core" 2 | import { sql } from "drizzle-orm" 3 | 4 | 5 | 6 | export const dinosaurs = pgTable("dinosaurs", { 7 | id: serial().primaryKey().notNull(), 8 | name: text(), 9 | description: text(), 10 | }); 11 | 12 | export const tasks = pgTable("tasks", { 13 | id: serial().primaryKey().notNull(), 14 | dinosaurId: integer("dinosaur_id"), 15 | description: text(), 16 | dateCreated: timestamp("date_created", { mode: 'string' }).defaultNow(), 17 | isComplete: boolean("is_complete"), 18 | }, (table) => { 19 | return { 20 | tasksDinosaurIdFkey: foreignKey({ 21 | columns: [table.dinosaurId], 22 | foreignColumns: [dinosaurs.id], 23 | name: "tasks_dinosaur_id_fkey" 24 | }), 25 | } 26 | }); 27 | -------------------------------------------------------------------------------- /with-honeycomb/otel-collector.yml: -------------------------------------------------------------------------------- 1 | receivers: 2 | otlp: 3 | protocols: 4 | grpc: 5 | endpoint: 0.0.0.0:4317 6 | http: 7 | endpoint: 0.0.0.0:4318 8 | 9 | exporters: 10 | otlp: 11 | endpoint: "api.honeycomb.io:443" 12 | headers: 13 | x-honeycomb-team: "YOUR_HONEYCOMB_API_KEY" 14 | 15 | processors: 16 | batch: 17 | timeout: 5s 18 | send_batch_size: 5000 19 | 20 | service: 21 | pipelines: 22 | logs: 23 | receivers: [otlp] 24 | processors: [batch] 25 | exporters: [otlp] 26 | traces: 27 | receivers: [otlp] 28 | processors: [batch] 29 | exporters: [otlp] 30 | metrics: 31 | receivers: [otlp] 32 | processors: [batch] 33 | exporters: [otlp] 34 | 35 | # https://docs.honeycomb.io/send-data/opentelemetry/collector/ 36 | -------------------------------------------------------------------------------- /with-solidjs/src/pages/Dinosaur.tsx: -------------------------------------------------------------------------------- 1 | // src/pages/Dinosaur.tsx 2 | import { createSignal, onMount } from "solid-js"; 3 | import { A, useParams } from "@solidjs/router"; 4 | import type { Dino } from "../types.ts"; 5 | 6 | export default function Dinosaur() { 7 | const params = useParams(); 8 | const [dinosaur, setDinosaur] = createSignal({ 9 | name: "", 10 | description: "", 11 | }); 12 | 13 | onMount(async () => { 14 | const resp = await fetch(`/api/dinosaurs/${params.selectedDinosaur}`); 15 | const dino = (await resp.json()) as Dino; 16 | setDinosaur(dino); 17 | console.log("Dinosaur", dino); 18 | }); 19 | 20 | return ( 21 |
22 |

{dinosaur().name}

23 |

{dinosaur().description}

24 | Back to all dinosaurs 25 |
26 | ); 27 | } 28 | -------------------------------------------------------------------------------- /with-drizzle/src/db/schema.ts: -------------------------------------------------------------------------------- 1 | import { 2 | boolean, 3 | foreignKey, 4 | integer, 5 | pgTable, 6 | serial, 7 | text, 8 | timestamp, 9 | } from "drizzle-orm/pg-core"; 10 | 11 | export const dinosaurs = pgTable("dinosaurs", { 12 | id: serial().primaryKey().notNull(), 13 | name: text(), 14 | description: text(), 15 | }); 16 | 17 | export const tasks = pgTable("tasks", { 18 | id: serial().primaryKey().notNull(), 19 | dinosaurId: integer("dinosaur_id"), 20 | description: text(), 21 | dateCreated: timestamp("date_created", { mode: "string" }).defaultNow(), 22 | isComplete: boolean("is_complete"), 23 | }, (table) => { 24 | return { 25 | tasksDinosaurIdFkey: foreignKey({ 26 | columns: [table.dinosaurId], 27 | foreignColumns: [dinosaurs.id], 28 | name: "tasks_dinosaur_id_fkey", 29 | }), 30 | }; 31 | }); 32 | -------------------------------------------------------------------------------- /with-drizzle/drizzle/0000_slippery_stryfe.sql: -------------------------------------------------------------------------------- 1 | -- Current sql file was generated after introspecting the database 2 | -- If you want to run this migration please uncomment this code before executing migrations 3 | /* 4 | CREATE TABLE IF NOT EXISTS "dinosaurs" ( 5 | "id" serial PRIMARY KEY NOT NULL, 6 | "name" text, 7 | "description" text 8 | ); 9 | --> statement-breakpoint 10 | CREATE TABLE IF NOT EXISTS "tasks" ( 11 | "id" serial PRIMARY KEY NOT NULL, 12 | "dinosaur_id" integer, 13 | "description" text, 14 | "date_created" timestamp, 15 | "is_complete" boolean 16 | ); 17 | --> statement-breakpoint 18 | DO $$ BEGIN 19 | ALTER TABLE "tasks" ADD CONSTRAINT "tasks_dinosaur_id_fkey" FOREIGN KEY ("dinosaur_id") REFERENCES "public"."dinosaurs"("id") ON DELETE no action ON UPDATE no action; 20 | EXCEPTION 21 | WHEN duplicate_object THEN null; 22 | END $$; 23 | 24 | */ -------------------------------------------------------------------------------- /with-react/src/pages/Index.jsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | import { Link, useParams } from "react-router-dom"; 3 | 4 | const Index = () => { 5 | const [dinos, setDinos] = useState([]); 6 | useEffect(() => { 7 | fetch(`http://localhost:8000/api/`) 8 | .then(async (res) => await res.json()) 9 | .then((json) => setDinos(json)); 10 | }, []); 11 | 12 | return ( 13 |
14 |

Welcome to the Dinosaur app

15 |

16 | Click on a dinosaur below to learn more. 17 |

18 |
19 | {dinos.map((dino) => { 20 | return ( 21 |
22 | {dino.name} 23 |
24 | ); 25 | })} 26 |
27 |
28 | ); 29 | }; 30 | 31 | export default Index; 32 | -------------------------------------------------------------------------------- /with-mongoose/model/Dinosaur.ts: -------------------------------------------------------------------------------- 1 | import { model, Schema } from "npm:mongoose@^6.7"; 2 | 3 | // Define schema. 4 | const dinosaurSchema = new Schema({ 5 | name: { type: String, unique: true }, 6 | description: String, 7 | createdAt: { type: Date, default: Date.now }, 8 | updatedAt: { type: Date, default: Date.now }, 9 | }); 10 | 11 | // Validations 12 | dinosaurSchema.path("name").required(true, "Dinosaur name cannot be blank."); 13 | dinosaurSchema.path("description").required( 14 | true, 15 | "Dinosaur description cannot be blank.", 16 | ); 17 | 18 | // Methods. 19 | dinosaurSchema.methods = { 20 | // Update description. 21 | updateDescription: async function (description: string) { 22 | this.description = description; 23 | return await this.save(); 24 | }, 25 | }; 26 | 27 | // Export model. 28 | export default model("Dinosaur", dinosaurSchema); 29 | -------------------------------------------------------------------------------- /with-tanstack/eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js' 2 | import globals from 'globals' 3 | import reactHooks from 'eslint-plugin-react-hooks' 4 | import reactRefresh from 'eslint-plugin-react-refresh' 5 | import tseslint from 'typescript-eslint' 6 | 7 | export default tseslint.config( 8 | { ignores: ['dist'] }, 9 | { 10 | extends: [js.configs.recommended, ...tseslint.configs.recommended], 11 | files: ['**/*.{ts,tsx}'], 12 | languageOptions: { 13 | ecmaVersion: 2020, 14 | globals: globals.browser, 15 | }, 16 | plugins: { 17 | 'react-hooks': reactHooks, 18 | 'react-refresh': reactRefresh, 19 | }, 20 | rules: { 21 | ...reactHooks.configs.recommended.rules, 22 | 'react-refresh/only-export-components': [ 23 | 'warn', 24 | { allowConstantExport: true }, 25 | ], 26 | }, 27 | }, 28 | ) 29 | -------------------------------------------------------------------------------- /with-drizzle/src/script.ts: -------------------------------------------------------------------------------- 1 | import { 2 | deleteDinosaurById, 3 | findDinosaurByName, 4 | insertDinosaur, 5 | insertTask, 6 | updateDinosaur, 7 | } from "./db/db.ts"; 8 | 9 | // Create a new dinosaur. 10 | await insertDinosaur({ 11 | name: "Denosaur", 12 | description: "Dinosaurs should be simple.", 13 | }); 14 | 15 | // Find that dinosaur by name. 16 | const res = await findDinosaurByName("Denosaur"); 17 | 18 | // Create a task with that dinosaur by its id. 19 | await insertTask({ 20 | dinosaurId: res.id, 21 | description: "Remove unnecessary config.", 22 | isComplete: false, 23 | }); 24 | 25 | // Update a dinosaur with a new description. 26 | const newDeno = { 27 | id: res.id, 28 | name: res.name, 29 | description: "The simplest dinosaur.", 30 | }; 31 | await updateDinosaur(newDeno); 32 | 33 | // Delete the dinosaur (and any tasks it has). 34 | await deleteDinosaurById(res.id); 35 | -------------------------------------------------------------------------------- /with-tanstack/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tanstack", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "tsc -b && vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "@tanstack/react-query": "^5.66.0", 14 | "@tanstack/react-router": "^1.102.3", 15 | "react": "^18.3.1", 16 | "react-dom": "^18.3.1" 17 | }, 18 | "devDependencies": { 19 | "@eslint/js": "^9.15.0", 20 | "@types/react": "^18.3.12", 21 | "@types/react-dom": "^18.3.1", 22 | "@vitejs/plugin-react": "^4.3.4", 23 | "eslint": "^9.15.0", 24 | "eslint-plugin-react-hooks": "^5.0.0", 25 | "eslint-plugin-react-refresh": "^0.4.14", 26 | "globals": "^15.12.0", 27 | "typescript": "~5.6.2", 28 | "typescript-eslint": "^8.15.0", 29 | "vite": "^6.0.1" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /with-qwik/src/entry.ssr.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * WHAT IS THIS FILE? 3 | * 4 | * SSR entry point, in all cases the application is rendered outside the browser, this 5 | * entry point will be the common one. 6 | * 7 | * - Server (express, cloudflare...) 8 | * - npm run start 9 | * - npm run preview 10 | * - npm run build 11 | * 12 | */ 13 | import { 14 | renderToStream, 15 | type RenderToStreamOptions, 16 | } from "@builder.io/qwik/server"; 17 | import { manifest } from "@qwik-client-manifest"; 18 | import Root from "./root"; 19 | 20 | export default function (opts: RenderToStreamOptions) { 21 | return renderToStream(, { 22 | manifest, 23 | ...opts, 24 | // Use container attributes to set attributes on the html tag. 25 | containerAttributes: { 26 | lang: "en-us", 27 | ...opts.containerAttributes, 28 | }, 29 | serverData: { 30 | ...opts.serverData, 31 | }, 32 | }); 33 | } 34 | -------------------------------------------------------------------------------- /with-prisma/prisma/migrations/20221102030334_init/migration.sql: -------------------------------------------------------------------------------- 1 | -- CreateTable 2 | CREATE TABLE "User" ( 3 | "id" SERIAL NOT NULL, 4 | "email" TEXT NOT NULL, 5 | "name" TEXT, 6 | 7 | CONSTRAINT "User_pkey" PRIMARY KEY ("id") 8 | ); 9 | 10 | -- CreateTable 11 | CREATE TABLE "Post" ( 12 | "id" SERIAL NOT NULL, 13 | "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP, 14 | "updatedAt" TIMESTAMP(3) NOT NULL, 15 | "title" TEXT NOT NULL, 16 | "content" TEXT, 17 | "published" BOOLEAN NOT NULL DEFAULT false, 18 | "viewCount" INTEGER NOT NULL DEFAULT 0, 19 | "authorId" INTEGER, 20 | 21 | CONSTRAINT "Post_pkey" PRIMARY KEY ("id") 22 | ); 23 | 24 | -- CreateIndex 25 | CREATE UNIQUE INDEX "User_email_key" ON "User"("email"); 26 | 27 | -- AddForeignKey 28 | ALTER TABLE "Post" ADD CONSTRAINT "Post_authorId_fkey" FOREIGN KEY ("authorId") REFERENCES "User"("id") ON DELETE SET NULL ON UPDATE CASCADE; 29 | -------------------------------------------------------------------------------- /with-qwik/public/favicon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /with-trpc/server/db.ts: -------------------------------------------------------------------------------- 1 | import { join } from "@std/path"; 2 | 3 | type Dino = { name: string; description: string }; 4 | 5 | const dataPath = join(".", "data.json"); 6 | 7 | async function readData(): Promise { 8 | const data = await Deno.readTextFile(dataPath); 9 | return JSON.parse(data); 10 | } 11 | 12 | async function writeData(dinos: Dino[]): Promise { 13 | await Deno.writeTextFile(dataPath, JSON.stringify(dinos, null, 2)); 14 | } 15 | 16 | export const db = { 17 | dino: { 18 | findMany: () => readData(), 19 | findByName: async (name: string) => { 20 | const dinos = await readData(); 21 | return dinos.find((dino) => dino.name === name); 22 | }, 23 | create: async (data: { name: string; description: string }) => { 24 | const dinos = await readData(); 25 | const newDino = { ...data }; 26 | dinos.push(newDino); 27 | await writeData(dinos); 28 | return newDino; 29 | }, 30 | }, 31 | }; 32 | -------------------------------------------------------------------------------- /with-planetscale/main.ts: -------------------------------------------------------------------------------- 1 | import { connect } from "npm:@planetscale/database@^1.4"; 2 | 3 | const config = { 4 | host: Deno.env.get("HOST"), 5 | username: Deno.env.get("USERNAME"), 6 | password: Deno.env.get("PASSWORD"), 7 | }; 8 | 9 | const conn = connect(config); 10 | 11 | await conn.execute( 12 | "CREATE TABLE dinosaurs (id int NOT NULL AUTO_INCREMENT PRIMARY KEY, name varchar(255) NOT NULL, description varchar(255) NOT NULL);", 13 | ); 14 | await conn.execute( 15 | "INSERT INTO `dinosaurs` (id, name, description) VALUES (1, 'Aardonyx', 'An early stage in the evolution of sauropods.'), (2, 'Abelisaurus', 'Abels lizard has been reconstructed from a single skull.'), (3, 'Deno', 'The fastest dinosaur that ever lived.')", 16 | ); 17 | 18 | const all_dino_results = await conn.execute("SELECT * FROM `dinosaurs`"); 19 | console.log(all_dino_results); 20 | 21 | const one_dino_result = await conn.execute( 22 | "SELECT * FROM `dinosaurs` WHERE `name` = 'Deno'", 23 | ); 24 | console.log(one_dino_result); 25 | -------------------------------------------------------------------------------- /with-mongoose/main.ts: -------------------------------------------------------------------------------- 1 | import mongoose from "npm:mongoose@^6.7"; 2 | import Dinosaur from "./model/Dinosaur.ts"; 3 | 4 | await mongoose.connect("mongodb://localhost:27017"); 5 | 6 | // Create a new Dinosaur. 7 | const deno = new Dinosaur({ 8 | name: "Deno", 9 | description: "The fastest dinosaur ever lived.", 10 | }); 11 | 12 | // // Insert deno. 13 | await deno.save(); 14 | 15 | // Find Deno by name. 16 | const denoFromMongoDb = await Dinosaur.findOne({ name: "Deno" }); 17 | console.log( 18 | `Finding Deno in MongoDB -- \n ${denoFromMongoDb.name}: ${denoFromMongoDb.description}`, 19 | ); 20 | 21 | // Update description for Deno and save it. 22 | await denoFromMongoDb.updateDescription( 23 | "The fastest and most secure dinosaur ever lived.", 24 | ); 25 | 26 | // Check MongoDB to see Deno's updated description. 27 | const newDenoFromMongoDb = await Dinosaur.findOne({ name: "Deno" }); 28 | console.log( 29 | `Finding Deno (again) -- \n ${newDenoFromMongoDb.name}: ${newDenoFromMongoDb.description}`, 30 | ); 31 | -------------------------------------------------------------------------------- /with-vue/api/main.ts: -------------------------------------------------------------------------------- 1 | import { Application, Router } from "https://deno.land/x/oak@v11.1.0/mod.ts"; 2 | import { oakCors } from "https://deno.land/x/cors@v1.2.2/mod.ts"; 3 | import data from "./data.json" with { type: "json" }; 4 | 5 | const router = new Router(); 6 | router 7 | .get("/", (context) => { 8 | context.response.body = "Welcome to dinosaur API!"; 9 | }) 10 | .get("/api", (context) => { 11 | context.response.body = data; 12 | }) 13 | .get("/api/:dinosaur", (context) => { 14 | if (context?.params?.dinosaur) { 15 | const found = data.find((item) => 16 | item.name.toLowerCase() === context.params.dinosaur.toLowerCase() 17 | ); 18 | if (found) { 19 | context.response.body = found; 20 | } else { 21 | context.response.body = "No dinosaurs found."; 22 | } 23 | } 24 | }); 25 | 26 | const app = new Application(); 27 | app.use(oakCors()); // Enable CORS for All Routes 28 | app.use(router.routes()); 29 | app.use(router.allowedMethods()); 30 | 31 | await app.listen({ port: 8000 }); 32 | -------------------------------------------------------------------------------- /with-react/api/main.ts: -------------------------------------------------------------------------------- 1 | import { Application, Router } from "https://deno.land/x/oak@v11.1.0/mod.ts"; 2 | import { oakCors } from "https://deno.land/x/cors@v1.2.2/mod.ts"; 3 | import data from "./data.json" with { type: "json" }; 4 | 5 | const router = new Router(); 6 | router 7 | .get("/", (context) => { 8 | context.response.body = "Welcome to dinosaur API!"; 9 | }) 10 | .get("/api", (context) => { 11 | context.response.body = data; 12 | }) 13 | .get("/api/:dinosaur", (context) => { 14 | if (context?.params?.dinosaur) { 15 | const found = data.find((item) => 16 | item.name.toLowerCase() === context.params.dinosaur.toLowerCase() 17 | ); 18 | if (found) { 19 | context.response.body = found; 20 | } else { 21 | context.response.body = "No dinosaurs found."; 22 | } 23 | } 24 | }); 25 | 26 | const app = new Application(); 27 | app.use(oakCors()); // Enable CORS for All Routes 28 | app.use(router.routes()); 29 | app.use(router.allowedMethods()); 30 | 31 | await app.listen({ port: 8000 }); 32 | -------------------------------------------------------------------------------- /with-fastify/main.ts: -------------------------------------------------------------------------------- 1 | import Fastify, { 2 | type FastifyReply, 3 | type FastifyRequest, 4 | } from "npm:fastify@5.0.0"; 5 | import data from "./data.json" with { type: "json" }; 6 | 7 | const fastify = Fastify(); 8 | 9 | fastify.get("/", (_req: FastifyRequest, reply: FastifyReply) => { 10 | reply.send("Welcome to the Dinosaur API!"); 11 | }); 12 | 13 | fastify.get("/api", (_req: FastifyRequest, reply: FastifyReply) => { 14 | reply.send(data); 15 | }); 16 | 17 | fastify.get( 18 | "/api/:dinosaur", 19 | ( 20 | req: FastifyRequest<{ Params: { dinosaur: string } }>, 21 | reply: FastifyReply, 22 | ) => { 23 | if (req.params.dinosaur) { 24 | const found = data.find((dino: { 25 | name: string; 26 | description: string; 27 | }) => dino.name.toLowerCase() === req.params.dinosaur?.toLowerCase()); 28 | 29 | if (found) { 30 | return reply.send(found); 31 | } 32 | } 33 | return reply.status(404).send({ message: "Dinosaur not found" }); 34 | }, 35 | ); 36 | 37 | await fastify.listen({ port: 8000 }); 38 | -------------------------------------------------------------------------------- /with-qwik/src/routes/[name]/index.tsx: -------------------------------------------------------------------------------- 1 | import { component$ } from "@builder.io/qwik"; 2 | import { Link, routeLoader$ } from "@builder.io/qwik-city"; 3 | import type { Dino } from "~/types"; 4 | import data from "~/data/dinosaurs.json" with { type: "json" }; 5 | 6 | export const useDinosaurDetails = routeLoader$(({ params }): Dino => { 7 | const dinosaurs = data; 8 | const dinosaur = dinosaurs.find( 9 | (dino: Dino) => dino.name.toLowerCase() === params.name.toLowerCase(), 10 | ); 11 | 12 | if (!dinosaur) { 13 | throw new Error("Dinosaur not found"); 14 | } 15 | 16 | return dinosaur; 17 | }); 18 | 19 | export default component$(() => { 20 | const dinosaurSignal = useDinosaurDetails(); 21 | 22 | return ( 23 |
24 |

{dinosaurSignal.value.name}

25 |

{dinosaurSignal.value.description}

26 | 27 | Back to all dinosaurs 28 | 29 |
30 | ); 31 | }); 32 | -------------------------------------------------------------------------------- /with-qwik/src/routes/index.tsx: -------------------------------------------------------------------------------- 1 | import { component$ } from "@builder.io/qwik"; 2 | import { Link, routeLoader$ } from "@builder.io/qwik-city"; 3 | import type { Dino } from "~/types"; 4 | import data from "~/data/dinosaurs.json" with { type: "json" }; 5 | 6 | export const useDinosaurs = routeLoader$(() => { 7 | return data; 8 | }); 9 | 10 | export default component$(() => { 11 | const dinosaursSignal = useDinosaurs(); 12 | 13 | return ( 14 |
15 |

Welcome to the Dinosaur app

16 |

Click on a dinosaur below to learn more.

17 |
    18 | {dinosaursSignal.value.map((dinosaur: Dino) => ( 19 |
  • 20 | 24 | {dinosaur.name} 25 | 26 |
    • 27 | ))} 28 |
29 |
30 | ); 31 | }); 32 | -------------------------------------------------------------------------------- /with-tanstack/src/App.tsx: -------------------------------------------------------------------------------- 1 | import { useState } from 'react' 2 | import reactLogo from './assets/react.svg' 3 | import viteLogo from '/vite.svg' 4 | import './App.css' 5 | 6 | function App() { 7 | const [count, setCount] = useState(0) 8 | 9 | return ( 10 | <> 11 | 19 |

Vite + React

20 |
21 | 24 |

25 | Edit src/App.tsx and save to test HMR 26 |

27 |
28 |

29 | Click on the Vite and React logos to learn more 30 |

31 | 32 | ) 33 | } 34 | 35 | export default App 36 | -------------------------------------------------------------------------------- /with-fresh/routes/index.tsx: -------------------------------------------------------------------------------- 1 | import { useSignal } from "@preact/signals"; 2 | import { define } from "../utils.ts"; 3 | import Counter from "../islands/Counter.tsx"; 4 | 5 | export default define.page(function Home(ctx) { 6 | const count = useSignal(3); 7 | 8 | ctx.state.title = count.value + " Fresh Counter" + 9 | (Math.abs(count.value) === 1 ? "" : "s"); 10 | 11 | return ( 12 |
13 |
14 | the Fresh logo: a sliced lemon dripping with juice 21 |

Welcome to Fresh

22 |

23 | Try updating this message in the 24 | ./routes/index.tsx file, and refresh. 25 |

26 | 27 |
28 |
29 | ); 30 | }); 31 | -------------------------------------------------------------------------------- /with-solidjs/src/pages/Index.tsx: -------------------------------------------------------------------------------- 1 | // src/pages/Index.tsx 2 | import { createSignal, onMount, For } from "solid-js"; 3 | import { A } from "@solidjs/router"; 4 | import type { Dino } from "../types.ts"; 5 | 6 | export default function Index() { 7 | const [dinosaurs, setDinosaurs] = createSignal([]); 8 | 9 | onMount(async () => { 10 | try { 11 | const response = await fetch("/api/dinosaurs"); 12 | const allDinosaurs = (await response.json()) as Dino[]; 13 | setDinosaurs(allDinosaurs); 14 | console.log("Fetched dinosaurs:", allDinosaurs); 15 | } catch (error) { 16 | console.error("Failed to fetch dinosaurs:", error); 17 | } 18 | }); 19 | 20 | return ( 21 |
22 |

Welcome to the Dinosaur app

23 |

Click on a dinosaur below to learn more.

24 | 25 | {(dinosaur) => ( 26 | 27 | {dinosaur.name} 28 | 29 | )} 30 | 31 |
32 | ); 33 | } 34 | -------------------------------------------------------------------------------- /with-prisma/prisma/seed.ts: -------------------------------------------------------------------------------- 1 | import { Prisma, PrismaClient } from "../generated/client/deno/edge.ts"; 2 | import { config } from "https://deno.land/std@0.163.0/dotenv/mod.ts"; 3 | 4 | const envVars = await config(); 5 | 6 | const prisma = new PrismaClient({ 7 | datasources: { 8 | db: { 9 | url: envVars.DATABASE_URL, 10 | }, 11 | }, 12 | }); 13 | 14 | const dinosaurData: Prisma.DinosaurCreateInput[] = [ 15 | { 16 | name: "Aardonyx", 17 | description: "An early stage in the evolution of sauropods.", 18 | }, 19 | { 20 | name: "Abelisaurus", 21 | description: "Abel's lizard has been reconstructed from a single skull.", 22 | }, 23 | { 24 | name: "Acanthopholis", 25 | description: "No, it's not a city in Greece.", 26 | }, 27 | ]; 28 | 29 | /** 30 | * Seed the database. 31 | */ 32 | 33 | for (const u of dinosaurData) { 34 | const dinosaur = await prisma.dinosaur.create({ 35 | data: u, 36 | }); 37 | console.log(`Created dinosaur with id: ${dinosaur.id}`); 38 | } 39 | console.log(`Seeding finished.`); 40 | 41 | await prisma.$disconnect(); 42 | -------------------------------------------------------------------------------- /with-solidjs/dist/assets/index-BvsELfKN.css: -------------------------------------------------------------------------------- 1 | .dinosaur{display:block;text-decoration:none;color:#333;padding:.5rem;margin:.5rem 0;border:1px solid #ccc;border-radius:4px}.dinosaur:hover{background-color:#f0f0f0}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}} 2 | -------------------------------------------------------------------------------- /with-tanstack/src/components/DinosaurDetail.tsx: -------------------------------------------------------------------------------- 1 | // components/DinosaurDetail.tsx 2 | 3 | import { useParams } from "@tanstack/react-router"; 4 | import { useQuery } from "@tanstack/react-query"; 5 | 6 | async function fetchDinosaurDetail(name: string) { 7 | const response = await fetch(`http://localhost:8000/api/dinosaurs/${name}`); 8 | if (!response.ok) { 9 | throw new Error("Failed to fetch dinosaur detail"); 10 | } 11 | return response.json(); 12 | } 13 | 14 | export function DinosaurDetail() { 15 | const { name } = useParams({ from: "/dinosaur/$name" }); 16 | const { 17 | data: dinosaur, 18 | isLoading, 19 | error, 20 | } = useQuery({ 21 | queryKey: ["dinosaur", name], 22 | queryFn: () => fetchDinosaurDetail(name), 23 | }); 24 | 25 | if (isLoading) return
Loading...
; 26 | if (error instanceof Error) { 27 | return
An error occurred: {error.message}
; 28 | } 29 | 30 | return ( 31 |
32 |

{name}

33 |

{dinosaur?.description}

34 |
35 | ); 36 | } 37 | -------------------------------------------------------------------------------- /with-fresh/deno.json: -------------------------------------------------------------------------------- 1 | { 2 | "nodeModulesDir": "auto", 3 | "tasks": { 4 | "check": "deno fmt --check . && deno lint . && deno check", 5 | "dev": "deno run -A --watch=static/,routes/ dev.ts", 6 | "build": "deno run -A dev.ts build", 7 | "start": "deno serve -A _fresh/server.js", 8 | "update": "deno run -A -r jsr:@fresh/update ." 9 | }, 10 | "lint": { 11 | "rules": { 12 | "tags": [ 13 | "fresh", 14 | "recommended" 15 | ] 16 | } 17 | }, 18 | "exclude": [ 19 | "**/_fresh/*" 20 | ], 21 | "imports": { 22 | "fresh": "jsr:@fresh/core@^2.0.0-alpha.60", 23 | "preact": "npm:preact@^10.27.1", 24 | "@preact/signals": "npm:@preact/signals@^2.3.1" 25 | }, 26 | "compilerOptions": { 27 | "lib": [ 28 | "dom", 29 | "dom.asynciterable", 30 | "dom.iterable", 31 | "deno.ns" 32 | ], 33 | "jsx": "precompile", 34 | "jsxImportSource": "preact", 35 | "jsxPrecompileSkipElements": [ 36 | "a", 37 | "img", 38 | "source", 39 | "body", 40 | "html", 41 | "head" 42 | ] 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /with-qwik/src/root.tsx: -------------------------------------------------------------------------------- 1 | import { component$ } from "@builder.io/qwik"; 2 | import { 3 | QwikCityProvider, 4 | RouterOutlet, 5 | ServiceWorkerRegister, 6 | } from "@builder.io/qwik-city"; 7 | import { RouterHead } from "./components/router-head/router-head"; 8 | import { isDev } from "@builder.io/qwik/build"; 9 | 10 | import "./global.css"; 11 | 12 | export default component$(() => { 13 | /** 14 | * The root of a QwikCity site always start with the component, 15 | * immediately followed by the document's and . 16 | * 17 | * Don't remove the `` and `` elements. 18 | */ 19 | 20 | return ( 21 | 22 | 23 | 24 | {!isDev && ( 25 | 29 | )} 30 | 31 | 32 | 33 | 34 | {!isDev && } 35 | 36 | 37 | ); 38 | }); 39 | -------------------------------------------------------------------------------- /with-tanstack/api/main.ts: -------------------------------------------------------------------------------- 1 | import { Hono } from "@hono/hono"; 2 | import { cors } from "@hono/hono/cors"; 3 | import data from "./data.json" with { type: "json" }; 4 | 5 | const app = new Hono(); 6 | 7 | app.use( 8 | "/api/*", 9 | cors({ 10 | origin: "http://localhost:5173", 11 | allowMethods: ["GET", "POST", "PUT", "DELETE"], 12 | allowHeaders: ["Content-Type", "Authorization"], 13 | exposeHeaders: ["Content-Type", "Authorization"], 14 | credentials: true, 15 | maxAge: 600, 16 | }), 17 | ); 18 | 19 | app.get("/", (c) => { 20 | return c.text("Welcome to the dinosaur API!"); 21 | }); 22 | 23 | app.get("/api/dinosaurs", (c) => { 24 | return c.json(data); 25 | }); 26 | 27 | app.get("/api/dinosaurs/:dinosaur", (c) => { 28 | if (!c.req.param("dinosaur")) { 29 | return c.text("No dinosaur name provided."); 30 | } 31 | 32 | const dinosaur = data.find((item) => 33 | item.name.toLowerCase() === c.req.param("dinosaur").toLowerCase() 34 | ); 35 | 36 | if (dinosaur) { 37 | return c.json(dinosaur); 38 | } else { 39 | return c.notFound(); 40 | } 41 | }); 42 | 43 | Deno.serve(app.fetch); 44 | -------------------------------------------------------------------------------- /with-fresh/static/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 11 | 15 | 19 | 20 | -------------------------------------------------------------------------------- /with-vue/src/components/Dinosaurs.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 22 | 35 | 36 | -------------------------------------------------------------------------------- /with-mysql2/main.ts: -------------------------------------------------------------------------------- 1 | // get the client 2 | import mysql from "npm:mysql2@^2.3.3/promise"; 3 | 4 | // create the connection to database 5 | const connection = await mysql.createConnection({ 6 | host: "localhost", 7 | user: "root", 8 | password: "password", 9 | }); 10 | 11 | await connection.query("CREATE DATABASE denos"); 12 | await connection.query("use denos"); 13 | await connection.query( 14 | "CREATE TABLE `dinosaurs` ( `id` int NOT NULL AUTO_INCREMENT PRIMARY KEY, `name` varchar(255) NOT NULL, `description` varchar(255) )", 15 | ); 16 | await connection.query( 17 | "INSERT INTO `dinosaurs` (id, name, description) VALUES (1, 'Aardonyx', 'An early stage in the evolution of sauropods.'), (2, 'Abelisaurus', 'Abels lizard has been reconstructed from a single skull.'), (3, 'Deno', 'The fastest dinosaur that ever lived.')", 18 | ); 19 | 20 | const [select_all_results, select_all_fields] = await connection.query( 21 | "SELECT * FROM `dinosaurs`", 22 | ); 23 | console.log(select_all_results); 24 | 25 | const [select_one_results, select_one_fields] = await connection.query( 26 | "SELECT * FROM `dinosaurs` WHERE `name` = 'Deno'", 27 | ); 28 | console.log(select_one_results); 29 | 30 | // close the connection 31 | await connection.end(); 32 | -------------------------------------------------------------------------------- /with-grafana/otel-collector.yml: -------------------------------------------------------------------------------- 1 | # Tested with OpenTelemetry Collector Contrib v0.98.0 2 | receivers: 3 | otlp: 4 | protocols: 5 | grpc: 6 | endpoint: 0.0.0.0:4317 7 | http: 8 | endpoint: 0.0.0.0:4318 9 | 10 | processors: 11 | batch: 12 | 13 | exporters: 14 | otlphttp/grafana_cloud: 15 | # https://github.com/open-telemetry/opentelemetry-collector/tree/main/exporter/otlphttpexporter 16 | endpoint: $_YOUR_GRAFANA_OTLP_ENDPOINT 17 | auth: 18 | authenticator: basicauth/grafana_cloud 19 | 20 | extensions: 21 | basicauth/grafana_cloud: 22 | # https://github.com/open-telemetry/opentelemetry-collector-contrib/tree/main/extension/basicauthextension 23 | client_auth: 24 | username: $_YOUR_INSTANCE_ID # instance id 25 | password: $_YOUR_API_TOKEN # API token 26 | 27 | service: 28 | extensions: [basicauth/grafana_cloud] 29 | pipelines: 30 | traces: 31 | receivers: [otlp] 32 | processors: [batch] 33 | exporters: [otlphttp/grafana_cloud] 34 | metrics: 35 | receivers: [otlp] 36 | processors: [batch] 37 | exporters: [otlphttp/grafana_cloud] 38 | logs: 39 | receivers: [otlp] 40 | processors: [batch] 41 | exporters: [otlphttp/grafana_cloud] 42 | -------------------------------------------------------------------------------- /with-trpc/deno.lock: -------------------------------------------------------------------------------- 1 | { 2 | "version": "4", 3 | "specifiers": { 4 | "jsr:@std/path@^1.0.6": "1.0.8", 5 | "npm:@trpc/client@^11.0.0-rc.593": "11.0.0-rc.608_@trpc+server@11.0.0-rc.608", 6 | "npm:@trpc/server@^11.0.0-rc.593": "11.0.0-rc.608", 7 | "npm:zod@^3.23.8": "3.23.8" 8 | }, 9 | "jsr": { 10 | "@std/path@1.0.8": { 11 | "integrity": "548fa456bb6a04d3c1a1e7477986b6cffbce95102d0bb447c67c4ee70e0364be" 12 | } 13 | }, 14 | "npm": { 15 | "@trpc/client@11.0.0-rc.608_@trpc+server@11.0.0-rc.608": { 16 | "integrity": "sha512-ZvhYhewiXXo3Kfy7JazVShsJUJTyqgkEV1rjhioJ6r3aIGw0ZS6zyyjcq1w99DTIzRP//FgB239NG5c66Ki9sw==", 17 | "dependencies": [ 18 | "@trpc/server" 19 | ] 20 | }, 21 | "@trpc/server@11.0.0-rc.608": { 22 | "integrity": "sha512-+qxeyWlS+1zlTbekG7C+khDGZn788kLJG+ufO8mH/kgbRC+/a0OZSk7tyQI2Pf+UWeKc6KzrTi7TRBOOEBBE1A==" 23 | }, 24 | "zod@3.23.8": { 25 | "integrity": "sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==" 26 | } 27 | }, 28 | "workspace": { 29 | "dependencies": [ 30 | "jsr:@std/path@^1.0.6", 31 | "npm:@trpc/client@^11.0.0-rc.593", 32 | "npm:@trpc/server@^11.0.0-rc.593", 33 | "npm:zod@^3.23.8" 34 | ] 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /with-trpc/server/index.ts: -------------------------------------------------------------------------------- 1 | import { createHTTPServer } from "@trpc/server/adapters/standalone"; 2 | import { z } from "zod"; 3 | import { db } from "./db.ts"; 4 | import { publicProcedure, router } from "./trpc.ts"; 5 | 6 | const appRouter = router({ 7 | dino: { 8 | list: publicProcedure.query(async () => { 9 | const dinos = await db.dino.findMany(); 10 | return dinos; 11 | }), 12 | byName: publicProcedure.input(z.string()).query(async (opts) => { 13 | const { input } = opts; 14 | const dino = await db.dino.findByName(input); 15 | return dino; 16 | }), 17 | create: publicProcedure 18 | .input(z.object({ name: z.string(), description: z.string() })) 19 | .mutation(async (opts) => { 20 | const { input } = opts; 21 | const dino = await db.dino.create(input); 22 | return dino; 23 | }), 24 | }, 25 | examples: { 26 | iterable: publicProcedure.query(async function* () { 27 | for (let i = 0; i < 3; i++) { 28 | await new Promise((resolve) => setTimeout(resolve, 500)); 29 | yield i; 30 | } 31 | }), 32 | }, 33 | }); 34 | 35 | // Export type router type signature, this is used by the client. 36 | export type AppRouter = typeof appRouter; 37 | 38 | const server = createHTTPServer({ 39 | router: appRouter, 40 | }); 41 | 42 | server.listen(3000); 43 | -------------------------------------------------------------------------------- /with-tanstack/src/components/DinosaurList.tsx: -------------------------------------------------------------------------------- 1 | // components/DinosaurList.tsx 2 | 3 | import { useQuery } from "@tanstack/react-query"; 4 | import { Link } from "@tanstack/react-router"; 5 | 6 | async function fetchDinosaurs() { 7 | const response = await fetch("http://localhost:8000/api/dinosaurs"); 8 | if (!response.ok) { 9 | throw new Error("Failed to fetch dinosaurs"); 10 | } 11 | return response.json(); 12 | } 13 | 14 | export function DinosaurList() { 15 | const { 16 | data: dinosaurs, 17 | isLoading, 18 | error, 19 | } = useQuery({ 20 | queryKey: ["dinosaurs"], 21 | queryFn: fetchDinosaurs, 22 | }); 23 | 24 | if (isLoading) return
Loading...
; 25 | if (error instanceof Error) { 26 | return
An error occurred: {error.message}
; 27 | } 28 | 29 | return ( 30 |
31 |

Dinosaur List

32 |
    33 | {dinosaurs?.map((dino: { name: string; description: string }) => ( 34 |
  • 35 | 40 | {dino.name} 41 | 42 |
    • 43 | ))} 44 |
45 |
46 | ); 47 | } 48 | -------------------------------------------------------------------------------- /with-trpc/client/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * This is the client-side code that uses the inferred types from the server 3 | */ 4 | import { 5 | createTRPCClient, 6 | splitLink, 7 | unstable_httpBatchStreamLink, 8 | unstable_httpSubscriptionLink, 9 | } from "@trpc/client"; 10 | /** 11 | * We only import the `AppRouter` type from the server - this is not available at runtime 12 | */ 13 | import type { AppRouter } from "../server/index.ts"; 14 | 15 | // Initialize the tRPC client 16 | const trpc = createTRPCClient({ 17 | links: [ 18 | splitLink({ 19 | condition: (op) => op.type === "subscription", 20 | true: unstable_httpSubscriptionLink({ 21 | url: "http://localhost:3000", 22 | }), 23 | false: unstable_httpBatchStreamLink({ 24 | url: "http://localhost:3000", 25 | }), 26 | }), 27 | ], 28 | }); 29 | 30 | const dinos = await trpc.dino.list.query(); 31 | console.log("Dinos:", dinos); 32 | 33 | const createdDino = await trpc.dino.create.mutate({ 34 | name: "Denosaur", 35 | description: "Dinosaurs should be simple.", 36 | }); 37 | console.log("Created dino:", createdDino); 38 | 39 | const dino = await trpc.dino.byName.query("Denosaur"); 40 | console.log("Denosaur:", dino); 41 | 42 | const iterable = await trpc.examples.iterable.query(); 43 | 44 | for await (const i of iterable) { 45 | console.log("Iterable:", i); 46 | } 47 | -------------------------------------------------------------------------------- /with-redis/main.ts: -------------------------------------------------------------------------------- 1 | import { Server } from "https://deno.land/std@0.148.0/http/server.ts"; 2 | import { createClient } from "npm:redis@^4.5"; 3 | 4 | // make a connection to the local instance of redis 5 | const client = createClient({ 6 | url: "redis://localhost:6379", 7 | socket: { 8 | connectTimeout: 50000, 9 | }, 10 | }); 11 | 12 | client.on("error", (error) => { 13 | console.error(error); 14 | }); 15 | 16 | await client.connect(); 17 | 18 | const server = new Server({ 19 | handler: async (req) => { 20 | const { pathname } = new URL(req.url); 21 | // strip the leading slash 22 | const username = pathname.substring(1); 23 | const cached_user = await client.get(username); 24 | if (cached_user) { 25 | return new Response(cached_user, { 26 | headers: { 27 | "content-type": "application/json", 28 | "is-cached": "true", 29 | }, 30 | }); 31 | } else { 32 | const resp = await fetch(`https://api.github.com/users/${username}`); 33 | const user = await resp.json(); 34 | await client.set(username, JSON.stringify(user)); 35 | return new Response(JSON.stringify(user), { 36 | headers: { 37 | "content-type": "application/json", 38 | "is-cached": "false", 39 | }, 40 | }); 41 | } 42 | }, 43 | 44 | port: 3000, 45 | }); 46 | 47 | server.listenAndServe(); 48 | -------------------------------------------------------------------------------- /with-react/.vite/deps/_metadata.json: -------------------------------------------------------------------------------- 1 | { 2 | "hash": "a51bcc77", 3 | "browserHash": "0d0daa06", 4 | "optimized": { 5 | "react/jsx-runtime": { 6 | "src": "../../node_modules/.deno/react@18.2.0/node_modules/react/jsx-runtime.js", 7 | "file": "react_jsx-runtime.js", 8 | "fileHash": "8c44bcf7", 9 | "needsInterop": true 10 | }, 11 | "react/jsx-dev-runtime": { 12 | "src": "../../node_modules/.deno/react@18.2.0/node_modules/react/jsx-dev-runtime.js", 13 | "file": "react_jsx-dev-runtime.js", 14 | "fileHash": "82646f35", 15 | "needsInterop": true 16 | }, 17 | "react": { 18 | "src": "../../node_modules/.deno/react@18.2.0/node_modules/react/index.js", 19 | "file": "react.js", 20 | "fileHash": "9c543fb6", 21 | "needsInterop": true 22 | }, 23 | "react-dom/client": { 24 | "src": "../../node_modules/.deno/react-dom@18.2.0_1/node_modules/react-dom/client.js", 25 | "file": "react-dom_client.js", 26 | "fileHash": "1843d6e8", 27 | "needsInterop": true 28 | }, 29 | "react-router-dom": { 30 | "src": "../../node_modules/.deno/react-router-dom@6.4.3_1/node_modules/react-router-dom/dist/index.js", 31 | "file": "react-router-dom.js", 32 | "fileHash": "6572faed", 33 | "needsInterop": false 34 | } 35 | }, 36 | "chunks": { 37 | "chunk-BJFMU22U": { 38 | "file": "chunk-BJFMU22U.js" 39 | } 40 | } 41 | } -------------------------------------------------------------------------------- /with-qwik/src/components/router-head/router-head.tsx: -------------------------------------------------------------------------------- 1 | import { component$ } from "@builder.io/qwik"; 2 | import { useDocumentHead, useLocation } from "@builder.io/qwik-city"; 3 | 4 | /** 5 | * The RouterHead component is placed inside of the document `` element. 6 | */ 7 | export const RouterHead = component$(() => { 8 | const head = useDocumentHead(); 9 | const loc = useLocation(); 10 | 11 | return ( 12 | <> 13 | {head.title} 14 | 15 | 16 | 17 | 18 | 19 | {head.meta.map((m) => ( 20 | 21 | ))} 22 | 23 | {head.links.map((l) => ( 24 | 25 | ))} 26 | 27 | {head.styles.map((s) => ( 28 | 18 | 19 | 20 | 21 |
22 |
23 |

A very simple HTTP file server

24 |

25 | This little example is being served by Deno. 26 | You can run it locally or in production on Deno Deploy or other hosting platforms. 27 |

28 |
    29 |
  • Run it locally withdeno task dev
    • 30 |
  • Deploy it to Deno Deploy via the CLI by runningdeno deploy
    • 31 |
  • Run it locally and share it publically by running deno deploy --connected
    • 32 |
33 |
34 |
35 |
36 |

What's next?

37 |

38 | You can clone this example and deploy it to Deno Deploy in just a few clicks 39 | Deploy on Deno 40 |

41 | 49 |
50 |
51 |
52 | 73 | 74 | -------------------------------------------------------------------------------- /hello-world/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Hello, Deno 8 | 9 | 10 | 11 | 12 | 18 | 19 | 20 | 21 |
22 |
23 | 24 | 25 |

26 |

27 | Hello, Deno! 28 |

29 |

30 |

31 | This little example is being served by Deno. 32 | You can run it locally or in porduction on Deno Deploy or other hosting platforms. 33 |

34 |
    35 |
  • Run it locally withdeno task dev
    • 36 |
  • Deploy it to Deno Deploy via the CLI by runningdeno deploy
    • 37 |
  • Run it locally and share it publically by running deno deploy --connected
    • 38 |
39 |
40 |
41 |
42 |

What's next?

43 |

44 | You can clone this example and deploy it to Deno Deploy in just a few clicks 45 | Deploy on Deno 46 |

47 | 55 |
56 |
57 |
58 | 79 | 80 | -------------------------------------------------------------------------------- /simple-server/pages/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Hello, Deno 8 | 9 | 10 | 11 | 12 | 18 | 19 | 20 | 21 |
22 |
23 | 24 | 25 |

26 |

27 | Hello, Deno! 28 |

29 |

30 |

31 | This little example is being served by Deno. 32 | You can run it locally or in porduction on Deno Deploy or other hosting platforms. 33 |

34 |
    35 |
  • Run it locally withdeno task dev
    • 36 |
  • Deploy it to Deno Deploy via the CLI by runningdeno deploy
    • 37 |
  • Run it locally and share it publically by running deno deploy --connected
    • 38 |
39 |
40 |
41 |
42 |

What's next?

43 |

44 | You can clone this example and deploy it to Deno Deploy in just a few clicks 45 | Deploy on Deno 46 |

47 | 55 |
56 |
57 |
58 | 79 | 80 | -------------------------------------------------------------------------------- /with-oak-deno-kv/readme.md: -------------------------------------------------------------------------------- 1 | # Oak API with Deno KV 2 | 3 | This is an example API that shows: 4 | 5 | - API routes with [Oak](https://deno.land/x/oak) 6 | - Deno KV with 7 | [CRUD operations](https://en.wikipedia.org/wiki/Create,_read,_update_and_delete) 8 | - Deno KV with 9 | [secondary indices](https://deno.com/manual/runtime/kv/secondary_indexes) 10 | - Deno KV with 11 | [atomic transactions](https://deno.com/manual/runtime/kv/transactions) 12 | - ~Deno KV with filtering~ 13 | - ~Deno KV with pagination~ 14 | 15 | ## Start the server 16 | 17 | ``` 18 | deno task dev 19 | ``` 20 | 21 | ## API 22 | 23 | ### Adding or updating (upserting) a new user 24 | 25 | Send a `POST` request to `/users/` with header set to 26 | `Content-Type: applicatin/json` and body as: 27 | 28 | ```json 29 | { 30 | "id": "1", 31 | "email": "andy@deno.com", 32 | "name": "andy", 33 | "password": "12345" 34 | } 35 | ``` 36 | 37 | As a `curl` command: 38 | 39 | ```bash 40 | curl -X POST http://localhost:8000/users -H "Content-Type: application/json" -d '{ "id": "1", "email": "andy@deno.com", "name": "andy", "password": "12345" }' 41 | ``` 42 | 43 | ### Getting all users 44 | 45 | ``` 46 | GET /users/ 47 | ``` 48 | 49 | As a `curl`: 50 | 51 | ``` 52 | curl https://localhost:8000/users 53 | ``` 54 | 55 | Or you can visit `https://localhost:8000/users` in your browser. 56 | 57 | ### Getting a user by ID 58 | 59 | ``` 60 | GET /users/:id 61 | ``` 62 | 63 | As a `curl`: 64 | 65 | ``` 66 | curl https://localhost:8000/users/1 67 | ``` 68 | 69 | Or you can visit `https://localhost:8000/users/1` in your browser. 70 | 71 | ### Getting a user by email 72 | 73 | ``` 74 | GET /users/email/:email 75 | ``` 76 | 77 | As a `curl`: 78 | 79 | ``` 80 | curl https://localhost:8000/users/email/andy@deno.com 81 | ``` 82 | 83 | Or you can visit `https://localhost:8000/users/email/andy@deno.com` in your 84 | browser. 85 | 86 | ### Getting address by user id 87 | 88 | ``` 89 | GET /users/:id/address 90 | ``` 91 | 92 | As a `curl`: 93 | 94 | ``` 95 | curl https://localhost/users/1/address 96 | ``` 97 | 98 | Or you can visit `https://localhost:8000/users/1/address` in your browser. 99 | 100 | ### Adding an address to a user 101 | 102 | ``` 103 | POST /users/:id/address 104 | ``` 105 | 106 | Send a `POST` request to `/users/:id/address` where `:id` is the user id, with 107 | header set to `Content-Type: applicatin/json` and body as: 108 | 109 | ```json 110 | { 111 | "city": "los angeles", 112 | "street": "main street" 113 | } 114 | ``` 115 | 116 | As an example `curl` command: 117 | 118 | ```bash 119 | curl -X POST http://localhost:8000/users/1/address -H "Content-Type: application/json" -d '{ "city": "los angeles", "street": "main street" }' 120 | ``` 121 | 122 | ### Deleting a user by id 123 | 124 | ``` 125 | DELETE /users/:id 126 | ``` 127 | 128 | As an example `curl` command: 129 | 130 | ```bash 131 | curl -X DELETE https://localhost:8000/users/1 132 | ``` 133 | -------------------------------------------------------------------------------- /with-drizzle/drizzle/meta/0000_snapshot.json: -------------------------------------------------------------------------------- 1 | { 2 | "id": "00000000-0000-0000-0000-000000000000", 3 | "prevId": "", 4 | "version": "7", 5 | "dialect": "postgresql", 6 | "tables": { 7 | "public.dinosaurs": { 8 | "name": "dinosaurs", 9 | "schema": "", 10 | "columns": { 11 | "id": { 12 | "name": "id", 13 | "type": "serial", 14 | "primaryKey": true, 15 | "notNull": true 16 | }, 17 | "name": { 18 | "name": "name", 19 | "type": "text", 20 | "primaryKey": false, 21 | "notNull": false 22 | }, 23 | "description": { 24 | "name": "description", 25 | "type": "text", 26 | "primaryKey": false, 27 | "notNull": false 28 | } 29 | }, 30 | "indexes": {}, 31 | "foreignKeys": {}, 32 | "compositePrimaryKeys": {}, 33 | "uniqueConstraints": {}, 34 | "checkConstraints": {}, 35 | "policies": {}, 36 | "isRLSEnabled": false 37 | }, 38 | "public.tasks": { 39 | "name": "tasks", 40 | "schema": "", 41 | "columns": { 42 | "id": { 43 | "name": "id", 44 | "type": "serial", 45 | "primaryKey": true, 46 | "notNull": true 47 | }, 48 | "dinosaur_id": { 49 | "name": "dinosaur_id", 50 | "type": "integer", 51 | "primaryKey": false, 52 | "notNull": false 53 | }, 54 | "description": { 55 | "name": "description", 56 | "type": "text", 57 | "primaryKey": false, 58 | "notNull": false 59 | }, 60 | "date_created": { 61 | "name": "date_created", 62 | "type": "timestamp", 63 | "primaryKey": false, 64 | "notNull": false 65 | }, 66 | "is_complete": { 67 | "name": "is_complete", 68 | "type": "boolean", 69 | "primaryKey": false, 70 | "notNull": false 71 | } 72 | }, 73 | "indexes": {}, 74 | "foreignKeys": { 75 | "tasks_dinosaur_id_fkey": { 76 | "name": "tasks_dinosaur_id_fkey", 77 | "tableFrom": "tasks", 78 | "tableTo": "dinosaurs", 79 | "schemaTo": "public", 80 | "columnsFrom": [ 81 | "dinosaur_id" 82 | ], 83 | "columnsTo": [ 84 | "id" 85 | ], 86 | "onDelete": "no action", 87 | "onUpdate": "no action" 88 | } 89 | }, 90 | "compositePrimaryKeys": {}, 91 | "uniqueConstraints": {}, 92 | "checkConstraints": {}, 93 | "policies": {}, 94 | "isRLSEnabled": false 95 | } 96 | }, 97 | "enums": {}, 98 | "schemas": {}, 99 | "sequences": {}, 100 | "roles": {}, 101 | "policies": {}, 102 | "views": {}, 103 | "_meta": { 104 | "schemas": {}, 105 | "tables": {}, 106 | "columns": {} 107 | }, 108 | "internal": { 109 | "tables": {} 110 | } 111 | } -------------------------------------------------------------------------------- /with-fresh/static/styles.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | box-sizing: border-box; 5 | } 6 | * { 7 | margin: 0; 8 | } 9 | button { 10 | color: inherit; 11 | } 12 | button, [role="button"] { 13 | cursor: pointer; 14 | } 15 | code { 16 | font-family: 17 | ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", 18 | "Courier New", monospace; 19 | font-size: 1em; 20 | } 21 | img, 22 | svg { 23 | display: block; 24 | } 25 | img, 26 | video { 27 | max-width: 100%; 28 | height: auto; 29 | } 30 | 31 | html { 32 | line-height: 1.5; 33 | -webkit-text-size-adjust: 100%; 34 | font-family: 35 | ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", 36 | Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, 37 | "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", 38 | "Noto Color Emoji"; 39 | } 40 | .transition-colors { 41 | transition-property: background-color, border-color, color, fill, stroke; 42 | transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); 43 | transition-duration: 150ms; 44 | } 45 | .my-6 { 46 | margin-bottom: 1.5rem; 47 | margin-top: 1.5rem; 48 | } 49 | .text-4xl { 50 | font-size: 2.25rem; 51 | line-height: 2.5rem; 52 | } 53 | .mx-2 { 54 | margin-left: 0.5rem; 55 | margin-right: 0.5rem; 56 | } 57 | .my-4 { 58 | margin-bottom: 1rem; 59 | margin-top: 1rem; 60 | } 61 | .mx-auto { 62 | margin-left: auto; 63 | margin-right: auto; 64 | } 65 | .px-4 { 66 | padding-left: 1rem; 67 | padding-right: 1rem; 68 | } 69 | .py-8 { 70 | padding-bottom: 2rem; 71 | padding-top: 2rem; 72 | } 73 | .bg-\[\#86efac\] { 74 | background-color: #86efac; 75 | } 76 | .text-3xl { 77 | font-size: 1.875rem; 78 | line-height: 2.25rem; 79 | } 80 | .py-6 { 81 | padding-bottom: 1.5rem; 82 | padding-top: 1.5rem; 83 | } 84 | .px-2 { 85 | padding-left: 0.5rem; 86 | padding-right: 0.5rem; 87 | } 88 | .py-1 { 89 | padding-bottom: 0.25rem; 90 | padding-top: 0.25rem; 91 | } 92 | .border-gray-500 { 93 | border-color: #6b7280; 94 | } 95 | .bg-white { 96 | background-color: #fff; 97 | } 98 | .flex { 99 | display: flex; 100 | } 101 | .gap-8 { 102 | grid-gap: 2rem; 103 | gap: 2rem; 104 | } 105 | .font-bold { 106 | font-weight: 700; 107 | } 108 | .max-w-screen-md { 109 | max-width: 768px; 110 | } 111 | .flex-col { 112 | flex-direction: column; 113 | } 114 | .items-center { 115 | align-items: center; 116 | } 117 | .justify-center { 118 | justify-content: center; 119 | } 120 | .border-2 { 121 | border-width: 2px; 122 | } 123 | .rounded-sm { 124 | border-radius: 0.25rem; 125 | } 126 | .hover\:bg-gray-200:hover { 127 | background-color: #e5e7eb; 128 | } 129 | .tabular-nums { 130 | font-variant-numeric: tabular-nums; 131 | } 132 | .min-h-screen { 133 | min-height: 100vh; 134 | } 135 | 136 | .fresh-gradient { 137 | background-color: rgb(134, 239, 172); 138 | background-image: linear-gradient( 139 | to right bottom, 140 | rgb(219, 234, 254), 141 | rgb(187, 247, 208), 142 | rgb(254, 249, 195) 143 | ); 144 | } 145 | -------------------------------------------------------------------------------- /with-express/readme.md: -------------------------------------------------------------------------------- 1 | # How to use Express with Deno 2 | 3 | [Express](https://expressjs.com/) is a popular web framework known for being 4 | simple and unopinionated with a large ecosystem of middleware. 5 | 6 | This How To guide will show you how to create a simple API using Express and 7 | Deno. 8 | 9 | ## Create `main.ts` 10 | 11 | Let's create `main.ts`: 12 | 13 | ``` 14 | touch main.ts 15 | ``` 16 | 17 | In `main.ts`, let's create a simple server: 18 | 19 | ```ts 20 | import express from "npm:express@4.18.2"; 21 | 22 | const app = express(); 23 | 24 | app.get("/", (req, res) => { 25 | res.send("Welcome to the Dinosaur API!"); 26 | }); 27 | 28 | app.listen(8000); 29 | ``` 30 | 31 | Let's run this server: 32 | 33 | ``` 34 | deno run -A main.ts 35 | ``` 36 | 37 | And point our browser to `localhost:8000`. You should see: 38 | 39 | ``` 40 | Welcome to the Dinosaur API! 41 | ``` 42 | 43 | ## Add data and routes 44 | 45 | The next step here is to add some data. We'll use this Dinosaur data that we 46 | found from [this article](https://www.thoughtco.com/dinosaurs-a-to-z-1093748). 47 | Feel free to 48 | [copy it from here](https://github.com/denoland/examples/blob/main/with-express/data.json). 49 | 50 | Let's create `data.json`: 51 | 52 | ``` 53 | touch data.json 54 | ``` 55 | 56 | And paste in the dinosaur data. 57 | 58 | Next, let's import that data into `main.ts`. Let's add this line at the top of 59 | the file: 60 | 61 | ```ts 62 | import data from "./data.json" with { type: "json" }; 63 | ``` 64 | 65 | Then, we can create the routes to access that data. To keep it simple, let's 66 | just define `GET` handlers for `/api/` and `/api/:dinosaur`. Add the below after 67 | the `const app = express();` line: 68 | 69 | ```ts 70 | app.get("/", (req, res) => { 71 | res.send("Welcome to the Dinosaur API!"); 72 | }); 73 | 74 | app.get("/api", (req, res) => { 75 | res.send(data); 76 | }); 77 | 78 | app.get("/api/:dinosaur", (req, res) => { 79 | if (req?.params?.dinosaur) { 80 | const filtered = data.filter(function (item) { 81 | return item["name"].toLowerCase() === req.params.dinosaur.toLowerCase(); 82 | }); 83 | if (filtered.length === 0) { 84 | return res.send("No dinosaurs found."); 85 | } else { 86 | return res.send(filtered[0]); 87 | } 88 | } 89 | }); 90 | 91 | app.listen(8000); 92 | ``` 93 | 94 | Let's run the server with `deno run -A main.ts` and check out 95 | `localhost:8000/api`. You should see a list of dinosaurs: 96 | 97 | ```json 98 | [ 99 | { 100 | "name": "Aardonyx", 101 | "description": "An early stage in the evolution of sauropods." 102 | }, 103 | { 104 | "name": "Abelisaurus", 105 | "description": "\"Abel's lizard\" has been reconstructed from a single skull." 106 | }, 107 | { 108 | "name": "Abrictosaurus", 109 | "description": "An early relative of Heterodontosaurus." 110 | }, 111 | ... 112 | ``` 113 | 114 | And when we go to `localhost:8000/api/aardonyx`: 115 | 116 | ```json 117 | { 118 | "name": "Aardonyx", 119 | "description": "An early stage in the evolution of sauropods." 120 | } 121 | ``` 122 | 123 | Great! 124 | -------------------------------------------------------------------------------- /simple-server/public/images/deno.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /with-fastify/readme.md: -------------------------------------------------------------------------------- 1 | # How to use Fastify with Deno 2 | 3 | [Fastify](https://fastify.dev/) is a popular web framework known for being a 4 | fast and low overhead web framework. 5 | 6 | This How To guide will show you how to create a simple API using Fastify and 7 | Deno. 8 | 9 | ## Create `main.ts` 10 | 11 | Let's create `main.ts`: 12 | 13 | ``` 14 | touch main.ts 15 | ``` 16 | 17 | In `main.ts`, let's create a simple server: 18 | 19 | ```ts 20 | import Fastify, { 21 | type FastifyReply, 22 | type FastifyRequest, 23 | } from "npm:fastify@5.0.0"; 24 | 25 | const fastify = Fastify(); 26 | 27 | fastify.get("/", (_req: FastifyRequest, reply: FastifyReply) => { 28 | reply.send("Welcome to the Dinosaur API!"); 29 | }); 30 | 31 | await fastify.listen({ port: 8000 }); 32 | ``` 33 | 34 | Let's run this server: 35 | 36 | ``` 37 | deno run -A main.ts 38 | ``` 39 | 40 | And point our browser to `localhost:8000`. You should see: 41 | 42 | ``` 43 | Welcome to the Dinosaur API! 44 | ``` 45 | 46 | ## Add data and routes 47 | 48 | The next step here is to add some data. We'll use this Dinosaur data that we 49 | found from [this article](https://www.thoughtco.com/dinosaurs-a-to-z-1093748). 50 | Feel free to 51 | [copy it from here](https://github.com/denoland/examples/blob/main/with-fastify/data.json). 52 | 53 | Let's create `data.json`: 54 | 55 | ``` 56 | touch data.json 57 | ``` 58 | 59 | And paste in the dinosaur data. 60 | 61 | Next, let's import that data into `main.ts`. Let's add this line at the top of 62 | the file: 63 | 64 | ```ts 65 | import data from "./data.json" with { type: "json" }; 66 | ``` 67 | 68 | Then, we can create the routes to access that data. To keep it simple, let's 69 | just define `GET` handlers for `/api/` and `/api/:dinosaur`. Add the below after 70 | the `const fastify = Fastify();` line: 71 | 72 | ```ts 73 | fastify.get("/", (_req: FastifyRequest, reply: FastifyReply) => { 74 | reply.send("Welcome to the Dinosaur API!"); 75 | }); 76 | 77 | fastify.get("/api", (_req: FastifyRequest, reply: FastifyReply) => { 78 | reply.send(data); 79 | }); 80 | 81 | fastify.get( 82 | "/api/:dinosaur", 83 | ( 84 | req: FastifyRequest<{ Params: { dinosaur: string } }>, 85 | reply: FastifyReply, 86 | ) => { 87 | if (req.params.dinosaur) { 88 | const found = data.find((dino: { 89 | name: string; 90 | description: string; 91 | }) => dino.name.toLowerCase() === req.params.dinosaur?.toLowerCase()); 92 | 93 | if (found) { 94 | return reply.send(found); 95 | } 96 | } 97 | return reply.status(404).send({ message: "Dinosaur not found" }); 98 | }, 99 | ); 100 | 101 | await fastify.listen({ port: 8000 }); 102 | ``` 103 | 104 | Let's run the server with `deno run -A main.ts` and check out 105 | `localhost:8000/api`. You should see a list of dinosaurs: 106 | 107 | ```json 108 | [ 109 | { 110 | "name": "Aardonyx", 111 | "description": "An early stage in the evolution of sauropods." 112 | }, 113 | { 114 | "name": "Abelisaurus", 115 | "description": "\"Abel's lizard\" has been reconstructed from a single skull." 116 | }, 117 | { 118 | "name": "Abrictosaurus", 119 | "description": "An early relative of Heterodontosaurus." 120 | }, 121 | ... 122 | ``` 123 | 124 | And when we go to `localhost:8000/api/aardonyx`: 125 | 126 | ```json 127 | { 128 | "name": "Aardonyx", 129 | "description": "An early stage in the evolution of sauropods." 130 | } 131 | ``` 132 | 133 | Great! 134 | 135 | -------------------------------------------------------------------------------- /with-mysql2/README.md: -------------------------------------------------------------------------------- 1 | # How to use MySQL with Deno 2 | 3 | [MySQL](https://www.mysql.com/) is the most popular database in the 4 | [2022 Stack Overflow Developer Survey](https://survey.stackoverflow.co/2022/#most-popular-technologies-database) 5 | and counts Facebook, Twitter, YouTube, and Netflix among its users. 6 | 7 | You can manipulate and query a MySQL database with Deno using the `mysql2` node 8 | package and importing via `npm:mysql2`. This allows us to use its Promise 9 | wrapper and take advantage of top-level await. 10 | 11 | ```tsx 12 | import mysql from "npm:mysql2@^2.3.3/promise"; 13 | ``` 14 | 15 | ## Connecting to MySQL 16 | 17 | We can connect to our MySQL server using the `createConnection()` method. You 18 | need the host (`localhost` if you are testing, or more likely a cloud database 19 | endpoint in production) and the user and password: 20 | 21 | ```tsx 22 | const connection = await mysql.createConnection({ 23 | host: "localhost", 24 | user: "root", 25 | password: "password", 26 | }); 27 | ``` 28 | 29 | You can also optionally specify a database during the connection creation. Here 30 | we are going to use `mysql2` to create the database on the fly. 31 | 32 | ## Creating and populating the database 33 | 34 | Now that you have the connection running, you can use `connection.query()` with 35 | SQL commands to create databases and tables as well as insert the initial data. 36 | 37 | First we want to generate and select the database to use: 38 | 39 | ```tsx 40 | await connection.query("CREATE DATABASE denos"); 41 | await connection.query("use denos"); 42 | ``` 43 | 44 | Then we want to create the table: 45 | 46 | ```tsx 47 | await connection.query( 48 | "CREATE TABLE `dinosaurs` ( `id` int NOT NULL AUTO_INCREMENT PRIMARY KEY, `name` varchar(255) NOT NULL, `description` varchar(255) )", 49 | ); 50 | ``` 51 | 52 | After the table is created we can populate the data: 53 | 54 | ```tsx 55 | await connection.query( 56 | "INSERT INTO `dinosaurs` (id, name, description) VALUES (1, 'Aardonyx', 'An early stage in the evolution of sauropods.'), (2, 'Abelisaurus', 'Abels lizard has been reconstructed from a single skull.'), (3, 'Deno', 'The fastest dinosaur that ever lived.')", 57 | ); 58 | ``` 59 | 60 | We now have all the data ready to start querying. 61 | 62 | ## Querying MySQL 63 | 64 | We can use the same connection.query() method to write our queries. First we try 65 | and get all the data in our `dinosaurs` table: 66 | 67 | ```tsx 68 | const results = await connection.query("SELECT * FROM `dinosaurs`"); 69 | console.log(results); 70 | ``` 71 | 72 | The result from this query is all the data in our database: 73 | 74 | ```tsx 75 | [ 76 | [ 77 | { 78 | id: 1, 79 | name: "Aardonyx", 80 | description: "An early stage in the evolution of sauropods." 81 | }, 82 | { 83 | id: 2, 84 | name: "Abelisaurus", 85 | description: `Abel's lizard" has been reconstructed from a single skull.` 86 | }, 87 | { id: 3, name: "Deno", description: "The fastest dinosaur that ever lived." } 88 | ], 89 | ``` 90 | 91 | If we want to just get a single element from the database, we can change our 92 | query: 93 | 94 | ```tsx 95 | const [results, fields] = await connection.query( 96 | "SELECT * FROM `dinosaurs` WHERE `name` = 'Deno'", 97 | ); 98 | console.log(results); 99 | ``` 100 | 101 | Which gives us a single row result: 102 | 103 | ```tsx 104 | [{ id: 3, name: "Deno", description: "The fastest dinosaur that ever lived." }]; 105 | ``` 106 | 107 | Finally, we can close the connection: 108 | 109 | ```tsx 110 | await connection.end(); 111 | ``` 112 | 113 | For more on `mysql2`, check out their documentation 114 | [here](https://github.com/sidorares/node-mysql2). 115 | -------------------------------------------------------------------------------- /with-oak-deno-kv/db.ts: -------------------------------------------------------------------------------- 1 | export interface User { 2 | id: string; 3 | email: string; 4 | name: string; 5 | password: string; 6 | } 7 | 8 | export interface Address { 9 | city: string; 10 | street: string; 11 | } 12 | 13 | /** 14 | * Open KV. 15 | */ 16 | 17 | const kv = await Deno.openKv(); 18 | 19 | /** 20 | * Upsert user. 21 | * @param user 22 | */ 23 | 24 | export async function upsertUser(user: User) { 25 | const userKey = ["user", user.id]; 26 | const userByEmailKey = ["user_by_email", user.email]; 27 | 28 | const oldUser = await kv.get(userKey); 29 | 30 | if (!oldUser.value) { 31 | const ok = await kv.atomic() 32 | .check(oldUser) 33 | .set(userByEmailKey, user.id) 34 | .set(userKey, user) 35 | .commit(); 36 | if (!ok) throw new Error("Something went wrong."); 37 | } else { 38 | const ok = await kv.atomic() 39 | .check(oldUser) 40 | .delete(["user_by_email", oldUser.value.email]) 41 | .set(userByEmailKey, user.id) 42 | .set(userKey, user) 43 | .commit(); 44 | if (!ok) throw new Error("Something went wrong."); 45 | } 46 | } 47 | 48 | /** 49 | * Update user and address. 50 | * @param user 51 | * @param address 52 | */ 53 | 54 | export async function updateUserAndAddress(user: User, address: Address) { 55 | const userKey = ["user", user.id]; 56 | const userByEmailKey = ["user_by_email", user.email]; 57 | const addressKey = ["user_address", user.id]; 58 | 59 | const oldUser = await kv.get(userKey); 60 | 61 | if (!oldUser.value) { 62 | const ok = await kv.atomic() 63 | .check(oldUser) 64 | .set(userByEmailKey, user.id) 65 | .set(userKey, user) 66 | .set(addressKey, address) 67 | .commit(); 68 | if (!ok) throw new Error("Something went wrong."); 69 | } else { 70 | const ok = await kv.atomic() 71 | .check(oldUser) 72 | .delete(["user_by_email", oldUser.value.email]) 73 | .set(userByEmailKey, user.id) 74 | .set(userKey, user) 75 | .set(addressKey, address) 76 | .commit(); 77 | if (!ok) throw new Error("Something went wrong."); 78 | } 79 | } 80 | 81 | /** 82 | * Get all users. 83 | * @returns 84 | */ 85 | 86 | export async function getAllUsers() { 87 | const users = []; 88 | for await (const res of kv.list({ prefix: ["user"] })) { 89 | users.push(res.value); 90 | } 91 | return users; 92 | } 93 | 94 | /** 95 | * Get user by id. 96 | * @param id 97 | * @returns 98 | */ 99 | 100 | export async function getUserById(id: string): Promise { 101 | const key = ["user", id]; 102 | return (await kv.get(key)).value as User; 103 | } 104 | 105 | /** 106 | * Get user by email. 107 | * @param email 108 | * @returns 109 | */ 110 | 111 | export async function getUserByEmail(email: string) { 112 | const userByEmailKey = ["user_by_email", email]; 113 | const id = (await kv.get(userByEmailKey)).value as string; 114 | const userKey = ["user", id]; 115 | return (await kv.get(userKey)).value as User; 116 | } 117 | 118 | /** 119 | * Get address by user id. 120 | * @param id 121 | * @returns Address 122 | */ 123 | 124 | export async function getAddressByUserId(id: string) { 125 | const key = ["user_address", id]; 126 | return (await kv.get(key)).value as Address; 127 | } 128 | 129 | /** 130 | * Delete user by id. 131 | * @param id 132 | */ 133 | 134 | export async function deleteUserById(id: string) { 135 | const userKey = ["user", id]; 136 | const userRes = await kv.get(userKey); 137 | if (!userRes.value) return; 138 | const userByEmailKey = ["user_by_email", userRes.value.email]; 139 | const addressKey = ["user_address", id]; 140 | 141 | await kv.atomic() 142 | .check(userRes) 143 | .delete(userKey) 144 | .delete(userByEmailKey) 145 | .delete(addressKey) 146 | .commit(); 147 | } 148 | -------------------------------------------------------------------------------- /with-planetscale/README.md: -------------------------------------------------------------------------------- 1 | # How to use PlanetScale with Deno 2 | 3 | PlanetScale is a MySQL-compatible serverless database that is designed with a 4 | developer workflow where developers can create, branch, and deploy databases 5 | from the command line. 6 | 7 | We’ll use the PlanetScale serverless driver, `@planetscale/database`, to work 8 | with Deno. First we want to create `main.ts` and import the connect method from 9 | this package: 10 | 11 | ```tsx 12 | import { connect } from "npm:@planetscale/database@^1.4"; 13 | ``` 14 | 15 | ## Configuring our connection 16 | 17 | The connection requires three credentials: host, username, and password. These 18 | are database-specific, so we first need to create a database in PlanetScale. You 19 | can do that by following the initial instructions 20 | [here](https://planetscale.com/docs/tutorials/planetscale-quick-start-guide). 21 | Don’t worry about adding the schema—we can do that through 22 | `@planetscale/database`. 23 | 24 | Once you have created the database, head to Overview, click "Connect", and 25 | choose "Connect with `@planetscale/database`" to get the host and username. Then 26 | click through to Passwords to create a new password for your database. Once you 27 | have all three you can plug them in directly, or better, store them as 28 | environment variables: 29 | 30 | ```bash 31 | export HOST= 32 | export USERNAME= 33 | export PASSWORD= 34 | ``` 35 | 36 | Then call them using `Deno.env`: 37 | 38 | ```tsx 39 | const config = { 40 | host: Deno.env.get("HOST"), 41 | username: Deno.env.get("USERNAME"), 42 | password: Deno.env.get("PASSWORD"), 43 | }; 44 | 45 | const conn = connect(config); 46 | ``` 47 | 48 | This will also work on Deno Deploy if you set the environment variables in the 49 | dashboard. Run with: 50 | 51 | ```shell 52 | deno run --allow-net --allow-env main.ts 53 | ``` 54 | 55 | The `conn` object is now an open connection to our PlanetScale database. 56 | 57 | ## Creating and populating our database table 58 | 59 | Now that you have the connection running, you can `conn.execute()` with SQL 60 | commands to create tables and insert the initial data: 61 | 62 | ```tsx 63 | await conn.execute( 64 | "CREATE TABLE dinosaurs (id int NOT NULL AUTO_INCREMENT PRIMARY KEY, name varchar(255) NOT NULL, description varchar(255) NOT NULL);", 65 | ); 66 | await conn.execute( 67 | "INSERT INTO `dinosaurs` (id, name, description) VALUES (1, 'Aardonyx', 'An early stage in the evolution of sauropods.'), (2, 'Abelisaurus', 'Abels lizard has been reconstructed from a single skull.'), (3, 'Deno', 'The fastest dinosaur that ever lived.')", 68 | ); 69 | ``` 70 | 71 | ## Querying PlanetScale 72 | 73 | We can use same `conn.execute()` to also write our queries. Let’s get a list of 74 | all our dinosaurs: 75 | 76 | ```tsx 77 | const results = await conn.execute("SELECT * FROM `dinosaurs`"); 78 | console.log(results.rows); 79 | ``` 80 | 81 | The result: 82 | 83 | ```tsx 84 | [ 85 | { 86 | id: 1, 87 | name: "Aardonyx", 88 | description: "An early stage in the evolution of sauropods.", 89 | }, 90 | { 91 | id: 2, 92 | name: "Abelisaurus", 93 | description: "Abels lizard has been reconstructed from a single skull.", 94 | }, 95 | { id: 3, name: "Deno", description: "The fastest dinosaur that ever lived." }, 96 | ]; 97 | ``` 98 | 99 | We can also get just a single row from the database by specifying a dinosaur 100 | name: 101 | 102 | ```tsx 103 | const result = await conn.execute( 104 | "SELECT * FROM `dinosaurs` WHERE `name` = 'Deno'", 105 | ); 106 | console.log(result.rows); 107 | ``` 108 | 109 | Which gives us a single row result: 110 | 111 | ```tsx 112 | [{ id: 3, name: "Deno", description: "The fastest dinosaur that ever lived." }]; 113 | ``` 114 | 115 | You can find out more about working with PlanetScale in their 116 | [docs](https://planetscale.com/docs). 117 | -------------------------------------------------------------------------------- /with-react/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /with-tanstack/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /with-mongoose/README.md: -------------------------------------------------------------------------------- 1 | # How to use Mongoose with Deno 2 | 3 | [Mongoose](https://mongoosejs.com/) is a popular, schema-based library that 4 | models data for [MongoDB](https://www.mongodb.com/). It simplifies writing 5 | MongoDB validation, casting, and other relevant business logic. 6 | 7 | This tutorial will show you how to setup Mongoose and MongoDB with your Deno 8 | project. 9 | 10 | ## Creating a Mongoose Model 11 | 12 | Let's create a simple app that connects to MongoDB, creates a `Dinosaur` model, 13 | and adds and updates a dinosaur to the database. 14 | 15 | First, we'll create the necessary files and directories: 16 | 17 | ``` 18 | $ touch main.ts && mkdir model && touch model/Dinosaur.ts 19 | ``` 20 | 21 | In `/model/Dinosaur.ts`, we'll import `npm:mongoose`, define the [schema], and 22 | export it: 23 | 24 | ```ts 25 | import { model, Schema } from "npm:mongoose@^6.7"; 26 | 27 | // Define schema. 28 | const dinosaurSchema = new Schema({ 29 | name: { type: String, unique: true }, 30 | description: String, 31 | createdAt: { type: Date, default: Date.now }, 32 | updatedAt: { type: Date, default: Date.now }, 33 | }); 34 | 35 | // Validations 36 | dinosaurSchema.path("name").required(true, "Dinosaur name cannot be blank."); 37 | dinosaurSchema.path("description").required( 38 | true, 39 | "Dinosaur description cannot be blank.", 40 | ); 41 | 42 | // Export model. 43 | export default model("Dinosaur", dinosaurSchema); 44 | ``` 45 | 46 | ## Connecting to MongoDB 47 | 48 | Now, in our `main.ts` file, we'll import mongoose and the `Dinosaur` schema, and 49 | connect to MongoDB: 50 | 51 | ```ts 52 | import mongoose from "npm:mongoose@^6.7"; 53 | import Dinosaur from "./model/Dinosaur.ts"; 54 | 55 | await mongoose.connect("mongodb://localhost:27017"); 56 | 57 | // Check to see connection status. 58 | console.log(mongoose.connection.readyState); 59 | ``` 60 | 61 | Because Deno supports top-level `await`, we're able to simply 62 | `await mongoose.connect()`. 63 | 64 | Running this, we should expect a log of `1`: 65 | 66 | ``` 67 | $ deno run --allow-read --allow-sys --allow-env --allow-net main.ts 68 | 1 69 | ``` 70 | 71 | It worked! 72 | 73 | ## Manipulating Data 74 | 75 | Let's add an instance [method](https://mongoosejs.com/docs/guide.html#methods) 76 | to our `Dinosaur` schema in `/model/Dinosaur.ts`: 77 | 78 | ```ts 79 | // ./model/Dinosaur.ts 80 | 81 | // Methods. 82 | dinosaurSchema.methods = { 83 | // Update description. 84 | updateDescription: async function (description: string) { 85 | this.description = description; 86 | return await this.save(); 87 | }, 88 | }; 89 | 90 | // ... 91 | ``` 92 | 93 | This instance method, `updateDescription`, will allow you to update a record's 94 | description. 95 | 96 | Back in `main.ts`, let's start adding and manipulating data in MongoDB. 97 | 98 | ```ts 99 | // main.ts 100 | 101 | // Create a new Dinosaur. 102 | const deno = new Dinosaur({ 103 | name: "Deno", 104 | description: "The fastest dinosaur ever lived.", 105 | }); 106 | 107 | // // Insert deno. 108 | await deno.save(); 109 | 110 | // Find Deno by name. 111 | const denoFromMongoDb = await Dinosaur.findOne({ name: "Deno" }); 112 | console.log( 113 | `Finding Deno in MongoDB -- \n ${denoFromMongoDb.name}: ${denoFromMongoDb.description}`, 114 | ); 115 | 116 | // Update description for Deno and save it. 117 | await denoFromMongoDb.updateDescription( 118 | "The fastest and most secure dinosaur ever lived.", 119 | ); 120 | 121 | // Check MongoDB to see Deno's updated description. 122 | const newDenoFromMongoDb = await Dinosaur.findOne({ name: "Deno" }); 123 | console.log( 124 | `Finding Deno (again) -- \n ${newDenoFromMongoDb.name}: ${newDenoFromMongoDb.description}`, 125 | ); 126 | ``` 127 | 128 | Running the code, we get: 129 | 130 | ``` 131 | Finding Deno in MongoDB -- 132 | Deno: The fastest dinosaur ever lived. 133 | Finding Deno (again) -- 134 | Deno: The fastest and most secure dinosaur ever lived. 135 | ``` 136 | 137 | Boom! 138 | 139 | For more info on using Mongoose, please refer to 140 | [their documentation](https://mongoosejs.com/docs/guide.html). 141 | -------------------------------------------------------------------------------- /with-qwik/vite.config.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * This is the base config for vite. 3 | * When building, the adapter config is used which loads this file and extends it. 4 | */ 5 | import { defineConfig, type UserConfig } from "vite"; 6 | import { qwikVite } from "@builder.io/qwik/optimizer"; 7 | import { qwikCity } from "@builder.io/qwik-city/vite"; 8 | import tsconfigPaths from "vite-tsconfig-paths"; 9 | import pkg from "./package.json"; 10 | 11 | type PkgDep = Record; 12 | const { dependencies = {}, devDependencies = {} } = pkg as any as { 13 | dependencies: PkgDep; 14 | devDependencies: PkgDep; 15 | [key: string]: unknown; 16 | }; 17 | errorOnDuplicatesPkgDeps(devDependencies, dependencies); 18 | 19 | /** 20 | * Note that Vite normally starts from `index.html` but the qwikCity plugin makes start at `src/entry.ssr.tsx` instead. 21 | */ 22 | export default defineConfig(({ command, mode }): UserConfig => { 23 | return { 24 | plugins: [qwikCity(), qwikVite(), tsconfigPaths()], 25 | // This tells Vite which dependencies to pre-build in dev mode. 26 | optimizeDeps: { 27 | // Put problematic deps that break bundling here, mostly those with binaries. 28 | // For example ['better-sqlite3'] if you use that in server functions. 29 | exclude: [], 30 | }, 31 | 32 | /** 33 | * This is an advanced setting. It improves the bundling of your server code. To use it, make sure you understand when your consumed packages are dependencies or dev dependencies. (otherwise things will break in production) 34 | */ 35 | // ssr: 36 | // command === "build" && mode === "production" 37 | // ? { 38 | // // All dev dependencies should be bundled in the server build 39 | // noExternal: Object.keys(devDependencies), 40 | // // Anything marked as a dependency will not be bundled 41 | // // These should only be production binary deps (including deps of deps), CLI deps, and their module graph 42 | // // If a dep-of-dep needs to be external, add it here 43 | // // For example, if something uses `bcrypt` but you don't have it as a dep, you can write 44 | // // external: [...Object.keys(dependencies), 'bcrypt'] 45 | // external: Object.keys(dependencies), 46 | // } 47 | // : undefined, 48 | 49 | server: { 50 | headers: { 51 | // Don't cache the server response in dev mode 52 | "Cache-Control": "public, max-age=0", 53 | }, 54 | }, 55 | preview: { 56 | headers: { 57 | // Do cache the server response in preview (non-adapter production build) 58 | "Cache-Control": "public, max-age=600", 59 | }, 60 | }, 61 | }; 62 | }); 63 | 64 | // *** utils *** 65 | 66 | /** 67 | * Function to identify duplicate dependencies and throw an error 68 | * @param {Object} devDependencies - List of development dependencies 69 | * @param {Object} dependencies - List of production dependencies 70 | */ 71 | function errorOnDuplicatesPkgDeps( 72 | devDependencies: PkgDep, 73 | dependencies: PkgDep, 74 | ) { 75 | let msg = ""; 76 | // Create an array 'duplicateDeps' by filtering devDependencies. 77 | // If a dependency also exists in dependencies, it is considered a duplicate. 78 | const duplicateDeps = Object.keys(devDependencies).filter( 79 | (dep) => dependencies[dep], 80 | ); 81 | 82 | // include any known qwik packages 83 | const qwikPkg = Object.keys(dependencies).filter((value) => 84 | /qwik/i.test(value), 85 | ); 86 | 87 | // any errors for missing "qwik-city-plan" 88 | // [PLUGIN_ERROR]: Invalid module "@qwik-city-plan" is not a valid package 89 | msg = `Move qwik packages ${qwikPkg.join(", ")} to devDependencies`; 90 | 91 | if (qwikPkg.length > 0) { 92 | throw new Error(msg); 93 | } 94 | 95 | // Format the error message with the duplicates list. 96 | // The `join` function is used to represent the elements of the 'duplicateDeps' array as a comma-separated string. 97 | msg = ` 98 | Warning: The dependency "${duplicateDeps.join(", ")}" is listed in both "devDependencies" and "dependencies". 99 | Please move the duplicated dependencies to "devDependencies" only and remove it from "dependencies" 100 | `; 101 | 102 | // Throw an error with the constructed message. 103 | if (duplicateDeps.length > 0) { 104 | throw new Error(msg); 105 | } 106 | } 107 | -------------------------------------------------------------------------------- /with-grafana/main.ts: -------------------------------------------------------------------------------- 1 | const port = 8000; 2 | const OPENAI_API_KEY = Deno.env.get("OPENAI_API_KEY"); 3 | 4 | if (!OPENAI_API_KEY) { 5 | console.error("Please set OPENAI_API_KEY in .env file"); 6 | Deno.exit(1); 7 | } 8 | 9 | // HTML content for the chat interface 10 | const htmlContent = ` 11 | 12 | 13 | ChatGPT Interface 14 | 50 | 51 | 52 |
53 |

ChatGPT Interface

54 | 55 | 56 |
57 |
58 | 82 | 83 | `; 84 | 85 | // Use Deno.serve for the HTTP server 86 | Deno.serve({ port }, async (request) => { 87 | const url = new URL(request.url); 88 | const path = url.pathname; 89 | 90 | // Handle root path - serve HTML content 91 | if (path === "/" && request.method === "GET") { 92 | console.log("Serving the chat interface..."); 93 | return new Response(htmlContent, { 94 | headers: { "Content-Type": "text/html" }, 95 | }); 96 | } 97 | 98 | // Handle chat API endpoint 99 | if (path === "/api/chat" && request.method === "POST") { 100 | try { 101 | const { prompt } = await request.json(); 102 | console.log("Prompt:", prompt); 103 | 104 | // Add your hardcoded system prompt here 105 | const systemPrompt = 106 | "You are a helpful AI assistant. Please provide clear and concise responses."; 107 | 108 | console.log("Sending request to OpenAI..."); 109 | const response = await fetch("https://api.openai.com/v1/chat/completions", { 110 | method: "POST", 111 | headers: { 112 | "Authorization": `Bearer ${OPENAI_API_KEY}`, 113 | "Content-Type": "application/json", 114 | }, 115 | body: JSON.stringify({ 116 | model: "gpt-3.5-turbo", 117 | messages: [ 118 | { role: "system", content: systemPrompt }, 119 | { role: "user", content: prompt }, 120 | ], 121 | }), 122 | }); 123 | 124 | console.log("Received response from OpenAI"); 125 | const data = await response.json(); 126 | 127 | console.log(data); 128 | return new Response( 129 | JSON.stringify({ 130 | response: data.choices[0].message.content, 131 | }), 132 | { headers: { "Content-Type": "application/json" } } 133 | ); 134 | } catch (error) { 135 | if (error instanceof Error) { 136 | console.error("Error:", error.message); 137 | } else { 138 | console.error("Unknown error:", error); 139 | } 140 | return new Response( 141 | JSON.stringify({ error: error }), 142 | { 143 | status: 500, 144 | headers: { "Content-Type": "application/json" } 145 | } 146 | ); 147 | } 148 | } 149 | 150 | // Handle 404 for any other routes 151 | return new Response("Not Found", { status: 404 }); 152 | }); 153 | 154 | console.log(`Server is running on http://localhost:${port}`); 155 | -------------------------------------------------------------------------------- /with-honeycomb/main.ts: -------------------------------------------------------------------------------- 1 | const port = 8000; 2 | const OPENAI_API_KEY = Deno.env.get("OPENAI_API_KEY"); 3 | 4 | if (!OPENAI_API_KEY) { 5 | console.error("Please set OPENAI_API_KEY in .env file"); 6 | Deno.exit(1); 7 | } 8 | 9 | // HTML content for the chat interface 10 | const htmlContent = ` 11 | 12 | 13 | ChatGPT Interface 14 | 50 | 51 | 52 |
53 |

ChatGPT Interface

54 | 55 | 56 |
57 |
58 | 82 | 83 | `; 84 | 85 | // Use Deno.serve for the HTTP server 86 | Deno.serve({ port }, async (request) => { 87 | const url = new URL(request.url); 88 | const path = url.pathname; 89 | 90 | // Handle root path - serve HTML content 91 | if (path === "/" && request.method === "GET") { 92 | console.log("Serving the chat interface..."); 93 | return new Response(htmlContent, { 94 | headers: { "Content-Type": "text/html" }, 95 | }); 96 | } 97 | 98 | // Handle chat API endpoint 99 | if (path === "/api/chat" && request.method === "POST") { 100 | try { 101 | const { prompt } = await request.json(); 102 | console.log("Prompt:", prompt); 103 | 104 | // Add your hardcoded system prompt here 105 | const systemPrompt = 106 | "You are a helpful AI assistant. Please provide clear and concise responses."; 107 | 108 | console.log("Sending request to OpenAI..."); 109 | const response = await fetch("https://api.openai.com/v1/chat/completions", { 110 | method: "POST", 111 | headers: { 112 | "Authorization": `Bearer ${OPENAI_API_KEY}`, 113 | "Content-Type": "application/json", 114 | }, 115 | body: JSON.stringify({ 116 | model: "gpt-3.5-turbo", 117 | messages: [ 118 | { role: "system", content: systemPrompt }, 119 | { role: "user", content: prompt }, 120 | ], 121 | }), 122 | }); 123 | 124 | console.log("Received response from OpenAI"); 125 | const data = await response.json(); 126 | 127 | console.log(data); 128 | return new Response( 129 | JSON.stringify({ 130 | response: data.choices[0].message.content, 131 | }), 132 | { headers: { "Content-Type": "application/json" } } 133 | ); 134 | } catch (error) { 135 | if (error instanceof Error) { 136 | console.error("Error:", error.message); 137 | } else { 138 | console.error("Unknown error:", error); 139 | } 140 | return new Response( 141 | JSON.stringify({ error: error }), 142 | { 143 | status: 500, 144 | headers: { "Content-Type": "application/json" } 145 | } 146 | ); 147 | } 148 | } 149 | 150 | // Handle 404 for any other routes 151 | return new Response("Not Found", { status: 404 }); 152 | }); 153 | 154 | console.log(`Server is running on http://localhost:${port}`); 155 | --------------------------------------------------------------------------------