Merge pull request #956 from stripe-samples/feat/fixed/cra-to-vite

breaking-change[fixed-price][react]: replace build tool from CRA to Vite
stripe-samples · Jan 26, 2024 · 73cd403 · 73cd403
2 parents fe92cc4 + 1ddab07
commit 73cd403
Show file tree

Hide file tree

Showing 12 changed files with 35 additions and 20 deletions.
diff --git a/fixed-price-subscriptions/client/react/README.md b/fixed-price-subscriptions/client/react/README.md
@@ -11,7 +11,7 @@ Elements](https://stripe.com/billing/elements) and
 This sample consists of a `client` in React and a `server` piece available in 7
 common languages.
 
-The client is implemented using `create-react-app` to provide the boilerplate
+The client is implemented using `Vite` to provide the boilerplate
 for React. Stripe Elements is integrated using
 [`react-stripe-js`](https://github.com/stripe/react-stripe-js), which is the
 official React library provided by Stripe.
@@ -107,4 +107,5 @@ If you have questions, comments, or need help with code, we're here to help:
 
 ## Author(s)
 
+[@hideokamoto-stripe](https://twitter.com/hidetaka_dev)
 [@ctrudeau-stripe](https://twitter.com/trudeaucj)
diff --git a/...scriptions/client/react/public/index.html → ...ice-subscriptions/client/react/index.html b/...scriptions/client/react/public/index.html → ...ice-subscriptions/client/react/index.html
@@ -8,5 +8,6 @@
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <main id="root"></main>
+    <script type="module" src="src/index.jsx"></script>
   </body>
 </html>
diff --git a/fixed-price-subscriptions/client/react/package.json b/fixed-price-subscriptions/client/react/package.json
@@ -5,22 +5,13 @@
   "dependencies": {
     "@stripe/react-stripe-js": "^1.1.2",
     "@stripe/stripe-js": "^1.6.0",
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.3.2",
-    "@testing-library/user-event": "^7.1.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-router-dom": "^5.2.0",
-    "react-scripts": "3.4.1"
+    "react-router-dom": "^5.2.0"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
-  },
-  "eslintConfig": {
-    "extends": "react-app"
+    "start": "vite",
+    "build": "vite build"
   },
   "browserslist": {
     "production": [
@@ -35,8 +26,10 @@
     ]
   },
   "devDependencies": {
+    "@vitejs/plugin-react": "^4.2.1",
     "autoprefixer": "^9.8.0",
-    "postcss-cli": "^7.1.1"
+    "postcss-cli": "^7.1.1",
+    "vite": "^5.0.12"
   },
   "proxy": "http://localhost:4242"
 }
diff --git a/fixed-price-subscriptions/client/react/public/.gitkeep b/fixed-price-subscriptions/client/react/public/.gitkeep
diff --git a/...subscriptions/client/react/src/Account.js → ...ubscriptions/client/react/src/Account.jsx b/...subscriptions/client/react/src/Account.js → ...ubscriptions/client/react/src/Account.jsx
@@ -35,7 +35,7 @@ const Account = () => {
 
   useEffect(() => {
     const fetchData = async () => {
-      const {subscriptions} = await fetch('/subscriptions').then(r => r.json());
+      const {subscriptions} = await fetch('api/subscriptions').then(r => r.json());
 
       setSubscriptions(subscriptions.data);
     }

diff --git a/...ice-subscriptions/client/react/src/App.js → ...ce-subscriptions/client/react/src/App.jsx b/...ice-subscriptions/client/react/src/App.js → ...ce-subscriptions/client/react/src/App.jsx
diff --git a/...-subscriptions/client/react/src/Cancel.js → ...subscriptions/client/react/src/Cancel.jsx b/...-subscriptions/client/react/src/Cancel.js → ...subscriptions/client/react/src/Cancel.jsx
@@ -9,7 +9,7 @@ const Cancel = ({location}) => {
   const handleClick = async (e) => {
     e.preventDefault();
 
-    await fetch('/cancel-subscription', {
+    await fetch('api/cancel-subscription', {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',

diff --git a/...-subscriptions/client/react/src/Prices.js → ...subscriptions/client/react/src/Prices.jsx b/...-subscriptions/client/react/src/Prices.js → ...subscriptions/client/react/src/Prices.jsx
@@ -8,14 +8,14 @@ const Prices = () => {
 
   useEffect(() => {
     const fetchPrices = async () => {
-      const {prices} = await fetch('/config').then(r => r.json());
+      const {prices} = await fetch('api/config').then(r => r.json());
       setPrices(prices);
     };
     fetchPrices();
   }, [])
 
   const createSubscription = async (priceId) => {
-    const {subscriptionId, clientSecret} = await fetch('/create-subscription', {
+    const {subscriptionId, clientSecret} = await fetch('api/create-subscription', {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',

diff --git a/...ubscriptions/client/react/src/Register.js → ...bscriptions/client/react/src/Register.jsx b/...ubscriptions/client/react/src/Register.js → ...bscriptions/client/react/src/Register.jsx
@@ -8,7 +8,7 @@ const Register = (props) => {
 
   const handleSubmit = async (e) => {
     e.preventDefault();
-    const {customer} = await fetch('/create-customer', {
+    const {customer} = await fetch('api/create-customer', {
       method: 'post',
       headers: {
         'Content-Type': 'application/json',

diff --git a/...bscriptions/client/react/src/Subscribe.js → ...scriptions/client/react/src/Subscribe.jsx b/...bscriptions/client/react/src/Subscribe.js → ...scriptions/client/react/src/Subscribe.jsx
diff --git a/...e-subscriptions/client/react/src/index.js → ...-subscriptions/client/react/src/index.jsx b/...e-subscriptions/client/react/src/index.js → ...-subscriptions/client/react/src/index.jsx
@@ -4,7 +4,7 @@ import App from './App';
 import {Elements} from '@stripe/react-stripe-js';
 import {loadStripe} from '@stripe/stripe-js';
 
-fetch('/config')
+fetch('api/config')
   .then((response) => response.json())
   .then((data) => {
     const stripePromise = loadStripe(data.publishableKey);

diff --git a/fixed-price-subscriptions/client/react/vite.config.mjs b/fixed-price-subscriptions/client/react/vite.config.mjs
@@ -0,0 +1,20 @@
+import react from "@vitejs/plugin-react"
+import { defineConfig } from "vite"
+
+export default defineConfig({
+  plugins: [
+    react(),
+  ],
+  server: {
+    proxy: {
+        '/api': {
+          target: 'http://localhost:4242',
+          changeOrigin: true,
+          rewrite: (path) => path.replace(/^\/api/, '')
+        }
+    }
+  },
+  build: {
+    outDir: "build",
+  },
+})