Data Connect IDX template (#834)

* idx template

* .

* .

* .

* .

* .

* .

* .

* .

* .

* .

* .

* .

* .

* .

* .

* .

* .

* .

* .

* .

* .

* .

* .

* .

* .

* .

* .

* .

* tmp

* .

* icon

* Update dataconnect/app/vite.config.idx.ts

Co-authored-by: Maneesh Tewani <[email protected]>

* Update dataconnect/app/src/vite.config.idx.ts

Co-authored-by: Maneesh Tewani <[email protected]>

---------

Co-authored-by: Maneesh Tewani <[email protected]>

.gitignore

@@ -8,3 +8,5 @@
 dist/
 **/ui-debug.log
 .next
+/template-test
+.oops

.idx/dev.nix

@@ -0,0 +1,56 @@
+# To learn more about how to use Nix to configure your environment
+# see: https://developers.google.com/idx/guides/customize-idx-env
+{ pkgs, ... }: {
+  # Which nixpkgs channel to use.
+  channel = "stable-23.11"; # or "unstable"
+
+  # Use https://search.nixos.org/packages to find packages
+  packages = [
+    # pkgs.go
+    # pkgs.python311
+    # pkgs.python311Packages.pip
+    # pkgs.nodejs_20
+    # pkgs.nodePackages.nodemon
+  ];
+
+  idx.internal.templates-cli.enable = true;
+  # Sets environment variables in the workspace
+  env = {};
+  idx = {
+    # Search for the extensions you want on https://open-vsx.org/ and use "publisher.id"
+    extensions = [
+      # "vscodevim.vim"
+    ];
+
+    # Enable previews
+    previews = {
+      enable = true;
+      previews = {
+        # web = {
+        #   # Example: run "npm run dev" with PORT set to IDX's defined port for previews,
+        #   # and show it in IDX's web preview panel
+        #   command = ["npm" "run" "dev"];
+        #   manager = "web";
+        #   env = {
+        #     # Environment variables to set for your server
+        #     PORT = "$PORT";
+        #   };
+        # };
+      };
+    };
+
+    # Workspace lifecycle hooks
+    workspace = {
+      # Runs when a workspace is first created
+      onCreate = {
+        # Example: install JS dependencies from NPM
+        # npm-install = "npm install";
+      };
+      # Runs when the workspace is (re)started
+      onStart = {
+        # Example: start a background task to watch and re-build backend code
+        # watch-backend = "npm run watch-backend";
+      };
+    };
+  };
+}

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "IDX.aI.enableInlineCompletion": true,
+  "IDX.aI.enableCodebaseIndexing": true
+}

dataconnect/.idx/dev.nix

@@ -0,0 +1,45 @@
+{ pkgs, ... }: {
+  channel = "stable-23.11";
+  packages = [
+    pkgs.nodejs_20
+  ];
+
+  env = {
+    POSTGRESQL_CONN_STRING = "postgresql://user:mypassword@localhost:5432/dataconnect?sslmode=disable";
+  };
+
+  idx.extensions = [
+    "mtxr.sqltools"
+    "mtxr.sqltools-driver-pg"
+    "GraphQL.vscode-graphql-syntax"
+    "GoogleCloudTools.firebase-dataconnect-vscode"
+  ];
+
+  services.postgres = {
+    extensions = ["pgvector"];
+    enable = true;
+  };
+
+  idx = {
+    workspace = {
+      onCreate = {
+        update-firebase = "npm install -D firebase-tools";
+        postgres = ''
+          psql --dbname=postgres -c "ALTER USER \"user\" PASSWORD 'mypassword';"
+          psql --dbname=postgres -c "CREATE DATABASE dataconnect;"
+          psql --dbname=dataconnect -c "CREATE EXTENSION vector;"
+        '';
+        npm-install = "cd app && npm i && npm i firebase@latest";
+      };
+    };
+    previews = {
+      enable = true;
+      previews = {
+        web = {
+          command = ["npm" "run" "dev" "--prefix" "./app" "--" "--port" "$PORT" "--host" "0.0.0.0"];
+          manager = "web";
+        };
+      };
+    };
+  };
+}

dataconnect/.vscode/settings.json

