Skip to content

Commit 898558b

Browse files
cabljaccabljac
authored
feat: new web SDK build process and examples (#685)
* refactor: update sdk build process * fix: use peerdep instead * docs: add esm example * test: remove outdated test * chore: improve example dep setup * docs: update example docs * chore: simplify webpack config in example
1 parent 1cd7380 commit 898558b

25 files changed

Lines changed: 573 additions & 52 deletions

‎firestore-stripe-web-sdk/.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,4 @@ firestore-debug.log
22
lib
33
node_modules
44
temp
5+
invertase-firestore-stripe-payments-0.0.8.tgz

‎firestore-stripe-web-sdk/examples/.gitignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
2+
firebase-config.js
3+
invertase-firestore-stripe-payments.tgz

‎firestore-stripe-web-sdk/examples/cjs/README.md‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
# CommonJS Example
2+
3+
This example demonstrates how to use the Firestore Stripe Payments SDK with CommonJS and Webpack.
4+
5+
## Setup
6+
7+
0. Ensure the web SDK is packed, or install a published version >= v0.0.8
8+
9+
1. Copy `src/firebase-config.example.js` to `src/firebase-config.js` and fill in your Firebase configuration:
10+
```bash
11+
cp src/firebase-config.example.js src/firebase-config.js
12+
```
13+
14+
2. Install dependencies:
15+
```bash
16+
npm install
17+
```
18+
19+
3. Run the development server:
20+
```bash
21+
npm run dev
22+
```
23+
24+
4. Open http://localhost:3002 in your browser
25+
26+
## Building for Production
27+
28+
```bash
29+
npm run build
30+
```
31+
32+
This will create optimized files in the `dist` directory.

‎firestore-stripe-web-sdk/examples/cjs/index.html‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Firestore Stripe Payments - CommonJS Example</title>
7+
<style>
8+
body {
9+
margin: 0;
10+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
11+
background-color: #f5f5f5;
12+
}
13+
14+
.container {
15+
max-width: 1200px;
16+
margin: 0 auto;
17+
padding: 2rem;
18+
}
19+
20+
h1 {
21+
color: #333;
22+
text-align: center;
23+
margin-bottom: 2rem;
24+
}
25+
26+
.products-grid {
27+
display: grid;
28+
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
29+
gap: 1.5rem;
30+
}
31+
32+
.product-card {
33+
background: white;
34+
padding: 1.5rem;
35+
border-radius: 8px;
36+
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
37+
transition: transform 0.2s;
38+
}
39+
40+
.product-card:hover {
41+
transform: translateY(-2px);
42+
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
43+
}
44+
45+
.product-card h3 {
46+
margin: 0 0 0.5rem 0;
47+
color: #333;
48+
}
49+
50+
.product-card p {
51+
margin: 0;
52+
color: #666;
53+
}
54+
55+
.active {
56+
display: inline-block;
57+
margin-top: 0.5rem;
58+
padding: 0.25rem 0.5rem;
59+
background: #4CAF50;
60+
color: white;
61+
border-radius: 4px;
62+
font-size: 0.875rem;
63+
}
64+
65+
.no-products {
66+
text-align: center;
67+
color: #666;
68+
grid-column: 1 / -1;
69+
}
70+
71+
.error {
72+
color: #f44336;
73+
}
74+
</style>
75+
</head>
76+
<body>
77+
<div id="app">
78+
<div class="container">
79+
<h1>Loading products...</h1>
80+
</div>
81+
</div>
82+
</body>
83+
</html>

‎firestore-stripe-web-sdk/examples/cjs/package.json‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"name": "firestore-stripe-payments-cjs-example",
3+
"version": "1.0.0",
4+
"description": "CommonJS example for firestore-stripe-payments SDK",
5+
"main": "src/main.js",
6+
"scripts": {
7+
"preinstall": "npm i ./invertase-firestore-stripe-payments.tgz",
8+
"dev": "webpack serve --mode development",
9+
"build": "webpack --mode production"
10+
},
11+
"dependencies": {
12+
"@invertase/firestore-stripe-payments": "file:invertase-firestore-stripe-payments.tgz",
13+
"firebase": "^11.0.0"
14+
},
15+
"devDependencies": {
16+
"dotenv": "^16.0.0",
17+
"html-webpack-plugin": "^5.5.0",
18+
"webpack": "^5.89.0",
19+
"webpack-cli": "^6.0.1",
20+
"webpack-dev-server": "^5.2.1"
21+
}
22+
}

‎firestore-stripe-web-sdk/examples/cjs/src/firebase-config.example.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
exports.firebaseConfig = {
2+
apiKey: "YOUR_API_KEY",
3+
authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
4+
databaseURL: "https://YOUR_PROJECT_ID-default-rtdb.firebaseio.com",
5+
projectId: "YOUR_PROJECT_ID",
6+
storageBucket: "YOUR_PROJECT_ID.appspot.com",
7+
messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
8+
appId: "YOUR_APP_ID",
9+
measurementId: "YOUR_MEASUREMENT_ID",
10+
};

