fix r2 not working in self-hosted version (#97)

.env.example

@@ -35,11 +35,13 @@ GOOGLE_CLIENT_SECRET=
 #********* OPTIONAL ENV VARS *********
 
 # Storage: any S3 compatible storage will work, for self hosting can use minio
+# 
 R2_ACCESS_KEY=
 R2_SECRET_KEY=
 R2_BUCKET=
 R2_URL=
-NEXT_PUBLIC_R2_PUBLIC_URL=
+# public url of the storage, https://developers.cloudflare.com/r2/buckets/public-buckets/
+R2_PUBLIC_URL=
 
 # Email
 FROM_EMAIL=

docker/prod/compose.yml

@@ -39,7 +39,7 @@ services:
       - R2_SECRET_KEY=${R2_SECRET_KEY}
       - R2_BUCKET=${R2_BUCKET}
       - R2_URL=${R2_URL}
-      - NEXT_PUBLIC_R2_PUBLIC_URL=${NEXT_PUBLIC_R2_PUBLIC_URL}
+      - R2_PUBLIC_URL=${R2_PUBLIC_URL}
       - EMAIL_SERVER_HOST=${EMAIL_SERVER_HOST}
       - EMAIL_SERVER_PORT=${EMAIL_SERVER_PORT}
       - EMAIL_SERVER_USER=${EMAIL_SERVER_USER}

src/components/AddExpense/AddExpensePage.tsx

@@ -105,9 +105,9 @@ const categories = {
   },
 };
 