@@ -0,0 +1,14 @@
+{
+  "sqltools.connections": [
+    {
+      "previewLimit": 50,
+      "server": "localhost",
+      "port": 5432,
+      "driver": "PostgreSQL",
+      "name": "Main",
+      "database": "dataconnect",
+      "username": "user",
+      "password": "mypassword"
+    }
+  ]
+}

dataconnect/app/src/lib/firebase.idx.tsx

@@ -0,0 +1,40 @@
+import { initializeApp, getApps } from "firebase/app";
+import { getAuth } from "firebase/auth";
+import {
+  connectDataConnectEmulator,
+  getDataConnect,
+} from "firebase/data-connect";
+import { connectorConfig } from '@movie/dataconnect';
+import { createContext } from "react";
+
+const firebaseConfig = {
+  apiKey: "API_KEY",
+  authDomain: "PROJECT_ID.firebaseapp.com",
+  projectId: "PROJECT_ID",
+  storageBucket: "PROJECT_ID.appspot.com",
+  messagingSenderId: "SENDER_ID",
+  appId: "APP_ID"
+};
+
+const firebaseApp =
+  getApps().length === 0 ? initializeApp(firebaseConfig) : getApps()[0];
+
+const auth = getAuth(firebaseApp);
+const dataconnect = getDataConnect(firebaseApp, connectorConfig);
+
+if (process.env.NODE_ENV === "development") {
+  connectDataConnectEmulator(
+    dataconnect, 
+    window.location.hostname,
+    undefined,
+    true
+  );
+}
+
+const AuthContext = createContext(auth);
+
+function AuthProvider({ children }: { children: React.ReactNode }) {
+  return <AuthContext.Provider value={auth}>{children}</AuthContext.Provider>;
+}
+
+export { AuthContext, AuthProvider };

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

@@ -0,0 +1,22 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import path from 'path';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, 'src'),
+    },
+  },
+  server: {
+    proxy: {
+      '/v1beta/projects': {
+        target: 'http://127.0.0.1:9399',
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/v1beta\/projects/, '/v1beta/projects'),
+      },
+    },
+  },
+})

dataconnect/app/vite.config.idx.ts

@@ -0,0 +1,22 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import path from 'path';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, 'src'),
+    },
+  },
+  server: {
+    proxy: {
+      '/v1beta/projects': {
+        target: 'http://127.0.0.1:9399',
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/v1beta\/projects/, '/v1beta/projects'),
+      },
+    },
+  },
+})

dataconnect/idx-template.json

@@ -0,0 +1,10 @@
+{
+  "name": "Data Connect",
+  "description": "Build a new web app using Data Connect",
+  "categories": [
+    "Web app",
+    "Databases"
+  ],
+  "icon": "https://www.gstatic.com/monospace/240513/logo_firebase.svg",
+  "publisher": "Google LLC"
+}

dataconnect/idx-template.nix

@@ -0,0 +1,32 @@
+/*
+  idx-template \
+  --output-dir /home/user/quickstart-js/dataconnect \
+  -a '{}' \
+  --workspace-name 'dataconnect' \
+  /home/user/quickstart-js/template-test \
+  --failure-report
+
+*/
+
+{pkgs, ... }: {
+  packages = [];
+  bootstrap = ''
+    mkdir "$out" 
+    mkdir "$out"/.idx
+    mkdir "$out"/app
+    mkdir "$out"/dataconnect
+    mkdir "$out"/.vscode
+
+    cp ${.idx/dev.nix} "$out"/.idx/dev.nix
+    cp -a ${./app}/* "$out"/app/
+    cp -a ${./dataconnect}/* "$out"/dataconnect/
+
+    cp ${./.vscode/settings.json} "$out"/.vscode/settings.json
+    cp ${./firebase.json} "$out"/firebase.json
+    cp ${./README.md} "$out"/README.md
+    cp ${./.gitignore} "$out"/.gitignore
+    chmod -R u+w "$out" 
+    mv "$out"/app/src/lib/firebase.idx.tsx "$out"/app/src/lib/firebase.tsx  
+    mv "$out"/app/vite.config.idx.ts "$out"/app/vite.config.ts 
+  '';
+}