Skip to content

Commit c1fc715

Browse files
aidankmcalisteraidankmcalister
authored
DC-5238 Astro Clerk Example (#8389)
* astro project added * test added * files updated to include .env.example * updated `astro.config.mjs` * removed nextjs terms
1 parent 72e8898 commit c1fc715

File tree

15 files changed

+378
-0
lines changed

15 files changed

+378
-0
lines changed

‎.github/tests/orm/clerk-astro/run.sh‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
#!/bin/bash
2+
3+
set -eu
4+
5+
echo "🔍 Starting test setup..."
6+
7+
echo "📂 Current working directory before REPO_ROOT: $(pwd)"
8+
echo "📁 Listing contents:"
9+
ls -la
10+
11+
REPO_ROOT="$(git rev-parse --show-toplevel)"
12+
echo "📌 Detected repo root: $REPO_ROOT"
13+
14+
cd "$REPO_ROOT/orm/clerk-astro"
15+
echo "📂 Changed directory to: $(pwd)"
16+
17+
echo "📦 Installing test deps..."
18+
npm install
19+
20+
# Go to Node script dir and install its deps
21+
NODE_SCRIPT_DIR="../../.github/get-ppg-dev"
22+
pushd "$NODE_SCRIPT_DIR" > /dev/null
23+
npm install
24+
25+
# Start Prisma Dev server
26+
LOG_FILE="./ppg-dev-url.log"
27+
rm -f "$LOG_FILE"
28+
touch "$LOG_FILE"
29+
30+
echo "🚀 Starting Prisma Dev in background..."
31+
node index.js >"$LOG_FILE" &
32+
NODE_PID=$!
33+
34+
# Wait for DATABASE_URL
35+
echo "🔎 Waiting for Prisma Dev to emit DATABASE_URL..."
36+
MAX_WAIT=60
37+
WAITED=0
38+
until grep -q '^prisma+postgres://' "$LOG_FILE"; do
39+
sleep 1
40+
WAITED=$((WAITED + 1))
41+
if [ "$WAITED" -ge "$MAX_WAIT" ]; then
42+
echo "❌ Timeout waiting for DATABASE_URL"
43+
cat "$LOG_FILE"
44+
kill "$NODE_PID" || true
45+
exit 1
46+
fi
47+
done
48+
49+
DB_URL=$(grep '^prisma+postgres://' "$LOG_FILE" | tail -1)
50+
export DATABASE_URL="$DB_URL"
51+
echo "✅ DATABASE_URL: $DATABASE_URL"
52+
53+
popd > /dev/null
54+
55+
npm install
56+
npx prisma migrate dev --name init
57+
npm run dev &
58+
pid=$!
59+
60+
sleep 15
61+
62+
# check frontend
63+
curl --fail 'http://localhost:3000/'
64+
65+
kill "$pid"
66+
echo "🛑 App stopped (PID $pid)"
67+
kill "$NODE_PID"
68+
wait "$NODE_PID" || true

‎orm/clerk-astro/.env.example‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# Prisma
2+
DATABASE_URL=
3+
4+
# Clerk
5+
PUBLIC_CLERK_PUBLISHABLE_KEY=
6+
CLERK_SECRET_KEY=
7+
CLERK_WEBHOOK_SIGNING_SECRET=

‎orm/clerk-astro/.gitignore‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
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+
26+
/src/generated/prisma

‎orm/clerk-astro/README.md‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
# Clerk + Astro.js + Prisma example
2+
3+
This example shows how to implement **authentication** using [Clerk](https://clerk.com/), [Astro.js](https://astro.build/) and [Prisma](https://www.prisma.io).
4+
5+
## Getting started
6+
7+
### 1. Download example and navigate into the project directory
8+
9+
Download this example:
10+
11+
```
12+
npx try-prisma@latest --template orm/clerk-astro
13+
```
14+
15+
Then, navigate into the project directory:
16+
17+
```
18+
cd clerk-astro
19+
```
20+
21+
<details><summary><strong>Alternative:</strong> Clone the entire repo</summary>
22+
23+
Clone this repository:
24+
25+
```
26+
git clone [email protected]:prisma/prisma-examples.git --depth=1
27+
```
28+
29+
Install npm dependencies:
30+
31+
```
32+
cd prisma-examples/orm/clerk-astro
33+
npm install
34+
```
35+
36+
</details>
37+
38+
Rename the `.env.example` file to `.env`
39+
40+
### 2. Create a Prisma Postgres instance
41+
42+
This example uses a [Prisma Postgres](https://prisma.io/postgres) database by default. To get started with the project, you will need to setup a Prisma Postgres connection string:
43+
44+
1. Set up a new Prisma Postgres instance in the [Prisma Data Platform Console](https://console.prisma.io) and copy the database connection URL.
45+
2. Add your database url to the `.env`
46+
3. Run `npx prisma migrate dev --name init`
47+
48+
That's it, your project is now configured to use Prisma Postgres!
49+
50+
### 3. Set up Clerk
51+
52+
#### 3.1. Create a new Clerk app
53+
54+
Create a new app at [dashboard.clerk.com/apps/new](https://dashboard.clerk.com/apps/new). Provide a name and select whichever sign-in options you would like.
55+
56+
Skip to Step 2 and copy the `PUBLIC_CLERK_PUBLISHABLE_KEY` and the `CLERK_SECRET_KEY`. Paste those into their respective positions in `.env`
57+
58+
#### 3.2. Expose your server via [ngrok](https://ngrok.com)
59+
60+
Install ngrok and expose it your local app:
61+
62+
```
63+
npm install --global ngrok
64+
ngrok http 4321
65+
```
66+
67+
Copy the ngrok `Forwarding URL`. This will be used to set the webhook URL in Clerk.
68+
69+
Navigate to the **_Webhooks_** section of your Clerk application located near the bottom of the **_Configure_** tab under **_Developers_**.
70+
71+
Click **_Add Endpoint_** and paste the ngrok URL into the **_Endpoint URL_** field and add `/api/webhooks/clerk` to the end of the URL. It should look similar to this:
72+
73+
```
74+
https://a60b-99-42-62-240.ngrok-free.app/api/webhooks/clerk
75+
```
76+
77+
Copy the **_Signing Secret_** and add it to your `.env` file:
78+
79+
Add your ngrok url without the `https://` to the allowedHosts array in your `astro.config.mjs` file:
80+
81+
```
82+
import { defineConfig } from 'astro/config';
83+
84+
export default defineConfig({
85+
// ...
86+
server: {
87+
allowedHosts: ['your-ngrok-url'],
88+
},
89+
});
90+
```
91+
92+
### 4. Start the development server
93+
94+
```
95+
npm run dev
96+
```
97+
98+
The server is now running at http://localhost:4321
99+
100+
## Switch to another database
101+
102+
If you want to try this example with another database rather than Prisma Postgres, refer to the [Databases](https://www.prisma.io/docs/orm/overview/databases) section in our documentation.
103+
104+
## Next steps
105+
106+
- Check out the [Prisma docs](https://www.prisma.io/docs)
107+
- [Join our community on Discord](https://pris.ly/discord?utm_source=github&utm_medium=prisma_examples&utm_content=next_steps_section) to share feedback and interact with other users.
108+
- [Subscribe to our YouTube channel](https://pris.ly/youtube?utm_source=github&utm_medium=prisma_examples&utm_content=next_steps_section) for live demos and video tutorials.
109+
- [Follow us on X](https://pris.ly/x?utm_source=github&utm_medium=prisma_examples&utm_content=next_steps_section) for the latest updates.
110+
- Report issues or ask [questions on GitHub](https://pris.ly/github?utm_source=github&utm_medium=prisma_examples&utm_content=next_steps_section).

‎orm/clerk-astro/astro.config.mjs‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { defineConfig } from 'astro/config'
2+
import node from '@astrojs/node'
3+
import clerk from '@clerk/astro'
4+
5+
export default defineConfig({
6+
integrations: [clerk()],
7+
adapter: node({ mode: 'standalone' }),
8+
output: 'server',
9+
server: {
10+
allowedHosts: ['localhost'], // Add your ngrok URL here (without https://)
11+
},
12+
})

‎orm/clerk-astro/package.json‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"name": "prisma-clerk-astro",
3+
"type": "module",
4+
"version": "0.0.1",
5+
"scripts": {
6+
"dev": "astro dev",
7+
"build": "astro build",
8+
"preview": "astro preview",
9+
"astro": "astro"
10+
},
11+
"dependencies": {
12+
"@astrojs/node": "^9.5.1",
13+
"@clerk/astro": "^2.16.2",
14+
"@prisma/adapter-pg": "^7.0.0",
15+
"@prisma/client": "^7.0.0",
16+
"astro": "^5.16.0",
17+
"dotenv": "^17.2.3",
18+
"pg": "^8.16.3"
19+
},
20+
"devDependencies": {
21+
"@types/pg": "^8.15.6",
22+
"prisma": "^7.0.0",
23+
"tsx": "^4.20.6"
24+
}
25+
}

‎orm/clerk-astro/prisma.config.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
// This file was generated by Prisma and assumes you have installed the following:
2+
// npm install --save-dev prisma dotenv
3+
import "dotenv/config";
4+
import { defineConfig, env } from "prisma/config";
5+
6+
export default defineConfig({
7+
schema: "prisma/schema.prisma",
8+
migrations: {
9+
path: "prisma/migrations",
10+
},
11+
datasource: {
12+
url: env("DATABASE_URL"),
13+
},
14+
});

‎orm/clerk-astro/prisma/schema.prisma‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
generator client {
2+
provider = "prisma-client"
3+
output = "../src/generated/prisma"
4+
}
5+
6+
datasource db {
7+
provider = "postgresql"
8+
}
9+
10+
model User {
11+
id Int @id @default(autoincrement())
12+
clerkId String @unique
13+
email String @unique
14+
name String?
15+
}

‎orm/clerk-astro/public/favicon.svg‎

Lines changed: 9 additions & 0 deletions
Loading

‎orm/clerk-astro/src/env.d.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
interface ImportMetaEnv {
2+
readonly DATABASE_URL: string;
3+
readonly CLERK_WEBHOOK_SIGNING_SECRET: string;
4+
readonly CLERK_SECRET_KEY: string;
5+
readonly CLERK_PUBLISHABLE_KEY: string;
6+
}
7+
8+
interface ImportMeta {
9+
readonly env: ImportMetaEnv;
10+
}

0 commit comments

Comments
 (0)