fix: Replace CRA with Vite (clerk#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 <nikosdouvlis@gmail.com>

Author: SokratisVidros

.changeset/ten-nails-whisper.md

@@ -0,0 +1,2 @@
+---
+---

package-lock.json

@@ -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();

packages/chrome-extension/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}>

packages/react/README.md

@@ -1 +1 @@
-VITE_REACT_APP_CLERK_PUBLISHABLE_KEY=pk_test_************
+VITE_CLERK_PUBLISHABLE_KEY=pk_test_************

playground/vite-react-ts/.env.example

@@ -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 (