Feat(supabase): Improve init script

Author: jonathanarnault

.gitignore

@@ -24,4 +24,5 @@ yarn-error.log*
 supabase/.branches
 supabase/.temp
 
+dist/
 .env

.nvmrc

@@ -0,0 +1 @@
+v20

makefile

@@ -9,18 +9,21 @@ install: package.json ## install dependencies
 start-supabase: ## start supabase locally
 	npx supabase start
 
-start-functions:
-	npx supabase functions serve
-
 start-app: ## start the app locally
 	npm run dev
 
-start: start-supabase start-app start-functions## start the stack locally
+start: start-supabase start-app## start the stack locally
 
 stop-supabase: ## stop local supabase
 	npx supabase stop
 
 stop: stop-supabase ## stop the stack locally
 
 build: ## build the app
-	npm run build
+	npm run build
+
+start-prod: build
+	open http://127.0.0.1:3000 && npx serve -l tcp://127.0.0.1:3000 dist
+
+supabase-remote-init:
+	npm run supabase:remote:init

package-lock.json

@@ -10,6 +10,7 @@
         "@nivo/bar": "^0.87.0",
         "@nivo/core": "^0.87.0",
         "@supabase/supabase-js": "^2.39.3",
+        "@types/jsonexport": "^3.0.5",
         "clsx": "^2.1.0",
         "date-fns": "^3.3.1",
         "dotenv": "^16.4.1",
@@ -23,15 +24,18 @@
         "react-dom": "^18.2.0",
         "react-error-boundary": "^4.0.12",
         "react-router": "^6.21.3",
-        "react-router-dom": "^6.21.3"
+        "react-router-dom": "^6.21.3",
+        "serve": "^14.2.3"
     },
     "devDependencies": {
         "@inquirer/prompts": "^5.3.2",
         "@testing-library/jest-dom": "^6.3.0",
         "@testing-library/react": "^16.0.0",
         "@testing-library/user-event": "^14.5.2",
         "@types/jsonexport": "^3.0.5",
+        "@types/jest": "^29.5.11",
         "@types/lodash": "^4.17.7",
+        "@types/papaparse": "^5.3.14",
         "@types/pg": "^8.11.0",
         "@types/react": "^18.2.48",
         "@types/react-dom": "^18.2.18",
@@ -57,8 +61,8 @@
         "dev": "vite --force",
         "build": "tsc && vite build",
         "preview": "vite preview",
-        "deploy": "node ./scripts/deploy.mjs",
         "lint": "eslint --ext .js,.ts,.tsx \"./src/**/*.{js,ts,tsx}\"",
-        "prettier": "prettier --config ./.prettierrc.mjs --write --list-different \"src/**/*.{js,json,ts,tsx,css,md}\""
+        "prettier": "prettier --config ./.prettierrc.mjs --write --list-different \"src/**/*.{js,json,ts,tsx,css,md}\"",
+        "supabase:remote:init": "node ./scripts/supabase-remote-init.mjs"
     }
 }

package.json

