fix: Replace CRA with Vite (#2215)

* fix: Replace CRA with Vite https://github.com/clerk/clerk-docs/pull/518/files * Create ten-nails-whisper.md --------- Co-authored-by: Nikos Douvlis <[email protected]>
clerk · Nov 27, 2023 · daaf770 · daaf770
1 parent dbb6d7d
commit daaf770
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 57 deletions.
diff --git a/.changeset/ten-nails-whisper.md b/.changeset/ten-nails-whisper.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/chrome-extension/README.md b/packages/chrome-extension/README.md
@@ -5,7 +5,7 @@
       <img src="https://images.clerk.com/static/logo-light-mode-400x400.png" height="64">
     </picture>
   </a>
-  <br /> 
+  <br />
 </p>
 
 # @clerk/chrome-extension
@@ -35,7 +35,7 @@ the <a href="https://clerk.com/docs/reference/node/getting-started?utm_source=gi
 
 ## Getting Started
 
-To use this package you should first create a Clerk application and retrieve a `Publishable Key` for you application to be used as environment variables `REACT_APP_CLERK_PUBLISHABLE_KEY`.
+To use this package you should first create a Clerk application and retrieve a `Publishable Key` for you application to be used as environment variables `VITE_CLERK_PUBLISHABLE_KEY`.
 
 ### Prerequisites
 
@@ -60,7 +60,7 @@ function HelloUser() {
   return <p> Hello user</p>;
 }
 
-const publishableKey = process.env.REACT_APP_CLERK_PUBLISHABLE_KEY || '';
+const publishableKey = process.env.VITE_CLERK_PUBLISHABLE_KEY || '';
 
 function ClerkProviderWithRoutes() {
   const navigate = useNavigate();

diff --git a/packages/react/README.md b/packages/react/README.md
@@ -61,14 +61,14 @@ npm run dev
 
 Clerk requires your application to be wrapped in the `<ClerkProvider/>` context.
 
-If using Create React App, set `REACT_APP_CLERK_PUBLISHABLE_KEY` to your Publishable key in your `.env.local` file to make the environment variable accessible on `process.env` and pass it as the `publishableKey` prop.
+If using Vite, set `VITE_CLERK_PUBLISHABLE_KEY` to your Publishable key in your `.env.local` file to make the environment variable accessible on `process.env` and pass it as the `publishableKey` prop.
 
 ```jsx
 import { render } from 'react-dom';
 
 import { ClerkProvider, SignedIn, SignedOut, SignInButton, UserButton } from '@clerk/clerk-react';
 
-const publishableKey = process.env.REACT_APP_CLERK_PUBLISHABLE_KEY;
+const publishableKey = process.env.VITE_CLERK_PUBLISHABLE_KEY;
 
 render(
   <ClerkProvider publishableKey={publishableKey}>

diff --git a/playground/vite-react-ts/.env.example b/playground/vite-react-ts/.env.example
@@ -1 +1 @@
-VITE_REACT_APP_CLERK_PUBLISHABLE_KEY=pk_test_************
+VITE_CLERK_PUBLISHABLE_KEY=pk_test_************
diff --git a/playground/vite-react-ts/src/App.tsx b/playground/vite-react-ts/src/App.tsx
@@ -15,7 +15,7 @@ import {
 } from '@clerk/clerk-react';
 import { BrowserRouter, Route, Routes, useNavigate } from 'react-router-dom';
 
-const clerkPubKey = import.meta.env.VITE_REACT_APP_CLERK_PUBLISHABLE_KEY;
+const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY;
 
 function NavBar() {
   return (
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		VITE_REACT_APP_CLERK_PUBLISHABLE_KEY=pk_test_************
		VITE_CLERK_PUBLISHABLE_KEY=pk_test_************