‎firestore-stripe-web-sdk/examples/cjs/src/main.js‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
const { initializeApp } = require("firebase/app");
2+
const {
3+
getProducts,
4+
getStripePayments,
5+
} = require("@invertase/firestore-stripe-payments");
6+
// Firebase config
7+
const { firebaseConfig } = require("./firebase-config.js");
8+
9+
// Initialize Firebase
10+
const app = initializeApp(firebaseConfig);
11+
12+
// Initialize Stripe Payments
13+
const stripePayments = getStripePayments(app, {
14+
customersCollection: "customers",
15+
productsCollection: "products",
16+
});
17+
18+
async function loadProducts() {
19+
try {
20+
const products = await getProducts(stripePayments);
21+
22+
const productsList =
23+
products.length > 0
24+
? products
25+
.map(
26+
(product) => `
27+
<div class="product-card">
28+
<h3>${product.name}</h3>
29+
${product.description ? `<p>${product.description}</p>` : ""}
30+
${product.active ? '<span class="active">Active</span>' : ""}
31+
</div>
32+
`
33+
)
34+
.join("")
35+
: '<p class="no-products">No products found.</p>';
36+
37+
document.getElementById("app").innerHTML = `
38+
<div class="container">
39+
<h1>Stripe Products</h1>
40+
<div class="products-grid">
41+
${productsList}
42+
</div>
43+
</div>
44+
`;
45+
} catch (error) {
46+
console.error("Error loading products:", error);
47+
48+
document.getElementById("app").innerHTML = `
49+
<div class="container">
50+
<h1 class="error">Error</h1>
51+
<p>Failed to load products: ${error.message}</p>
52+
</div>
53+
`;
54+
}
55+
}
56+
57+
// Load products when page is ready
58+
if (document.readyState === "loading") {
59+
document.addEventListener("DOMContentLoaded", loadProducts);
60+
} else {
61+
loadProducts();
62+
}

‎firestore-stripe-web-sdk/examples/cjs/webpack.config.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
const path = require("path");
2+
const webpack = require("webpack");
3+
const dotenv = require("dotenv");
4+
const HtmlWebpackPlugin = require("html-webpack-plugin");
5+
6+
// Load environment variables
7+
dotenv.config();
8+
9+
module.exports = {
10+
mode: "development",
11+
entry: "./src/main.js",
12+
output: {
13+
filename: "bundle.js",
14+
path: path.resolve(__dirname, "dist"),
15+
clean: true,
16+
},
17+
devServer: {
18+
static: "./dist",
19+
port: 3002,
20+
hot: true,
21+
},
22+
plugins: [
23+
new webpack.DefinePlugin({
24+
"process.env": JSON.stringify(process.env),
25+
}),
26+
new HtmlWebpackPlugin({
27+
template: "./index.html",
28+
}),
29+
],
30+
};

‎firestore-stripe-web-sdk/examples/esm/README.md‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
# ESM Example with Vite
2+
3+
This example demonstrates how to use the Firestore Stripe Payments SDK with ES modules and Vite.
4+
5+
## Setup
6+
7+
0. Ensure the web SDK is packed, or install a published version >= v0.0.8
8+
9+
1. Copy `src/firebase-config.example.js` to `src/firebase-config.js` and fill in your Firebase configuration:
10+
```bash
11+
cp src/firebase-config.example.js src/firebase-config.js
12+
```
13+
14+
2. Install dependencies:
15+
```bash
16+
npm install
17+
```
18+
19+
3. Run the development server:
20+
```bash
21+
npm run dev
22+
```
23+
24+
4. Open http://localhost:3001 in your browser (Vite will automatically open it)
25+
26+
## Building for Production
27+
28+
```bash
29+
npm run build
30+
```
31+
32+
This will create optimized files in the `dist` directory.
33+
34+
To preview the production build locally:
35+
36+
```bash
37+
npm run preview
38+
```
39+
40+
## Key Differences from CommonJS Example
41+
42+
1. **Module Type**: Uses `"type": "module"` in package.json
43+
2. **Import Syntax**: Uses ES6 `import` statements instead of `require()`
44+
3. **Export Syntax**: Uses ES6 `export` instead of `module.exports`
45+
4. **Build Tool**: Uses Vite instead of Webpack for faster development
46+
5. **Configuration**: Simpler configuration with Vite's sensible defaults
47+
48+
## Development Tips
49+
50+
- Vite provides instant server start and lightning-fast HMR
51+
- No need for complex Webpack configuration
52+
- Built-in TypeScript support (just rename files to `.ts`)
53+
- Automatic dependency pre-bundling for faster page loads
54+
55+
## Troubleshooting
56+
57+
If you encounter issues:
58+
59+
1. Make sure you're using Node.js 14+ (required for ESM support)
60+
2. Ensure the `.tgz` file is in the correct location before installing
61+
3. Check that your Firebase config is correctly set up
62+
4. Verify that Firebase products are properly configured in your Firebase project

0 commit comments

Comments
 (0)