afiqzudinhadi/ecommerce-template
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: add clerk to vite-template

Browse source
This commit is contained in:
afiqzudinhadi 2025-06-23 14:50:04 +08:00
parent da8aaa1db6
commit 14ef2719c7
4 changed files with 65 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

1
apps/vite-template/package.json
View file

@ -10,6 +10,7 @@
"lint": "eslint src/ --max-warnings 0" "lint": "eslint src/ --max-warnings 0"
}, },
"dependencies": { "dependencies": {
"@clerk/clerk-react": "^5.32.0",
"@repo/ui": "*", "@repo/ui": "*",
"react": "^18.3.1", "react": "^18.3.1",
"react-dom": "^18.3.1" "react-dom": "^18.3.1"

69
apps/vite-template/src/app/index.tsx
View file

@ -10,33 +10,54 @@ import {
CardHeader, CardHeader,
CardTitle, CardTitle,
} from "@repo/ui/components/card"; } from "@repo/ui/components/card";
import {
SignedIn,
SignedOut,
SignInButton,
UserButton,
} from "@clerk/clerk-react";
function App() { function App() {
return ( return (
<div className="container"> <div>
<h1 className="title"> <header className="flex items-center justify-end py-4 px-6 bg-white shadow-sm mb-6">
Admin <br /> <div>
<span>Kitchen Sink</span> <SignedOut>
</h1> <SignInButton mode="modal">
<CounterButton /> <Button variant="outline">Sign In</Button>
<Card className="my-6"> </SignInButton>
<CardHeader> </SignedOut>
<CardTitle>shadcn/ui Card Example</CardTitle> <SignedIn>
</CardHeader> <UserButton afterSignOutUrl="/" />
<CardContent> </SignedIn>
<Button>shadcn/ui Button</Button> </div>
</CardContent> </header>
</Card>
<p className="description"> <div className="container">
Built With{" "} <h1 className="title">
<Link href="https://turborepo.com" newTab> Admin <br />
Turborepo <span>Kitchen Sink</span>
</Link> </h1>
{" & "} <CounterButton />
<Link href="https://vitejs.dev/" newTab> <Card className="my-6">
Vite <CardHeader>
</Link> <CardTitle>shadcn/ui Card Example</CardTitle>
</p> </CardHeader>
<CardContent>
<Button>shadcn/ui Button</Button>
</CardContent>
</Card>
<p className="description">
Built With{" "}
<Link href="https://turborepo.com" newTab>
Turborepo
</Link>
{" & "}
<Link href="https://vitejs.dev/" newTab>
Vite
</Link>
</p>
</div>
</div> </div>
); );
} }

25
apps/vite-template/src/main.tsx
View file

@ -2,15 +2,26 @@ import React from "react";
import { createRoot } from "react-dom/client"; import { createRoot } from "react-dom/client";
import App from "./app"; import App from "./app";
import "./index.css"; import "./index.css";
import { ClerkProvider } from "@clerk/clerk-react";
const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY;
if (!PUBLISHABLE_KEY) {
throw new Error(
"VITE_PUBLISHABLE_KEY is not defined. Please set it in your environment variables."
);
}
const el = document.getElementById("root"); const el = document.getElementById("root");
if (el) { if (el) {
const root = createRoot(el); const root = createRoot(el);
root.render( root.render(
<React.StrictMode> <React.StrictMode>
<App /> <ClerkProvider publishableKey={PUBLISHABLE_KEY} afterSignOutUrl="/">
</React.StrictMode> <App />
); </ClerkProvider>
</React.StrictMode>
);
} else { } else {
throw new Error("Could not find root element"); throw new Error("Could not find root element");
} }

1
package-lock.json generated
View file

@ -276,6 +276,7 @@
"apps/vite-template": { "apps/vite-template": {
"version": "0.0.0", "version": "0.0.0",
"dependencies": { "dependencies": {
"@clerk/clerk-react": "^5.32.0",
"@repo/ui": "*", "@repo/ui": "*",
"react": "^18.3.1", "react": "^18.3.1",
"react-dom": "^18.3.1" "react-dom": "^18.3.1"