From a9e77c3ef3f02660942fdd4e2b1675e9d5e43cd8 Mon Sep 17 00:00:00 2001 From: Abdullahi Mohamed <126521894+WaryaWayne@users.noreply.github.com> Date: Sun, 12 Oct 2025 20:30:29 -0400 Subject: [PATCH 01/10] (feat) project wide drizzle config This sets the drizzle instance for the project. --- .../add-ons/drizzle/assets/drizzle.config.ts.ejs | 13 +++++++++++++ 1 file changed, 13 insertions(+) create mode 100644 frameworks/react-cra/add-ons/drizzle/assets/drizzle.config.ts.ejs diff --git a/frameworks/react-cra/add-ons/drizzle/assets/drizzle.config.ts.ejs b/frameworks/react-cra/add-ons/drizzle/assets/drizzle.config.ts.ejs new file mode 100644 index 00000000..d9b9a7eb --- /dev/null +++ b/frameworks/react-cra/add-ons/drizzle/assets/drizzle.config.ts.ejs @@ -0,0 +1,13 @@ +import { config } from "dotenv"; +import { defineConfig } from 'drizzle-kit'; + +config(); + +export default defineConfig({ + out: "./drizzle", + schema: "./src/db/schema.ts", + dialect: '<%= addOnOption.drizzle.database %>', + dbCredentials: { + url: process.env.DATABASE_URL, + }, +}); From 7908428bbb67b58d31332543484bf482eb1ef6c8 Mon Sep 17 00:00:00 2001 From: Abdullahi Mohamed <126521894+WaryaWayne@users.noreply.github.com> Date: Sun, 12 Oct 2025 20:31:22 -0400 Subject: [PATCH 02/10] small + regular drizzle svg's added the drizzle svg's for demo. --- frameworks/react-cra/add-ons/drizzle/assets/public/drizzle.svg | 1 + frameworks/react-cra/add-ons/drizzle/small-logo.svg | 1 + 2 files changed, 2 insertions(+) create mode 100644 frameworks/react-cra/add-ons/drizzle/assets/public/drizzle.svg create mode 100644 frameworks/react-cra/add-ons/drizzle/small-logo.svg diff --git a/frameworks/react-cra/add-ons/drizzle/assets/public/drizzle.svg b/frameworks/react-cra/add-ons/drizzle/assets/public/drizzle.svg new file mode 100644 index 00000000..cb0bb3a3 --- /dev/null +++ b/frameworks/react-cra/add-ons/drizzle/assets/public/drizzle.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frameworks/react-cra/add-ons/drizzle/small-logo.svg b/frameworks/react-cra/add-ons/drizzle/small-logo.svg new file mode 100644 index 00000000..1d7ced15 --- /dev/null +++ b/frameworks/react-cra/add-ons/drizzle/small-logo.svg @@ -0,0 +1 @@ + \ No newline at end of file From a25f7ec9704a895722e793b4dbbdb9a3c2cec6b0 Mon Sep 17 00:00:00 2001 From: Abdullahi Mohamed <126521894+WaryaWayne@users.noreply.github.com> Date: Sun, 12 Oct 2025 20:32:09 -0400 Subject: [PATCH 03/10] inserts db url to the .env file add's example db url --- .../add-ons/drizzle/assets/_dot_env.local.append.ejs | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 frameworks/react-cra/add-ons/drizzle/assets/_dot_env.local.append.ejs diff --git a/frameworks/react-cra/add-ons/drizzle/assets/_dot_env.local.append.ejs b/frameworks/react-cra/add-ons/drizzle/assets/_dot_env.local.append.ejs new file mode 100644 index 00000000..2a31bf9b --- /dev/null +++ b/frameworks/react-cra/add-ons/drizzle/assets/_dot_env.local.append.ejs @@ -0,0 +1,7 @@ +<% if (addOnOption.drizzle.database === 'postgresql') { %> +# Database URL for PostgreSQL +DATABASE_URL="postgresql://username:password@localhost:5432/mydb"<% } else if (addOnOption.drizzle.database === 'mysql') { %> +# Database URL for MySQL +DATABASE_URL="mysql://username:password@localhost:3306/mydb"<% } else if (addOnOption.drizzle.database === 'sqlite') { %> +# Database URL for SQLite +DATABASE_URL="file:./dev.db"<% } %> \ No newline at end of file From 86998343fae95b6e5376e07cabfbbaaca134907f Mon Sep 17 00:00:00 2001 From: Abdullahi Mohamed <126521894+WaryaWayne@users.noreply.github.com> Date: Sun, 12 Oct 2025 20:33:29 -0400 Subject: [PATCH 04/10] add's the db + driver chosen by user they can choose, postgres, mysql and sqlite. Each has its own dependencies. --- .../add-ons/drizzle/package.json.ejs | 24 +++++++++++++++++++ 1 file changed, 24 insertions(+) create mode 100644 frameworks/react-cra/add-ons/drizzle/package.json.ejs diff --git a/frameworks/react-cra/add-ons/drizzle/package.json.ejs b/frameworks/react-cra/add-ons/drizzle/package.json.ejs new file mode 100644 index 00000000..1caeeabd --- /dev/null +++ b/frameworks/react-cra/add-ons/drizzle/package.json.ejs @@ -0,0 +1,24 @@ +{ + "dependencies": { + "drizzle-orm": "^0.39.0", + "drizzle-kit": "^0.30.0"<% if (addOnOption.drizzle.database === 'postgresql') { %>, + "pg": "^8.11.0"<% } %><% if (addOnOption.drizzle.database === 'mysql') { %>, + "mysql2": "^3.6.0"<% } %><% if (addOnOption.drizzle.database === 'sqlite') { %>, + "better-sqlite3": "^9.4.0"<% } %> + }, + "devDependencies": { + "dotenv": "^16.0.0", + "tsx": "^4.0.0", + <% if (addOnOption.drizzle.database === 'postgresql') { %> + "@types/pg": "^8.10.0"<% } %><% if (addOnOption.drizzle.database === 'mysql') { %> + "@types/mysql2": "^3.6.0"<% } %><% if (addOnOption.drizzle.database === 'sqlite') { %> + "@types/better-sqlite3": "^7.6.0"<% } %> + }, + "scripts": { + "db:generate": "drizzle-kit generate", + "db:migrate": "drizzle-kit migrate", + "db:push": "drizzle-kit push", + "db:pull": "drizzle-kit pull", + "db:studio": "drizzle-kit studio" + } +} From 08721da285e065c4c19630ec67619b393889f2a2 Mon Sep 17 00:00:00 2001 From: Abdullahi Mohamed <126521894+WaryaWayne@users.noreply.github.com> Date: Sun, 12 Oct 2025 20:34:23 -0400 Subject: [PATCH 05/10] sample to do schema uses the user's chosen db and it's imports to create a todo db. --- .../drizzle/assets/src/db/schema.ts.ejs | 32 +++++++++++++++++++ 1 file changed, 32 insertions(+) create mode 100644 frameworks/react-cra/add-ons/drizzle/assets/src/db/schema.ts.ejs diff --git a/frameworks/react-cra/add-ons/drizzle/assets/src/db/schema.ts.ejs b/frameworks/react-cra/add-ons/drizzle/assets/src/db/schema.ts.ejs new file mode 100644 index 00000000..3159477a --- /dev/null +++ b/frameworks/react-cra/add-ons/drizzle/assets/src/db/schema.ts.ejs @@ -0,0 +1,32 @@ +<% if (addOnOption.drizzle.database === 'postgresql') { %> +import { pgTable, serial, text, timestamp } from +'drizzle-orm/pg-core'; + +export const todos = pgTable('todos', { + id: serial('id').primaryKey(), + title: text('title').notNull(), + createdAt: timestamp('created_at').defaultNow(), +}); +<% } else if (addOnOption.drizzle.database === 'mysql') { +%> +import { mysqlTable, int, text, timestamp } from +'drizzle-orm/mysql-core'; + +export const todos = mysqlTable('todos', { + id: int('id').primaryKey().autoincrement(), + title: text('title').notNull(), + createdAt: timestamp('created_at', { mode: 'date' }).defaultNow(), +}); +<% } else if (addOnOption.drizzle.database === 'sqlite') { +%> +import { sqliteTable, integer, text } from +'drizzle-orm/sqlite-core'; +import { sql } from 'drizzle-orm'; + +export const todos = sqliteTable('todos', { + id: integer('id', { mode: 'number' }).primaryKey({ +autoIncrement: true }), + title: text('title').notNull(), + createdAt: integer('created_at', { mode: 'timestamp' }).default(sql`(unixepoch())`), +}); +<% } %> \ No newline at end of file From 3a7e66b312a5f2c766eafd1fe764b51494d60701 Mon Sep 17 00:00:00 2001 From: Abdullahi Mohamed <126521894+WaryaWayne@users.noreply.github.com> Date: Sun, 12 Oct 2025 20:35:40 -0400 Subject: [PATCH 06/10] initialize db instance this creates a db instance to be used for queries throughout the project. It uses the user's chosen driver to set it up. --- .../drizzle/assets/src/db/index.ts.ejs | 27 +++++++++++++++++++ 1 file changed, 27 insertions(+) create mode 100644 frameworks/react-cra/add-ons/drizzle/assets/src/db/index.ts.ejs diff --git a/frameworks/react-cra/add-ons/drizzle/assets/src/db/index.ts.ejs b/frameworks/react-cra/add-ons/drizzle/assets/src/db/index.ts.ejs new file mode 100644 index 00000000..d9d52de7 --- /dev/null +++ b/frameworks/react-cra/add-ons/drizzle/assets/src/db/index.ts.ejs @@ -0,0 +1,27 @@ +import { config } from 'dotenv' +<% if (addOnOption.drizzle.database === 'postgresql') { %> +import { drizzle } from 'drizzle-orm/node-postgres'; +import { Pool } from 'pg'; +<% } else if (addOnOption.drizzle.database === 'mysql') {%> +import { drizzle } from 'drizzle-orm/mysql2'; +import mysql from 'mysql2/promise'; +<% } else if (addOnOption.drizzle.database === 'sqlite') {%> +import { drizzle } from 'drizzle-orm/better-sqlite3'; +import Database from 'better-sqlite3'; +<% } %> +import * as schema from './schema.ts' + +config() + +<% if (addOnOption.drizzle.database === 'sqlite') { %> +const sqlite = new Database(process.env.DATABASE_URL!); +export const db = drizzle(sqlite, { schema }); +<% } else if (addOnOption.drizzle.database === 'postgresql') { %> +const pool = new Pool({ + connectionString: process.env.DATABASE_URL!, +}); +export const db = drizzle(pool, { schema }); +<% } else if (addOnOption.drizzle.database === 'mysql') { %> +const connection = await mysql.createConnection(process.env.DATABASE_URL!); +export const db = drizzle(connection, { schema }); +<% } %> From c75d966bf7a49a3e50a85d91dacbcd1f6c3f0425 Mon Sep 17 00:00:00 2001 From: Abdullahi Mohamed <126521894+WaryaWayne@users.noreply.github.com> Date: Sun, 12 Oct 2025 20:37:28 -0400 Subject: [PATCH 07/10] create info file added info file for drizzle db. let's user choose their db and driver. --- .../react-cra/add-ons/drizzle/info.json | 32 +++++++++++++++++++ 1 file changed, 32 insertions(+) create mode 100644 frameworks/react-cra/add-ons/drizzle/info.json diff --git a/frameworks/react-cra/add-ons/drizzle/info.json b/frameworks/react-cra/add-ons/drizzle/info.json new file mode 100644 index 00000000..b5ea4fc5 --- /dev/null +++ b/frameworks/react-cra/add-ons/drizzle/info.json @@ -0,0 +1,32 @@ +{ + "name": "Drizzle", + "description": "Add Drizzle ORM to your application.", + "phase": "add-on", + "type": "add-on", + "priority": 120, + "link": "https://orm.drizzle.team/", + "modes": ["file-router"], + "dependsOn": ["start"], + "options": { + "database": { + "type": "select", + "label": "Database Provider", + "description": "Choose your database provider", + "default": "postgresql", + "options": [ + { "value": "postgresql", "label": "PostgreSQL" }, + { "value": "sqlite", "label": "SQLite" }, + { "value": "mysql", "label": "MySQL" } + ] + } + }, + "routes": [ + { + "icon": "Database", + "url": "/demo/drizzle", + "name": "Drizzle", + "path": "src/routes/demo/drizzle.tsx", + "jsName": "DemoDrizzle" + } + ] +} From 1fafe2613b58e57086edb42461c36263dee71c2f Mon Sep 17 00:00:00 2001 From: Abdullahi Mohamed <126521894+WaryaWayne@users.noreply.github.com> Date: Sun, 12 Oct 2025 20:40:12 -0400 Subject: [PATCH 08/10] example demo route used drizzle orm options to do the queries and test it out. --- .../assets/src/routes/demo/drizzle.tsx | 186 ++++++++++++++++++ 1 file changed, 186 insertions(+) create mode 100644 frameworks/react-cra/add-ons/drizzle/assets/src/routes/demo/drizzle.tsx diff --git a/frameworks/react-cra/add-ons/drizzle/assets/src/routes/demo/drizzle.tsx b/frameworks/react-cra/add-ons/drizzle/assets/src/routes/demo/drizzle.tsx new file mode 100644 index 00000000..1481f30b --- /dev/null +++ b/frameworks/react-cra/add-ons/drizzle/assets/src/routes/demo/drizzle.tsx @@ -0,0 +1,186 @@ +import { createFileRoute, useRouter } from '@tanstack/react-router' +import { createServerFn } from '@tanstack/react-start' +import { db } from '@/db' +import { desc } from 'drizzle-orm'; +import {todos} from "@/db/schema" + +const getTodos = createServerFn({ + method: 'GET', +}).handler(async () => { + return await db.query.todos.findMany({ + orderBy: [desc(todos.createdAt)] + }) +}) + +const createTodo = createServerFn({ + method: 'POST', +}) + .inputValidator((data: { title: string }) => data) + .handler(async ({ data }) => { + return await db.insert(todos).values({ title: data.title }) + }) + +export const Route = createFileRoute('/demo/drizzle')({ + component: DemoDrizzle, + loader: async () => await getTodos(), +}) + +function DemoDrizzle() { + const router = useRouter() + const todos = Route.useLoaderData() + + const handleSubmit = async (e: React.FormEvent) => { + e.preventDefault() + const formData = new FormData(e.target as HTMLFormElement) + const title = formData.get('title') as string + + if (!title) return + + try { + await createTodo({ data: { title } }) + router.invalidate() + ;(e.target as HTMLFormElement).reset() + } catch (error) { + console.error('Failed to create todo:', error) + } + } + + return ( +
+
+
+
+
+
+ Drizzle Logo +
+
+

+ Drizzle Database Demo +

+
+ +

Todos

+ +
    + {todos.map((todo) => ( +
  • +
    + + {todo.title} + + #{todo.id} +
    +
    • + ))} + {todos.length === 0 && ( +
  • + No todos yet. Create one below! +
    • + )} +
+ +
+ + +
+ +
+

+ Powered by Drizzle ORM +

+

+ Next-generation ORM for Node.js & TypeScript with PostgreSQL +

+
+

Setup Instructions:

+
    +
  1. + Configure your{' '} + + DATABASE_URL + {' '} + in .env.local +
    2. +
  2. + Run:{' '} + + npx drizzle-kit generate + +
    3. +
  3. + Run:{' '} + + npx drizzle-kit migrate + +
    4. +
  4. + Optional:{' '} + + npx drizzle-kit studio + +
    5. +
+
+
+
+
+ ) +} From 1b5b806aee0ead962754f82ed4c3dafabf51938f Mon Sep 17 00:00:00 2001 From: Jack Herrington Date: Mon, 20 Oct 2025 10:50:14 -0700 Subject: [PATCH 09/10] feat: adding Drizzle --- .../react-cra/add-ons/drizzle/assets/public/drizzle.svg | 2 +- .../add-ons/drizzle/assets/src/routes/demo/drizzle.tsx | 9 +++++---- frameworks/react-cra/add-ons/drizzle/info.json | 2 +- 3 files changed, 7 insertions(+), 6 deletions(-) diff --git a/frameworks/react-cra/add-ons/drizzle/assets/public/drizzle.svg b/frameworks/react-cra/add-ons/drizzle/assets/public/drizzle.svg index cb0bb3a3..d9b8730b 100644 --- a/frameworks/react-cra/add-ons/drizzle/assets/public/drizzle.svg +++ b/frameworks/react-cra/add-ons/drizzle/assets/public/drizzle.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/frameworks/react-cra/add-ons/drizzle/assets/src/routes/demo/drizzle.tsx b/frameworks/react-cra/add-ons/drizzle/assets/src/routes/demo/drizzle.tsx index 1481f30b..536cee22 100644 --- a/frameworks/react-cra/add-ons/drizzle/assets/src/routes/demo/drizzle.tsx +++ b/frameworks/react-cra/add-ons/drizzle/assets/src/routes/demo/drizzle.tsx @@ -1,14 +1,14 @@ import { createFileRoute, useRouter } from '@tanstack/react-router' import { createServerFn } from '@tanstack/react-start' import { db } from '@/db' -import { desc } from 'drizzle-orm'; -import {todos} from "@/db/schema" +import { desc } from 'drizzle-orm' +import { todos } from '@/db/schema' const getTodos = createServerFn({ method: 'GET', }).handler(async () => { return await db.query.todos.findMany({ - orderBy: [desc(todos.createdAt)] + orderBy: [desc(todos.createdAt)], }) }) @@ -17,7 +17,8 @@ const createTodo = createServerFn({ }) .inputValidator((data: { title: string }) => data) .handler(async ({ data }) => { - return await db.insert(todos).values({ title: data.title }) + await db.insert(todos).values({ title: data.title }) + return { success: true } }) export const Route = createFileRoute('/demo/drizzle')({ diff --git a/frameworks/react-cra/add-ons/drizzle/info.json b/frameworks/react-cra/add-ons/drizzle/info.json index b5ea4fc5..62e4efe5 100644 --- a/frameworks/react-cra/add-ons/drizzle/info.json +++ b/frameworks/react-cra/add-ons/drizzle/info.json @@ -3,7 +3,7 @@ "description": "Add Drizzle ORM to your application.", "phase": "add-on", "type": "add-on", - "priority": 120, + "priority": 48, "link": "https://orm.drizzle.team/", "modes": ["file-router"], "dependsOn": ["start"], From a6ea6263996d112b7a78724367e447f49b73d7a1 Mon Sep 17 00:00:00 2001 From: Jack Herrington Date: Mon, 20 Oct 2025 10:55:53 -0700 Subject: [PATCH 10/10] fix: version bump --- packages/cta-engine/src/create-app.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/cta-engine/src/create-app.ts b/packages/cta-engine/src/create-app.ts index 6b023be8..8da27f10 100644 --- a/packages/cta-engine/src/create-app.ts +++ b/packages/cta-engine/src/create-app.ts @@ -251,7 +251,7 @@ Use the following commands to start your app: getPackageManagerScriptCommand(options.packageManager, ['dev']), )} -Please read the README.md for information on testing, styling, adding routes, etc.${errorStatement}`, +Please check the README.md for information on testing, styling, adding routes, etc.${errorStatement}`, ) }