Skip to content

Commit 7a16f9b

Browse files
maneeshtmaneesht
authored
DataConnect: Made IDX changes cross-template compatible
2 parents 9898286 + 4c21366 commit 7a16f9b

File tree

6 files changed

+98
-57
lines changed

6 files changed

+98
-57
lines changed

‎dataconnect/.idx/dev.nix

Lines changed: 38 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,45 @@
1-
{ pkgs, ... }: {
2-
channel = "stable-23.11";
3-
packages = [
4-
pkgs.nodejs_20
5-
];
6-
7-
env = {
8-
POSTGRESQL_CONN_STRING = "postgresql://user:mypassword@localhost:5432/dataconnect?sslmode=disable";
9-
};
1+
{ pkgs, ... }:
2+
{
3+
channel = "stable-24.05";
4+
packages = [
5+
pkgs.nodejs_20
6+
];
7+
8+
env = {
9+
FIREBASE_DATACONNECT_POSTGRESQL_STRING = "postgresql://user:mypassword@localhost:5432/dataconnect?sslmode=disable";
10+
};
1011

11-
idx.extensions = [
12-
"mtxr.sqltools"
13-
"mtxr.sqltools-driver-pg"
14-
"GraphQL.vscode-graphql-syntax"
15-
"GoogleCloudTools.firebase-dataconnect-vscode"
16-
];
12+
services.postgres = {
13+
extensions = ["pgvector"];
14+
enable = true;
15+
};
1716

18-
services.postgres = {
19-
extensions = ["pgvector"];
20-
enable = true;
21-
};
22-
23-
idx = {
24-
workspace = {
25-
onCreate = {
26-
update-firebase = "npm install -D firebase-tools";
27-
postgres = ''
28-
psql --dbname=postgres -c "ALTER USER \"user\" PASSWORD 'mypassword';"
29-
psql --dbname=postgres -c "CREATE DATABASE dataconnect;"
30-
psql --dbname=dataconnect -c "CREATE EXTENSION vector;"
31-
'';
32-
npm-install = "cd app && npm i && npm i firebase@latest";
17+
idx = {
18+
extensions = [
19+
"mtxr.sqltools"
20+
"mtxr.sqltools-driver-pg"
21+
"GraphQL.vscode-graphql-syntax"
22+
"GoogleCloudTools.firebase-dataconnect-vscode"
23+
];
24+
workspace = {
25+
onCreate = {
26+
update-firebase = "npm install -g firebase-tools";
27+
postgres = ''
28+
psql --dbname=postgres -c "ALTER USER \"user\" PASSWORD 'mypassword';"
29+
psql --dbname=postgres -c "CREATE DATABASE dataconnect;"
30+
psql --dbname=dataconnect -c "CREATE EXTENSION vector;"
31+
'';
32+
npm-install = "cd app && npm i";
33+
};
3334
};
34-
};
35-
previews = {
36-
enable = true;
3735
previews = {
38-
web = {
39-
command = ["npm" "run" "dev" "--prefix" "./app" "--" "--port" "$PORT" "--host" "0.0.0.0"];
40-
manager = "web";
36+
enable = true;
37+
previews = {
38+
web = {
39+
command = ["npm" "run" "dev" "--prefix" "./app" "--" "--port" "$PORT" "--host" "0.0.0.0"];
40+
manager = "web";
41+
};
4142
};
4243
};
4344
};
44-
};
45-
}
45+
}

‎dataconnect/README.md

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
## Introduction
44

5-
This is a sample app for the preview version of Firebase DataConnect. This service is currently in Private Preview at no cost for a limited time. Sign up for the program at [Firebase Data Connect](https://firebase.google.com/products/data-connect). This quickstart will not work if you don't have access to the preview.
5+
This is a sample app for the preview version of Firebase DataConnect. This service is currently in Public Preview at no cost for a limited time.
66

77
## Getting Started with Firebase DataConnect
88

@@ -88,9 +88,8 @@ This repository contains the quickstart to help you explore the functionalities
8888
npm run build
8989
```
9090

91-
5. Set up Firebase Authentication with Google Sign-In. Optionally, allow domains for [Firebase Auth](https://firebase.google.com/docs/auth/web/hosting) in your project console (e.g., `http://127.0.0.1`).
92-
6. Allow domains for Firebase Auth in your [project console](https://console.firebase.google.com/project/_/authentication/settings) (e.g., `http://127.0.0.1`).
93-
7. In `dataconnect/dataconnect.yaml`, ensure that your `instanceId`, `database`, and `serviceId` match your project configuration:
91+
5. Allow domains for Firebase Auth in your [project console](https://console.firebase.google.com/project/_/authentication/settings) (e.g., `http://127.0.0.1`).
92+
6. In `dataconnect/dataconnect.yaml`, ensure that your `instanceId`, `database`, and `serviceId` match your project configuration:
9493

9594
```yaml
9695
specVersion: "v1alpha"
@@ -106,7 +105,7 @@ This repository contains the quickstart to help you explore the functionalities
106105
connectorDirs: ["./movie-connector"]
107106
```
108107

109-
8. Deploy your project:
108+
7. Deploy your project:
110109

111110
```bash
112111
npm install -g firebase-tools
@@ -115,13 +114,13 @@ This repository contains the quickstart to help you explore the functionalities
115114
firebase deploy --only dataconnect,hosting
116115
```
117116

118-
9. To compare schema changes, run:
117+
8. To compare schema changes, run:
119118

120119
```bash
121120
firebase dataconnect:sql:diff
122121
```
123122

124-
10. If the changes are acceptable, apply them with:
123+
9. If the changes are acceptable, apply them with:
125124

126125
```bash
127126
firebase dataconnect:sql:migrate

‎dataconnect/app/src/components/navbar.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useEffect, useState, useContext } from 'react';
2-
import { signInWithPopup, GoogleAuthProvider, signOut, User } from 'firebase/auth';
2+
import { signInWithRedirect, GoogleAuthProvider, signOut, User } from 'firebase/auth';
33
import { AuthContext } from '@/lib/firebase';
44
import { Link } from 'react-router-dom';
55
import { handleAuthStateChange } from '@/lib/MovieService';
@@ -18,7 +18,7 @@ export default function Navbar() {
1818

1919
async function handleSignIn() {
2020
const provider = new GoogleAuthProvider();
21-
await signInWithPopup(auth, provider);
21+
await signInWithRedirect(auth, provider);
2222
}
2323

2424
async function handleSignOut() {

‎dataconnect/app/src/pages/Home.tsx

Lines changed: 26 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,33 @@ const ConditionalRender = ({ condition, preferred, alternate }: { condition: boo
77
)
88

99
const PlaceholderMessage = () => (
10-
<div className="min-h-screen flex items-center justify-center text-center text-4xl text-white">
11-
Run the Firebase Data Connect Extension to get started.
10+
<div className="min-h-screen flex items-center justify-center text-center text-white">
11+
<div className="px-4">
12+
<h1 className="text-4xl">To get Started with Firebase Data Connect:</h1>
13+
<ol className="list-decimal">
14+
{window.location.hostname != "localhost" && (
15+
<li>
16+
Add {window.location.host}
17+
<a
18+
target="_blank"
19+
className="underline text-blue-600 hover:text-blue-800 visited:text-purple-600"
20+
href="https://console.firebase.google.com/project/_/authentication/settings"
21+
>
22+
{" "}
23+
to your list of domains
24+
</a>
25+
</li>
26+
)}
27+
<li>Open app/src/lib/firebase.tsx and replace the firebaseConfig </li>
28+
<li>Open the Firebase Data Connect Extension</li>
29+
<li>Select your project</li>
30+
<li>Click "Start Emulators"</li>
31+
<li>Open dataconnect/moviedata_insert.gql</li>
32+
<li>Click Run (Local)</li>
33+
</ol>
34+
</div>
1235
</div>
13-
)
36+
);
1437

1538
export default function HomePage() {
1639
const [topMovies, setTopMovies] = useState([]);

‎dataconnect/app/vite.config.idx.ts

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,17 @@ import path from 'path';
55
// https://vitejs.dev/config/
66
export default defineConfig({
77
plugins: [react()],
8+
89
resolve: {
910
alias: {
1011
'@': path.resolve(__dirname, 'src'),
1112
},
12-
},
13+
},
1314
server: {
15+
headers: {
16+
"Cross-Origin-Embedder-Policy": "unsafe-none",
17+
"cross-origin-opener-policy": "same-origin-allow-popups"
18+
},
1419
proxy: {
1520
'/v1beta/projects': {
1621
target: 'http://127.0.0.1:9399',

‎dataconnect/dataconnect/moviedata_insert.gql

Lines changed: 20 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,17 @@
1+
# Copyright 2024 Google LLC
2+
#
3+
# Licensed under the Apache License, Version 2.0 (the "License");
4+
# you may not use this file except in compliance with the License.
5+
# You may obtain a copy of the License at
6+
#
7+
# http://www.apache.org/licenses/LICENSE-2.0
8+
#
9+
# Unless required by applicable law or agreed to in writing, software
10+
# distributed under the License is distributed on an "AS IS" BASIS,
11+
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12+
# See the License for the specific language governing permissions and
13+
# limitations under the License.
14+
115
mutation {
216
movie_insertMany(
317
data: [
@@ -24,7 +38,7 @@ mutation {
2438
{
2539
id: "550e8400-e29b-41d4-a716-446655440002"
2640
title: "Celestial Harmony"
27-
imageUrl: "https://firebasestorage.googleapis.com/v0/b/fdc-web-quickstart.appspot.com/o/movie%2Fcelestial_harmony.jpeg?alt=media&token=3edf1cf9-c2f5-4c75-9819-36ff6a734c9a"
41+
imageUrl: "https://firebasestorage.googleapis.com/v0/b/fdc-web-quickstart.appspot.com/o/movie%2Fcelestial_harmony.jpeg?alt=media&token=f5fe1845-3fac-4f46-8511-f35f928b6d1d"
2842
releaseYear: 2024
2943
genre: "romance"
3044
rating: 7.5
@@ -44,7 +58,7 @@ mutation {
4458
{
4559
id: "550e8400-e29b-41d4-a716-446655440004"
4660
title: "The Forgotten Island"
47-
imageUrl: "https://firebasestorage.googleapis.com/v0/b/fdc-web-quickstart.appspot.com/o/movie%2Fforgotten_island.jpeg?alt=media&token=bc2b16e1-caed-4649-952c-73b6113f205c"
61+
imageUrl: "https://firebasestorage.googleapis.com/v0/b/fdc-web-quickstart.appspot.com/o/movie%2Fforgotten_island.jpeg?alt=media&token=a6b2d761-2018-48c3-91a1-632d199440d4"
4862
releaseYear: 2025
4963
genre: "adventure"
5064
rating: 7.6
@@ -114,7 +128,7 @@ mutation {
114128
{
115129
id: "550e8400-e29b-41d4-a716-446655440011"
116130
title: "Beyond the Horizon"
117-
imageUrl: "https://firebasestorage.googleapis.com/v0/b/fdc-web-quickstart.appspot.com/o/movie%2Fbeyond_horizon.jpeg?alt=media&token=31493973-0692-4e6e-8b88-afb1aaea17ee"
131+
imageUrl: "https://firebasestorage.googleapis.com/v0/b/fdc-web-quickstart.appspot.com/o/movie%2Fbeyond_horizon.jpeg?alt=media&token=9c054b8d-1a63-48f6-b161-fb28e3d15e55"
118132
releaseYear: 2026
119133
genre: "sci-fi"
120134
rating: 8.5
@@ -144,7 +158,7 @@ mutation {
144158
{
145159
id: "550e8400-e29b-41d4-a716-446655440014"
146160
title: "Moonlit Crusade"
147-
imageUrl: "https://firebasestorage.googleapis.com/v0/b/fdc-web-quickstart.appspot.com/o/movie%2Fmoonlit_crusade.jpeg?alt=media&token=b13241f5-d7d0-4370-b651-07847ad99dc2"
161+
imageUrl: "https://firebasestorage.googleapis.com/v0/b/fdc-web-quickstart.appspot.com/o/movie%2Fmoonlit_crusade.jpeg?alt=media&token=1e2d46e2-6b76-4e20-b656-4b005b37d14b"
148162
releaseYear: 2025
149163
genre: "fantasy"
150164
rating: 8.3
@@ -184,7 +198,7 @@ mutation {
184198
{
185199
id: "550e8400-e29b-41d4-a716-446655440018"
186200
title: "Parallel Justice"
187-
imageUrl: "https://firebasestorage.googleapis.com/v0/b/fdc-web-quickstart.appspot.com/o/movie%2Fparalel_justice.jpeg?alt=media&token=4544b5e2-7a1d-46ca-a97f-eb6a490d4288"
201+
imageUrl: "https://firebasestorage.googleapis.com/v0/b/fdc-web-quickstart.appspot.com/o/movie%2Fparallel_justice.jpeg?alt=media&token=f975524a-6edf-4d3b-99e1-c99e62a50518"
188202
releaseYear: 2024
189203
genre: "crime"
190204
rating: 8.1
@@ -194,7 +208,7 @@ mutation {
194208
{
195209
id: "550e8400-e29b-41d4-a716-446655440019"
196210
title: "Veil of Illusion"
197-
imageUrl: "https://firebasestorage.googleapis.com/v0/b/fdc-web-quickstart.appspot.com/o/movie%2Fveil_illusion.jpeg?alt=media&token=7bf09a3c-c531-478a-9d02-5d99fca9393b"
211+
imageUrl: "https://firebasestorage.googleapis.com/v0/b/fdc-web-quickstart.appspot.com/o/movie%2Fveil_illusion.jpeg?alt=media&token=baa02cce-efe8-4c9f-bd9f-65233c6e1ca8"
198212
releaseYear: 2022
199213
genre: "mystery"
200214
rating: 7.8

0 commit comments

Comments
 (0)