Skip to content

Commit 604c6d6

Browse files
emwpjamesdaniels
authored andcommitted
feature: Next.js e-commerce template (#292)
1 parent fae5667 commit 604c6d6

File tree

10 files changed

+565
-1
lines changed

10 files changed

+565
-1
lines changed

starters/nextjs/firebase-ecommerce/.gitignore

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,9 +40,13 @@ vsce-debug.log*
4040
# Firebase
4141
firebase-debug.log*
4242
firebase-debug.*
43+
<<<<<<< HEAD
4344
.firebase
4445
.firebaserc
4546

4647
# dataconnect
4748
dataconnect-generated/
48-
dataconnect/.dataconnect/
49+
dataconnect/.dataconnect/
50+
=======
51+
.firebase
52+
>>>>>>> 5d0afe2 (feature: Next.js e-commerce template (#292))

starters/nextjs/firebase-ecommerce/README.md

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,18 +28,27 @@ The application provides a quick and easy to use shopping experience with featur
2828

2929
1. Create a new Firebase project in the [Firebase Console](https://console.firebase.google.com).
3030
2. Enable **Email/Password Authentication**.
31+
<<<<<<< HEAD
3132
3. Replace the relevant commented-out environment variables in `apphosting.yaml`
3233
with your firebase config.
34+
=======
35+
3. Add Firebase app secrets to `.env.local`.
36+
4. Include Firebase app secrets in **App Hosting**.
37+
>>>>>>> 5d0afe2 (feature: Next.js e-commerce template (#292))
3338
3439
#### Firebase Data Connect
3540

3641
1. Install the **Firebase Data Connect** extension for VS Code.
3742
2. Create a new Data Connect instance and service.
3843
3. Set up billing for the Firebase project.
3944
4. Switch to the Blaze plan.
45+
<<<<<<< HEAD
4046
5. Modify `dataconnect/dataconnect.yaml` to specify `serviceId`, `location`,
4147
`schema.datasource.postgresql.database` and
4248
`schema.datasource.postgressql.cloudSql.instanceId`
49+
=======
50+
5. Define the required schema, queries, and mutations.
51+
>>>>>>> 5d0afe2 (feature: Next.js e-commerce template (#292))
4352
6. Deploy the schema, queries, and mutations to production.
4453

4554
#### Firebase Storage
@@ -50,18 +59,27 @@ The application provides a quick and easy to use shopping experience with featur
5059
#### Firebase App Hosting
5160

5261
1. Connect the Firebase app to your GitHub repository.
62+
<<<<<<< HEAD
5363
2. Create a new backend for the application, but do not deploy yet.
5464
We need to set up environment variables first for the app to work.
65+
=======
66+
2. Create a new backend for the application.
67+
3. Deploy secrets to app hosting using the Firebase CLI.
68+
4. Deploy the application to Firebase Hosting.
69+
>>>>>>> 5d0afe2 (feature: Next.js e-commerce template (#292))
5570
5671
### Stripe Setup
5772

5873
1. Create a new Stripe account.
74+
<<<<<<< HEAD
5975
2. Follow the instructions in apphosting.yaml to create the
6076
public and private keys for your stripe application.
6177
3. Create a webhook that listen to "Events on your account" at
6278
<your domain>/api/stripe/webhook that receives at least
6379
the following events: `payment_intent.succeeded`, `payment_intent.failed`,
6480
`charge.succeeded`, `charge.updated`.
81+
=======
82+
>>>>>>> 5d0afe2 (feature: Next.js e-commerce template (#292))
6583
2. Add API keys (Publishable and Secret) to `.env.local`.
6684
3. Set up a webhook endpoint in the Firebase project.
6785
4. Add the webhook secret to `.env.local`.
@@ -70,6 +88,7 @@ The application provides a quick and easy to use shopping experience with featur
7088

7189
## Environment Variables
7290

91+
<<<<<<< HEAD
7392
The following environment variables must be configured in `apphosting.yaml`
7493
(there are comments for where to find these values)
7594

@@ -82,6 +101,14 @@ Once you have set up Stripe, Data Connect, and configured your App Hosting envir
82101
If you have automatic rollouts enabled, simply push your changes. Otherwise, after pushing, go to the
83102
Firebase console and click "Create Rollout".
84103

104+
=======
105+
The following environment variables must be configured in `.env.local`:
106+
107+
- **Firebase Secrets**: `NEXT_PUBLIC_FIREBASE_API_KEY`, `NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN`, `NEXT_PUBLIC_FIREBASE_PROJECT_ID`, `NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET`, `NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID`, `NEXT_PUBLIC_FIREBASE_APP_ID`.
108+
- **Stripe Secrets**: `NEXT_PUBLIC_STRIPE_PUB_KEY`, `STRIPE_SECRET_KEY`, `STRIPE_WEBHOOK_SECRET`
109+
- **Google/Gemini API Key**: `GOOGLE_API_KEY`
110+
111+
>>>>>>> 5d0afe2 (feature: Next.js e-commerce template (#292))
85112
## Application Features
86113

87114
### Homepage
@@ -161,6 +188,7 @@ To run this project locally, follow these steps:
161188
```
162189
npm install
163190
```
191+
<<<<<<< HEAD
164192
4. Fill in `apphosting.yaml` as guided by the comments.
165193
5. Initialize the firebase emulator suite with `firebase init emulators`. You may
166194
create an `apphosting.emulator.yaml` if you choose to use different configurations
@@ -172,6 +200,20 @@ To run this project locally, follow these steps:
172200
6. Open the application in your browser at:
173201
```
174202
http://localhost:5002
203+
=======
204+
4. Copy the example environment variables:
205+
```
206+
cp .env.example .env.local
207+
```
208+
• Fill in the required values (Firebase config, Stripe keys, Google API key, etc.).
209+
5. Start the development server:
210+
```
211+
npm run dev
212+
```
213+
6. Open the application in your browser at:
214+
```
215+
http://localhost:3000
216+
>>>>>>> 5d0afe2 (feature: Next.js e-commerce template (#292))
175217
```
176218
177219
---

starters/nextjs/firebase-ecommerce/apphosting.yaml

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ runConfig:
44
minInstances: 0
55

66
# Environment variables and secrets.
7+
<<<<<<< HEAD
78
# Grant access to secrets in Cloud Secret Manager.
89
# See https://firebase.google.com/docs/app-hosting/configure#secret-parameters
910
# If you would like to change any keys' values in local development with the emulator
@@ -47,3 +48,30 @@ env:
4748
# value: <YOUR VALUE HERE>
4849
# - variable: STRIPE_WEBHOOK_SECRET
4950
# secret: stripe-webhook-secret
51+
=======
52+
env:
53+
# Grant access to secrets in Cloud Secret Manager.
54+
# See https://firebase.google.com/docs/app-hosting/configure#secret-parameters
55+
- variable: NEXT_PUBLIC_FIREBASE_API_KEY
56+
secret: FIREBASE_API_KEY
57+
- variable: NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN
58+
secret: FIREBASE_AUTH_DOMAIN
59+
- variable: NEXT_PUBLIC_FIREBASE_PROJECT_ID
60+
secret: FIREBASE_PROJECT_ID
61+
- variable: NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET
62+
secret: FIREBASE_STORAGE_BUCKET
63+
- variable: NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID
64+
secret: FIREBASE_MESSAGING_SENDER_ID
65+
- variable: NEXT_PUBLIC_FIREBASE_APP_ID
66+
secret: FIREBASE_APP_ID
67+
- variable: GOOGLE_API_KEY
68+
secret: GOOGLE_API_KEY
69+
- variable: STRIPE_ACCOUNT_ID
70+
secret: STRIPE_ACCOUNT_ID
71+
- variable: STRIPE_SECRET_KEY
72+
secret: STRIPE_SECRET_KEY
73+
- variable: NEXT_PUBLIC_STRIPE_PUB_KEY
74+
secret: STRIPE_PUB_KEY
75+
- variable: STRIPE_WEBHOOK_SECRET
76+
secret: STRIPE_WEBHOOK_SECRET
77+
>>>>>>> 5d0afe2 (feature: Next.js e-commerce template (#292))

starters/nextjs/firebase-ecommerce/dataconnect-generated/js/default-connector/README.md

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,10 @@
1212
- [*SearchProductTitleUsingL2Similarity*](#searchproducttitleusingl2similarity)
1313
- [*SearchProductReviewContentUsingL2Similarity*](#searchproductreviewcontentusingl2similarity)
1414
- [*GetOrdersByCustomerId*](#getordersbycustomerid)
15+
<<<<<<< HEAD
16+
=======
17+
- [*GetCurrentCustomerOrders*](#getcurrentcustomerorders)
18+
>>>>>>> 5d0afe2 (feature: Next.js e-commerce template (#292))
1519
- [*GetOrderById*](#getorderbyid)
1620
- [**Mutations**](#mutations)
1721
- [*UpsertCustomer*](#upsertcustomer)
@@ -987,6 +991,7 @@ Recall that executing the `GetOrdersByCustomerId` query returns a `QueryPromise`
987991
The `data` property is an object of type `GetOrdersByCustomerIdData`, which is defined in [default-connector/index.d.ts](./index.d.ts). It has the following fields:
988992
```javascript
989993
export interface GetOrdersByCustomerIdData {
994+
<<<<<<< HEAD
990995
orders?: {
991996
orders_on_customer: ({
992997
id: UUIDString;
@@ -1017,6 +1022,36 @@ export interface GetOrdersByCustomerIdData {
10171022
} & OrderItem_Key)[];
10181023
} & Order_Key)[];
10191024
};
1025+
=======
1026+
orders: ({
1027+
id: UUIDString;
1028+
customerId: string;
1029+
processedAt: DateString;
1030+
chargeId?: string | null;
1031+
paymentIntentId?: string | null;
1032+
receiptUrl?: string | null;
1033+
subtotalPrice: number;
1034+
totalPrice: number;
1035+
financialStatus: string;
1036+
fulfillmentStatus: string;
1037+
orderItems_on_order: ({
1038+
id: UUIDString;
1039+
quantity: number;
1040+
price: number;
1041+
product: {
1042+
id: UUIDString;
1043+
title: string;
1044+
handle: string;
1045+
productImages_on_product: ({
1046+
url: string;
1047+
altText?: string | null;
1048+
width: number;
1049+
height: number;
1050+
})[];
1051+
} & Product_Key;
1052+
} & OrderItem_Key)[];
1053+
} & Order_Key)[];
1054+
>>>>>>> 5d0afe2 (feature: Next.js e-commerce template (#292))
10201055
}
10211056
```
10221057
### Using `GetOrdersByCustomerId`'s action shortcut function
@@ -1082,6 +1117,113 @@ executeQuery(ref).then((response) => {
10821117
});
10831118
```
10841119

1120+
<<<<<<< HEAD
1121+
=======
1122+
## GetCurrentCustomerOrders
1123+
You can execute the `GetCurrentCustomerOrders` query using the following action shortcut function, or by calling `executeQuery()` after calling the following `QueryRef` function, both of which are defined in [default-connector/index.d.ts](./index.d.ts):
1124+
```javascript
1125+
getCurrentCustomerOrders(): QueryPromise<GetCurrentCustomerOrdersData, undefined>;
1126+
1127+
getCurrentCustomerOrdersRef(): QueryRef<GetCurrentCustomerOrdersData, undefined>;
1128+
```
1129+
You can also pass in a `DataConnect` instance to the action shortcut function or `QueryRef` function.
1130+
```javascript
1131+
getCurrentCustomerOrders(dc: DataConnect): QueryPromise<GetCurrentCustomerOrdersData, undefined>;
1132+
1133+
getCurrentCustomerOrdersRef(dc: DataConnect): QueryRef<GetCurrentCustomerOrdersData, undefined>;
1134+
```
1135+
1136+
### Variables
1137+
The `GetCurrentCustomerOrders` query has no variables.
1138+
### Return Type
1139+
Recall that executing the `GetCurrentCustomerOrders` query returns a `QueryPromise` that resolves to an object with a `data` property.
1140+
1141+
The `data` property is an object of type `GetCurrentCustomerOrdersData`, which is defined in [default-connector/index.d.ts](./index.d.ts). It has the following fields:
1142+
```javascript
1143+
export interface GetCurrentCustomerOrdersData {
1144+
orders?: {
1145+
orders_on_customer: ({
1146+
id: UUIDString;
1147+
processedAt: DateString;
1148+
chargeId?: string | null;
1149+
paymentIntentId?: string | null;
1150+
receiptUrl?: string | null;
1151+
subtotalPrice: number;
1152+
totalPrice: number;
1153+
financialStatus: string;
1154+
fulfillmentStatus: string;
1155+
orderItems_on_order: ({
1156+
id: UUIDString;
1157+
quantity: number;
1158+
price: number;
1159+
product: {
1160+
id: UUIDString;
1161+
title: string;
1162+
handle: string;
1163+
productImages_on_product: ({
1164+
url: string;
1165+
altText?: string | null;
1166+
width: number;
1167+
height: number;
1168+
})[];
1169+
} & Product_Key;
1170+
} & OrderItem_Key)[];
1171+
} & Order_Key)[];
1172+
};
1173+
}
1174+
```
1175+
### Using `GetCurrentCustomerOrders`'s action shortcut function
1176+
1177+
```javascript
1178+
import { getDataConnect, DataConnect } from 'firebase/data-connect';
1179+
import { connectorConfig, getCurrentCustomerOrders } from '@firebasegen/default-connector';
1180+
1181+
1182+
// Call the `getCurrentCustomerOrders()` function to execute the query.
1183+
// You can use the `await` keyword to wait for the promise to resolve.
1184+
const { data } = await getCurrentCustomerOrders();
1185+
1186+
// You can also pass in a `DataConnect` instance to the action shortcut function.
1187+
const dataConnect = getDataConnect(connectorConfig);
1188+
const { data } = await getCurrentCustomerOrders(dataConnect);
1189+
1190+
console.log(data.orders);
1191+
1192+
// Or, you can use the `Promise` API.
1193+
getCurrentCustomerOrders().then((response) => {
1194+
const data = response.data;
1195+
console.log(data.orders);
1196+
});
1197+
```
1198+
1199+
### Using `GetCurrentCustomerOrders`'s `QueryRef` function
1200+
1201+
```javascript
1202+
import { getDataConnect, DataConnect, executeQuery } from 'firebase/data-connect';
1203+
import { connectorConfig, getCurrentCustomerOrdersRef } from '@firebasegen/default-connector';
1204+
1205+
1206+
// Call the `getCurrentCustomerOrdersRef()` function to get a reference to the query.
1207+
const ref = getCurrentCustomerOrdersRef();
1208+
1209+
// You can also pass in a `DataConnect` instance to the `QueryRef` function.
1210+
const dataConnect = getDataConnect(connectorConfig);
1211+
const ref = getCurrentCustomerOrdersRef(dataConnect);
1212+
1213+
// Call `executeQuery()` on the reference to execute the query.
1214+
// You can use the `await` keyword to wait for the promise to resolve.
1215+
const { data } = await executeQuery(ref);
1216+
1217+
console.log(data.orders);
1218+
1219+
// Or, you can use the `Promise` API.
1220+
executeQuery(ref).then((response) => {
1221+
const data = response.data;
1222+
console.log(data.orders);
1223+
});
1224+
```
1225+
1226+
>>>>>>> 5d0afe2 (feature: Next.js e-commerce template (#292))
10851227
## GetOrderById
10861228
You can execute the `GetOrderById` query using the following action shortcut function, or by calling `executeQuery()` after calling the following `QueryRef` function, both of which are defined in [default-connector/index.d.ts](./index.d.ts):
10871229
```javascript

starters/nextjs/firebase-ecommerce/dataconnect-generated/js/default-connector/esm/index.esm.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -156,6 +156,19 @@ export function getOrdersByCustomerId(dcOrVars, vars) {
156156
return executeQuery(getOrdersByCustomerIdRef(dcOrVars, vars));
157157
}
158158

159+
<<<<<<< HEAD
160+
=======
161+
export function getCurrentCustomerOrdersRef(dc) {
162+
const { dc: dcInstance} = validateArgs(connectorConfig, dc, undefined);
163+
dcInstance._useGeneratedSdk();
164+
return queryRef(dcInstance, 'GetCurrentCustomerOrders');
165+
}
166+
167+
export function getCurrentCustomerOrders(dc) {
168+
return executeQuery(getCurrentCustomerOrdersRef(dc));
169+
}
170+
171+
>>>>>>> 5d0afe2 (feature: Next.js e-commerce template (#292))
159172
export function getOrderByIdRef(dcOrVars, vars) {
160173
const { dc: dcInstance, vars: inputVars} = validateArgs(connectorConfig, dcOrVars, vars, true);
161174
dcInstance._useGeneratedSdk();

starters/nextjs/firebase-ecommerce/dataconnect-generated/js/default-connector/index.cjs.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -127,6 +127,17 @@ exports.getOrdersByCustomerIdRef = function getOrdersByCustomerIdRef(dcOrVars, v
127127
exports.getOrdersByCustomerId = function getOrdersByCustomerId(dcOrVars, vars) {
128128
return executeQuery(getOrdersByCustomerIdRef(dcOrVars, vars));
129129
};
130+
<<<<<<< HEAD
131+
=======
132+
exports.getCurrentCustomerOrdersRef = function getCurrentCustomerOrdersRef(dc) {
133+
const { dc: dcInstance} = validateArgs(connectorConfig, dc, undefined);
134+
dcInstance._useGeneratedSdk();
135+
return queryRef(dcInstance, 'GetCurrentCustomerOrders');
136+
}
137+
exports.getCurrentCustomerOrders = function getCurrentCustomerOrders(dc) {
138+
return executeQuery(getCurrentCustomerOrdersRef(dc));
139+
};
140+
>>>>>>> 5d0afe2 (feature: Next.js e-commerce template (#292))
130141
exports.getOrderByIdRef = function getOrderByIdRef(dcOrVars, vars) {
131142
const { dc: dcInstance, vars: inputVars} = validateArgs(connectorConfig, dcOrVars, vars, true);
132143
dcInstance._useGeneratedSdk();

0 commit comments

Comments
 (0)