@@ -0,0 +1,189 @@
+import { input } from '@inquirer/prompts';
+import { execa } from 'execa';
+import fs from 'node:fs';
+
+(async () => {
+    await loginToSupabase();
+    const projectName = await input({
+        message: 'Enter the name of the project:',
+        default: 'Atomic CRM',
+    });
+    const databasePassword = await input({
+        message: 'Enter a database password:',
+        default: generatePassword(16),
+    });
+
+    const projectRef = await createProject({ projectName, databasePassword });
+
+    // This also ensures the project is ready
+    const { anonKey } = await fetchApiKeys({
+        projectRef,
+    });
+
+    await linkProject({
+        projectRef,
+        databasePassword,
+    });
+
+    await setupDatabase({
+        databasePassword,
+    });
+
+    await persistSupabaseEnv({
+        projectRef,
+        anonKey,
+    });
+})();
+
+async function loginToSupabase() {
+    await execa('npx', ['supabase', 'login'], { stdio: 'inherit' });
+}
+
+async function createProject({ projectName, databasePassword }) {
+    const { stdout } = await execa(
+        'npx',
+        [
+            'supabase',
+            'projects',
+            'create',
+            '--interactive',
+            '--db-password',
+            databasePassword,
+            projectName,
+        ],
+        {
+            stdin: 'inherit',
+            stdout: ['inherit', 'pipe'],
+        }
+    );
+
+    const projectRef = stdout.match(
+        /https:\/\/supabase.com\/dashboard\/project\/([a-zA-Z0-9_-]*)/
+    )[1];
+
+    return projectRef;
+}
+
+let retry = 0;
+async function linkProject({ projectRef, databasePassword }) {
+    await execa(
+        'npx',
+        [
+            'supabase',
+            'link',
+            '--project-ref',
+            projectRef,
+            '--password',
+            databasePassword,
+        ],
+        {
+            stdout: 'inherit',
+            stderr: 'ignore',
+        }
+    ).catch(() => {
+        retry++;
+        if (retry === 1) {
+            console.log('Waiting for project to be ready...');
+        }
+        return sleep(1000).then(() =>
+            linkProject({ projectRef, databasePassword })
+        );
+    });
+}
+
+async function setupDatabase({ databasePassword }) {
+    await execa(
+        'npx',
+        [
+            'supabase',
+            'db',
+            'push',
+            '--linked',
+            '--include-roles',
+            '--password',
+            databasePassword,
+        ],
+        {
+            stdio: 'inherit',
+        }
+    );
+}
+
+async function fetchApiKeys({ projectRef }) {
+    let anonKey = '';
+
+    try {
+        const { stdout } = await execa(
+            'npx',
+            ['supabase', 'projects', 'api-keys', '--project-ref', projectRef],
+            {
+                stderr: 'ignore',
+            }
+        );
+
+        const keys = stdout
+            .trim()
+            .match(/[ ]+([a-z_]*)[ ]+│[ ]+([a-zA-Z0-9._-]+)/gm);
+
+        for (const key of keys) {
+            const [name, value] = key.split('│').map(s => s.trim());
+            if (name === 'anon') {
+                anonKey = value;
+            }
+        }
+    } catch (e) {}
+
+    if (anonKey === '') {
+        await sleep(1000);
+        return fetchApiKeys({ projectRef });
+    }
+
+    return { anonKey };
+}
+
+async function persistSupabaseEnv({ projectRef, anonKey }) {
+    let envFileStream = fs.createWriteStream(
+        `${process.cwd()}/.env.production.local`,
+        { flags: 'a' }
+    );
+    await execa(
+        'echo',
+        [`VITE_SUPABASE_URL=https://${projectRef}.supabase.co`],
+        {
+            stdout: [envFileStream, 'pipe'],
+        }
+    );
+    envFileStream = fs.createWriteStream(
+        `${process.cwd()}/.env.production.local`,
+        { flags: 'a' }
+    );
+    await execa('echo', [`VITE_SUPABASE_ANON_KEY=${anonKey}`], {
+        stdout: [envFileStream, 'pipe'],
+    });
+}
+
+function generatePassword(length) {
+    const password = crypto
+        // eslint-disable-next-line no-undef
+        .getRandomValues(new BigUint64Array(4))
+        .reduce(
+            (prev, curr, index) =>
+                (!index ? prev : prev.toString(36)) +
+                (index % 2
+                    ? curr.toString(36).toUpperCase()
+                    : curr.toString(36))
+        )
+        .split('')
+        .sort(() => 128 - crypto.getRandomValues(new Uint8Array(1))[0])
+        .join('');
+
+    if (length) {
+        return password.slice(0, length);
+    }
+
+    return password;
+}
+
+function sleep(ms) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+}

scripts/deploy.mjs

@@ -1,6 +1,6 @@
 {
     "compilerOptions": {
-        "target": "ES2015",
+        "target": "ES2019",
         "lib": ["dom", "dom.iterable", "esnext"],
         "allowJs": true,
         "skipLibCheck": true,