Fix website build (#3983)

packages/twenty-docker/Makefile

@@ -48,7 +48,7 @@ prod-postgres-run:
 	@docker run -d -p 5432:5432 -e POSTGRES_USER=postgres -e POSTGRES_PASSWORD=postgres --name twenty-postgres twenty-postgres
 
 prod-website-build:
-	@cd ../.. && docker build -f ./packages/twenty-docker/prod/twenty-website/Dockerfile --build-arg GITHUB_TOKEN=REPLACE_ME --tag twenty-website . && cd -
+	@cd ../.. && docker build -f ./packages/twenty-docker/prod/twenty-website/Dockerfile --tag twenty-website . && cd -
 
 prod-website-run:
 	@docker run -d -p 3000:3000 --name twenty-website twenty-website

packages/twenty-docker/prod/twenty-website/Dockerfile

@@ -1,21 +1,19 @@
 FROM node:18.17.1-alpine as twenty-website-build
 
-ARG GITHUB_TOKEN
-ARG BASE_URL
-
-ENV GITHUB_TOKEN=$GITHUB_TOKEN
-ENV BASE_URL=$BASE_URL
 
 WORKDIR /app
 
 COPY ./package.json .
 COPY ./.eslintrc.js .
+COPY ./.prettierrc .
 COPY ./yarn.lock .
 COPY ./.yarnrc.yml .
 COPY ./.yarn/releases /app/.yarn/releases
-COPY ./packages/twenty-website /app/packages/twenty-website
+COPY ./packages/twenty-website/package.json /app/packages/twenty-website/package.json
 
 RUN yarn
+
+COPY ./packages/twenty-website /app/packages/twenty-website
 RUN yarn nx build twenty-website
 
 FROM node:18.17.1-alpine as twenty-website

packages/twenty-website/.env.example

@@ -1,4 +1,3 @@
-BASE_URL=http://localhost:3000
 GITHUB_TOKEN=your_github_token
 DATABASE_DRIVER=sqlite # or pg
 DATABASE_PG_URL=postgres://website:website@localhost:5432/website # only if using postgres

packages/twenty-website/src/app/components/HeaderDesktop.tsx

@@ -1,19 +1,13 @@
 'use client';
 
+import React from 'react';
 import styled from '@emotion/styled';
-import { IBM_Plex_Mono } from 'next/font/google';
 
 import { ExternalArrow } from '@/app/components/ExternalArrow';
 
 import { GithubIcon } from './Icons';
 import { Logo } from './Logo';
 
-const IBMPlexMono = IBM_Plex_Mono({
-  weight: '500',
-  subsets: ['latin'],
-  display: 'swap',
-});
-
 const Nav = styled.nav`
   display: flex;
   flex-direction: row;
@@ -59,13 +53,6 @@ const LogoContainer = styled.div`
   width: 202px;
 `;
 
-const LogoAddon = styled.div`
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 150%;
-`;
-
 const StyledButton = styled.div`
   display: flex;
   height: 40px;

packages/twenty-website/src/app/developers/contributors/[slug]/page.tsx

@@ -1,3 +1,5 @@
+export const dynamic = 'force-dynamic';
+
 import { Metadata } from 'next';
 
 import { Background } from '@/app/components/oss-friends/Background';

packages/twenty-website/src/app/developers/contributors/api/generate/route.tsx

@@ -1,3 +1,6 @@
+export const dynamic = 'force-dynamic';
+
+import { global } from '@apollo/client/utilities/globals';
 import { graphql } from '@octokit/graphql';
 
 import { insertMany, migrate } from '@/database/database';
@@ -86,7 +89,7 @@ interface RepoData {
 
 const query = graphql.defaults({
   headers: {
-    Authorization: 'bearer ' + process.env.GITHUB_TOKEN,
+    Authorization: 'bearer ' + global.process.env.GITHUB_TOKEN,
   },
 });
 
@@ -196,6 +199,10 @@ async function fetchAssignableUsers(): Promise<Set<string>> {
 }
 
 export async function GET() {
+  if (!global.process.env.GITHUB_TOKEN) {
+    return new Response('No GitHub token provided', { status: 500 });
+  }
+
   await migrate();
 
   // TODO if we ever hit API Rate Limiting
@@ -322,5 +329,7 @@ export async function GET() {
     }
   }
 
-  return new Response('Data synced', { status: 200 });
+  return new Response('Data synced', {
+    status: 200,
+  });
 }

packages/twenty-website/src/app/developers/contributors/page.tsx

@@ -1,3 +1,5 @@
+export const dynamic = 'force-dynamic';
+
 import AvatarGrid from '@/app/components/AvatarGrid';
 import { Header } from '@/app/components/developers/contributors/Header';
 import { Background } from '@/app/components/oss-friends/Background';

packages/twenty-website/src/database/database.ts

@@ -1,7 +1,11 @@
+import { global } from '@apollo/client/utilities/globals';
 import { createClient } from '@libsql/client';
-import { drizzle as sqliteDrizzle } from 'drizzle-orm/libsql';
+import { drizzle as sqliteDrizzle, LibSQLDatabase } from 'drizzle-orm/libsql';
 import { migrate as sqliteMigrate } from 'drizzle-orm/libsql/migrator';
-import { drizzle as pgDrizzle } from 'drizzle-orm/postgres-js';
+import {
+  drizzle as pgDrizzle,
+  PostgresJsDatabase,
+} from 'drizzle-orm/postgres-js';
 import { migrate as postgresMigrate } from 'drizzle-orm/postgres-js/migrator';
 import { SQLiteTableWithColumns } from 'drizzle-orm/sqlite-core';
 import postgres from 'postgres';
@@ -9,36 +13,54 @@ import postgres from 'postgres';
 import 'dotenv/config';
 
 // Todo: Deprecate SQLite once prototyping is complete, this is making things impossible to type properly
-const databaseDriver = process.env.DATABASE_DRIVER;
-
-const sqliteClient = createClient({
-  url: 'file:twenty-website.sqlite',
-});
-const pgClient = postgres(`${process.env.DATABASE_PG_URL}`);
-const sqliteDb = sqliteDrizzle(sqliteClient, { logger: true });
-const pgDb = pgDrizzle(pgClient, { logger: true });
-
+const databaseDriver = global.process.env.DATABASE_DRIVER || 'sqlite';
 const isSqliteDriver = databaseDriver === 'sqlite';
+const isPgDriver = databaseDriver === 'pg';
+
+let sqliteDb: LibSQLDatabase;
+let pgDb: PostgresJsDatabase;
+
+if (isSqliteDriver) {
+  const sqliteClient = createClient({
+    url: 'file:twenty-website.sqlite',
+  });
+  sqliteDb = sqliteDrizzle(sqliteClient, { logger: false });
+}
+
+if (isPgDriver) {
+  const pgClient = postgres(`${global.process.env.DATABASE_PG_URL}`);
+  pgDb = pgDrizzle(pgClient, { logger: false });
+}
 
 const migrate = async () => {
   if (isSqliteDriver) {
     await sqliteMigrate(sqliteDb, {
       migrationsFolder: './src/database/sqlite/migrations',
     });
-  } else {
+    return;
+  }
+  if (isPgDriver) {
     await postgresMigrate(pgDb, {
       migrationsFolder: './src/database/postgres/migrations',
     });
+    return;
   }
+
+  throw new Error('Unsupported database driver');
 };
 
 const findAll = (model: SQLiteTableWithColumns<any>) => {
-  return isSqliteDriver
-    ? sqliteDb.select().from(model).all()
-    : pgDb.select().from(model).execute();
+  if (isSqliteDriver) {
+    return sqliteDb.select().from(model).all();
+  }
+
+  if (isPgDriver) {
+    return pgDb.select().from(model).execute();
+  }
+
+  throw new Error('Unsupported database driver');
 };
 
-// Todo: rework typing
 const insertMany = async (
   model: SQLiteTableWithColumns<any>,
   data: any,
@@ -55,16 +77,19 @@ const insertMany = async (
     }
     return query.execute();
   }
-  const query = pgDb.insert(model).values(data);
-  if (options?.onConflictKey) {
-    return query
-      .onConflictDoNothing({
-        target: [model[options.onConflictKey]],
-      })
-      .execute();
+  if (isPgDriver) {
+    const query = pgDb.insert(model).values(data);
+    if (options?.onConflictKey) {
+      return query
+        .onConflictDoNothing({
+          target: [model[options.onConflictKey]],
+        })
+        .execute();
+    }
+    return query.execute();
   }
 
-  return query.execute();
+  throw new Error('Unsupported database driver');
 };
 
 export { findAll, insertMany, migrate };

packages/twenty-website/src/database/model.ts

@@ -15,7 +15,7 @@ import {
   sqlLiteUsers,
 } from '@/database/sqlite/schema-sqlite';
 
-const databaseDriver = process.env.DATABASE_DRIVER;
+const databaseDriver = global.process.env.DATABASE_DRIVER;
 const isSqliteDriver = databaseDriver === 'sqlite';
 
 export const userModel = isSqliteDriver ? sqlLiteUsers : pgUsers;