-export const AddExpensePage: React.FC<{ isStorageConfigured: boolean }> = ({
-  isStorageConfigured,
-}) => {
+export const AddExpensePage: React.FC<{
+  isStorageConfigured: boolean;
+}> = ({ isStorageConfigured }) => {
   const [date, setDate] = React.useState<Date | undefined>(new Date());
   const [open, setOpen] = React.useState(false);
   const [amtStr, setAmountStr] = React.useState('');

src/components/Expense/ExpensePage.tsx

@@ -19,9 +19,10 @@ type ExpenseDetailsProps = {
     paidByUser: User;
     deletedByUser: User | null;
   };
+  storagePublicUrl?: string;
 };
 
-const ExpenseDetails: React.FC<ExpenseDetailsProps> = ({ user, expense }) => {
+const ExpenseDetails: React.FC<ExpenseDetailsProps> = ({ user, expense, storagePublicUrl }) => {
   const youPaid = expense.paidBy === user.id;
 
   const CategoryIcon = CategoryIcons[expense.category] ?? Banknote;
@@ -59,7 +60,7 @@ const ExpenseDetails: React.FC<ExpenseDetailsProps> = ({ user, expense }) => {
             <AppDrawer
               trigger={
                 <Image
-                  src={`${env.NEXT_PUBLIC_R2_PUBLIC_URL}/${expense.fileKey}`}
+                  src={`${storagePublicUrl}/${expense.fileKey}`}
                   alt="Expense receipt"
                   width={56}
                   height={56}
@@ -76,7 +77,7 @@ const ExpenseDetails: React.FC<ExpenseDetailsProps> = ({ user, expense }) => {
             >
               <div className="mb-8 overflow-scroll">
                 <Image
-                  src={`${env.NEXT_PUBLIC_R2_PUBLIC_URL}/${expense.fileKey}`}
+                  src={`${storagePublicUrl}/${expense.fileKey}`}
                   width={300}
                   height={800}
                   alt="Expense receipt"

src/env.js

@@ -39,17 +39,15 @@ export const env = createEnv({
     EMAIL_SERVER_USER: z.string().optional(),
     EMAIL_SERVER_PASSWORD: z.string().optional(),
     DISCORD_WEBHOOK_URL: z.string().optional(),
+    R2_PUBLIC_URL: z.string().optional(),
   },
 
   /**
    * Specify your client-side environment variables schema here. This way you can ensure the app
    * isn't built with invalid env vars. To expose them to the client, prefix them with
    * `NEXT_PUBLIC_`.
    */
-  client: {
-    NEXT_PUBLIC_R2_PUBLIC_URL: z.string().optional(),
-    NEXT_PUBLIC_BEAM_ID: z.string().optional(),
-  },
+  client: {},
 
   /**
    * You can't destruct `process.env` as a regular object in the Next.js edge runtimes (e.g.
@@ -70,11 +68,10 @@ export const env = createEnv({
     R2_URL: process.env.R2_URL,
     FROM_EMAIL: process.env.FROM_EMAIL,
     FEEDBACK_EMAIL: process.env.FEEDBACK_EMAIL,
-    NEXT_PUBLIC_R2_PUBLIC_URL: process.env.NEXT_PUBLIC_R2_PUBLIC_URL,
+    R2_PUBLIC_URL: process.env.R2_PUBLIC_URL,
     WEB_PUSH_EMAIL: process.env.WEB_PUSH_EMAIL,
     WEB_PUSH_PRIVATE_KEY: process.env.WEB_PUSH_PRIVATE_KEY,
     WEB_PUSH_PUBLIC_KEY: process.env.WEB_PUSH_PUBLIC_KEY,
-    NEXT_PUBLIC_BEAM_ID: process.env.NEXT_PUBLIC_BEAM_ID,
     EMAIL_SERVER_HOST: process.env.EMAIL_SERVER_HOST,
     EMAIL_SERVER_PORT: process.env.EMAIL_SERVER_PORT,
     EMAIL_SERVER_USER: process.env.EMAIL_SERVER_USER,

src/pages/add.tsx

@@ -1,12 +1,9 @@
-import { type GroupUser, type Group, type User } from '@prisma/client';
-import { type GetServerSideProps, type NextPage } from 'next';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
 import React, { useEffect } from 'react';
 import { AddExpensePage } from '~/components/AddExpense/AddExpensePage';
 import MainLayout from '~/components/Layout/MainLayout';
-import { getServerAuthSessionForSSG } from '~/server/auth';
-import { db } from '~/server/db';
+import { env } from '~/env';
 import { isStorageConfigured } from '~/server/storage';
 import { useAddExpenseStore } from '~/store/addStore';
 import { type NextPageWithUser } from '~/types';
@@ -88,7 +85,7 @@ AddPage.auth = true;
 
 export default AddPage;
 
-export async function getStaticProps() {
+export async function getServerSideProps() {
   console.log('isStorageConfigured', isStorageConfigured());
 
   return {

src/pages/balances/[friendId]/expenses/[expenseId].tsx

@@ -7,8 +7,12 @@ import { ChevronLeftIcon, Trash, Trash2 } from 'lucide-react';
 import ExpenseDetails from '~/components/Expense/ExpensePage';
 import { DeleteExpense } from '~/components/Expense/DeleteExpense';
 import { type NextPageWithUser } from '~/types';
+import { env } from '~/env';
 
-const ExpensesPage: NextPageWithUser = ({ user }) => {
+const ExpensesPage: NextPageWithUser<{ storagePublicUrl?: string }> = ({
+  user,
+  storagePublicUrl,
+}) => {
   const router = useRouter();
   const expenseId = router.query.expenseId as string;
   const friendId = parseInt(router.query.friendId as string);
@@ -38,12 +42,26 @@ const ExpensesPage: NextPageWithUser = ({ user }) => {
           />
         }
       >
-        {expenseQuery.data ? <ExpenseDetails user={user} expense={expenseQuery.data} /> : null}
+        {expenseQuery.data ? (
+          <ExpenseDetails
+            user={user}
+            expense={expenseQuery.data}
+            storagePublicUrl={storagePublicUrl}
+          />
+        ) : null}
       </MainLayout>
     </>
   );
 };
 
 ExpensesPage.auth = true;
 
+export async function getServerSideProps() {
+  return {
+    props: {
+      storagePublicUrl: env.R2_PUBLIC_URL,
+    },
+  };
+}
+
 export default ExpensesPage;

src/pages/expenses/[expenseId].tsx

@@ -9,8 +9,12 @@ import { ChevronLeftIcon } from 'lucide-react';
 import ExpenseDetails from '~/components/Expense/ExpensePage';
 import { DeleteExpense } from '~/components/Expense/DeleteExpense';
 import { type NextPageWithUser } from '~/types';
+import { env } from 'process';
 
-const ExpensesPage: NextPageWithUser = ({ user }) => {
+const ExpensesPage: NextPageWithUser<{ storagePublicUrl?: string }> = ({
+  user,
+  storagePublicUrl,
+}) => {
   const router = useRouter();
   const expenseId = router.query.expenseId as string;
 
@@ -33,12 +37,26 @@ const ExpensesPage: NextPageWithUser = ({ user }) => {
         }
         actions={!expenseQuery.data?.deletedBy ? <DeleteExpense expenseId={expenseId} /> : null}
       >
-        {expenseQuery.data ? <ExpenseDetails user={user} expense={expenseQuery.data} /> : null}
+        {expenseQuery.data ? (
+          <ExpenseDetails
+            user={user}
+            expense={expenseQuery.data}
+            storagePublicUrl={storagePublicUrl}
+          />
+        ) : null}
       </MainLayout>
     </>
   );
 };
 
 ExpensesPage.auth = true;
 
+export async function getServerSideProps() {
+  return {
+    props: {
+      storagePublicUrl: env.R2_PUBLIC_URL,
+    },
+  };
+}
+
 export default ExpensesPage;

src/pages/groups/[groupId]/expenses/[expenseId].tsx

@@ -9,8 +9,12 @@ import { ChevronLeftIcon } from 'lucide-react';
 import ExpenseDetails from '~/components/Expense/ExpensePage';
 import { DeleteExpense } from '~/components/Expense/DeleteExpense';
 import { type NextPageWithUser } from '~/types';
+import { env } from 'process';
 
-const ExpensesPage: NextPageWithUser = ({ user }) => {
+const ExpensesPage: NextPageWithUser<{ storagePublicUrl?: string }> = ({
+  user,
+  storagePublicUrl,
+}) => {
   const router = useRouter();
   const expenseId = router.query.expenseId as string;
   const groupId = parseInt(router.query.groupId as string);
@@ -37,12 +41,26 @@ const ExpensesPage: NextPageWithUser = ({ user }) => {
           <DeleteExpense expenseId={expenseId} groupId={expenseQuery.data?.groupId ?? undefined} />
         }
       >
-        {expenseQuery.data ? <ExpenseDetails user={user} expense={expenseQuery.data} /> : null}
+        {expenseQuery.data ? (
+          <ExpenseDetails
+            user={user}
+            expense={expenseQuery.data}
+            storagePublicUrl={storagePublicUrl}
+          />
+        ) : null}
       </MainLayout>
     </>
   );
 };
 
 ExpensesPage.auth = true;
 
+export async function getServerSideProps() {
+  return {
+    props: {
+      storagePublicUrl: env.R2_PUBLIC_URL,
+    },
+  };
+}
+
 export default ExpensesPage;