Merge pull request #346 from captableinc/fix-base-url

feat: replace next-runtime-env with `t3/env`
captableinc · May 23, 2024 · f06b774 · f06b774
2 parents 8133822 + c25e15a
commit f06b774
Show file tree

Hide file tree

Showing 14 changed files with 492 additions and 415 deletions.
diff --git a/.env.example b/.env.example
@@ -10,8 +10,6 @@
 # should be updated accordingly.
 
 # Next.js environment variables
-NODE_ENV="development"
-NEXT_PUBLIC_NODE_ENV="development"
 NEXT_PUBLIC_BASE_URL="http://localhost:3000"
 
 # Disable telemetry at run time

diff --git a/package.json b/package.json
@@ -83,7 +83,6 @@
     "next": "^14.2.3",
     "next-auth": "^4.24.7",
     "next-nprogress-bar": "^2.3.11",
-    "next-runtime-env": "^3.2.2",
     "nodemailer": "^6.9.8",
     "papaparse": "^5.4.1",
     "pdf-lib": "^1.17.1",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/...authenticated)/(dashboard)/[publicId]/documents/data-rooms/components/data-room-files.tsx b/...authenticated)/(dashboard)/[publicId]/documents/data-rooms/components/data-room-files.tsx
@@ -16,12 +16,12 @@ import { RiShareLine } from "@remixicon/react";
 import { useRouter } from "next/navigation";
 import { useDebounceCallback } from "usehooks-ts";
 
+import { env } from "@/env";
 import {
   RiFolder3Fill as FolderIcon,
   RiAddFill,
   RiUploadCloudLine,
 } from "@remixicon/react";
-import { env } from "next-runtime-env";
 import Link from "next/link";
 import DataRoomUploader from "./data-room-uploader";
 
@@ -41,7 +41,7 @@ const DataRoomFiles = ({
   companyPublicId,
 }: DataRoomFilesProps) => {
   const router = useRouter();
-  const baseUrl = env("NEXT_PUBLIC_BASE_URL");
+  const baseUrl = env.NEXT_PUBLIC_BASE_URL;
   const { mutateAsync: saveDataRoomMutation } = api.dataRoom.save.useMutation();
   const { mutateAsync: shareDataRoomMutation } = api.dataRoom.share.useMutation(
     {

diff --git a/src/app/(authenticated)/(dashboard)/[publicId]/updates/[updatePublicId]/page.tsx b/src/app/(authenticated)/(dashboard)/[publicId]/updates/[updatePublicId]/page.tsx
@@ -1,9 +1,15 @@
 "use server";
 import type { ExtendedRecipientType } from "@/components/common/share-modal";
-import Editor from "@/components/update/editor";
 import { db } from "@/server/db";
 import { api } from "@/trpc/server";
 
+import dynamic from "next/dynamic";
+
+const Editor = dynamic(
+  () => import("../../../../../../components/update/editor"),
+  { ssr: false },
+);
+
 const getUpdate = async (publicId: string) => {
   return await db.update.findFirstOrThrow({
     where: { publicId },
@@ -23,23 +29,22 @@ const UpdatePage = async ({
 
   if (updatePublicId === "new") {
     return <Editor companyPublicId={publicId} contacts={contacts} mode="new" />;
-  } else {
-    const update = await getUpdate(updatePublicId);
-    const recipients = await api.update.getRecipiants.query({
-      updateId: update?.id,
-      publicUpdateId: update.publicId,
-    });
-
-    return (
-      <Editor
-        companyPublicId={publicId}
-        update={update}
-        contacts={contacts}
-        recipients={recipients as object[] as ExtendedRecipientType[]}
-        mode="edit"
-      />
-    );
   }
+  const update = await getUpdate(updatePublicId);
+  const recipients = await api.update.getRecipiants.query({
+    updateId: update?.id,
+    publicUpdateId: update.publicId,
+  });
+
+  return (
+    <Editor
+      companyPublicId={publicId}
+      update={update}
+      contacts={contacts}
+      recipients={recipients as object[] as ExtendedRecipientType[]}
+      mode="edit"
+    />
+  );
 };
 
 export default UpdatePage;
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,4 +1,5 @@
 import logo from "@/assets/logo.svg";
+import { PublicEnvScript } from "@/components/public-env-script";
 import ScreenSize from "@/components/screen-size";
 import { constants } from "@/lib/constants";
 import { cn } from "@/lib/utils";
@@ -9,7 +10,6 @@ import { robotoMono, satoshi } from "@/styles/fonts";
 import "@/styles/globals.css";
 import { TRPCReactProvider } from "@/trpc/react";
 import type { Metadata } from "next";
-import { PublicEnvScript } from "next-runtime-env";
 import { cookies } from "next/headers";
 import { Toaster } from "sonner";
 
@@ -30,6 +30,7 @@ export default async function RootLayout({
   children: React.ReactNode;
 }) {
   const session = await getServerAuthSession();
+  const nodeEnv = process.env.NODE_ENV;
 
   return (
     <html lang="en" className={cn(satoshi.variable, robotoMono.variable)}>
@@ -42,7 +43,7 @@ export default async function RootLayout({
             <TRPCReactProvider cookies={cookies().toString()}>
               <main>{children}</main>
               <Toaster richColors />
-              {process.env.NEXT_PUBLIC_NODE_ENV === "development" && (
+              {nodeEnv === "development" && (
                 <ScreenSize />
               )}
             </TRPCReactProvider>

diff --git a/src/common/uploads.ts b/src/common/uploads.ts
@@ -1,11 +1,10 @@
+import { env } from "@/env";
 import {
   getPresignedGetUrl,
   getPresignedPutUrl,
   type getPresignedUrlOptions,
 } from "@/server/file-uploads";
 
-import { env } from "next-runtime-env";
-
 /**
  * usage
  * ```js
@@ -51,7 +50,7 @@ export const uploadFile = async (
   const { name, type, size } = file;
   let fileUrl = bucketUrl;
 
-  const uploadDomain = env("NEXT_PUBLIC_UPLOAD_DOMAIN");
+  const uploadDomain = env.NEXT_PUBLIC_UPLOAD_DOMAIN;
   if (bucketMode === "publicBucket" && uploadDomain) {
     fileUrl = `${uploadDomain}/${key}`;
   }

diff --git a/src/components/public-env-script.tsx b/src/components/public-env-script.tsx
@@ -0,0 +1,18 @@
+import { PUBLIC_ENV_KEY } from "@/constants/env";
+import { getPublicEnv } from "@/lib/env";
+import { unstable_noStore as noStore } from "next/cache";
+import Script from "next/script";
+
+export function PublicEnvScript() {
+  noStore();
+  const publicEnvs = JSON.stringify(getPublicEnv());
+  return (
+    <Script
+      strategy="beforeInteractive"
+      // biome-ignore lint/security/noDangerouslySetInnerHtml: <explanation>
+      dangerouslySetInnerHTML={{
+        __html: `window.${PUBLIC_ENV_KEY} = ${publicEnvs}`,
+      }}
+    />
+  );
+}
diff --git a/src/components/update/editor.tsx b/src/components/update/editor.tsx
@@ -19,10 +19,10 @@ import { useRouter } from "next/navigation";
 import { Fragment, useState } from "react";
 import { toast } from "sonner";
 
+import { env } from "@/env";
 import "@/styles/editor.css";
 import { BlockNoteView, useCreateBlockNote } from "@blocknote/react";
 import "@blocknote/react/style.css";
-import { env } from "next-runtime-env";
 
 type UpdatesEditorProps = {
   update?: Update;
@@ -40,7 +40,7 @@ const UpdatesEditor = ({
   companyPublicId,
 }: UpdatesEditorProps) => {
   const router = useRouter();
-  const baseUrl = env("NEXT_PUBLIC_BASE_URL");
+  const baseUrl = env.NEXT_PUBLIC_BASE_URL;
 
   const date = new Date();
   const formattedDate = dayjsExt(date).format("MMM YYYY");

diff --git a/src/constants/env.ts b/src/constants/env.ts
@@ -0,0 +1 @@
+export const PUBLIC_ENV_KEY = "___ENV";
diff --git a/src/env.js b/src/env.js
@@ -1,6 +1,12 @@
+// @ts-nocheck
 import { createEnv } from "@t3-oss/env-nextjs";
 import { z } from "zod";
 
+const readRuntimePublicEnvVariable = (key) => {
+  if (typeof window === "undefined") return process.env[key];
+  return window.___ENV[key];
+};
+
 export const env = createEnv({
   /**
    * Specify your server-side environment variables schema here. This way you can ensure the app
@@ -41,10 +47,8 @@ export const env = createEnv({
    * `NEXT_PUBLIC_`.
    */
   client: {
-    // NEXT_PUBLIC_CLIENTVAR: z.string(),
     NEXT_PUBLIC_BASE_URL: z.string(),
     NEXT_PUBLIC_UPLOAD_DOMAIN: z.string().optional(),
-    NEXT_PUBLIC_NODE_ENV: z.string().default("development"),
   },
 
   /**
@@ -53,8 +57,7 @@ export const env = createEnv({
    */
   runtimeEnv: {
     NODE_ENV: process.env.NODE_ENV,
-    NEXT_PUBLIC_BASE_URL: process.env.NEXT_PUBLIC_BASE_URL,
-    NEXT_PUBLIC_NODE_ENV: process.env.NEXT_PUBLIC_NODE_ENV,
+    NEXT_PUBLIC_BASE_URL: readRuntimePublicEnvVariable("NEXT_PUBLIC_BASE_URL"),
     DATABASE_URL: process.env.DATABASE_URL,
     NEXTAUTH_URL: process.env.NEXTAUTH_URL,
     NEXTAUTH_SECRET: process.env.NEXTAUTH_SECRET,
@@ -67,7 +70,9 @@ export const env = createEnv({
     UPLOAD_BUCKET_PRIVATE: process.env.UPLOAD_BUCKET_PRIVATE,
     UPLOAD_ACCESS_KEY_ID: process.env.UPLOAD_ACCESS_KEY_ID,
     UPLOAD_SECRET_ACCESS_KEY: process.env.UPLOAD_SECRET_ACCESS_KEY,
-    NEXT_PUBLIC_UPLOAD_DOMAIN: process.env.NEXT_PUBLIC_UPLOAD_DOMAIN,
+    NEXT_PUBLIC_UPLOAD_DOMAIN: readRuntimePublicEnvVariable(
+      "NEXT_PUBLIC_UPLOAD_DOMAIN",
+    ),
 
     GOOGLE_CLIENT_ID: process.env.GOOGLE_CLIENT_ID,
     GOOGLE_CLIENT_SECRET: process.env.GOOGLE_CLIENT_SECRET,

diff --git a/src/jobs/password-reset-email.ts b/src/jobs/password-reset-email.ts
@@ -1,6 +1,7 @@
 import PasswordResetEmail from "@/emails/PasswordResetEmail";
 import { env } from "@/env";
 import { BaseJob } from "@/jobs/base";
+
 import { sendMail } from "@/server/mailer";
 import { render } from "jsx-email";
 import type { Job } from "pg-boss";

diff --git a/src/lib/env.ts b/src/lib/env.ts
@@ -0,0 +1,13 @@
+export function getPublicEnv() {
+  const publicEnv = Object.keys(process.env)
+    .filter((key) => /^NEXT_PUBLIC_/i.test(key))
+    .reduce<Record<string, string>>((prev, curr) => {
+      const env = process.env[curr];
+      if (env) {
+        prev[curr] = env;
+      }
+      return prev;
+    }, {});
+
+  return publicEnv;
+}
diff --git a/src/trpc/shared.ts b/src/trpc/shared.ts
@@ -1,13 +1,14 @@
 import type { inferRouterInputs, inferRouterOutputs } from "@trpc/server";
 import superjson from "superjson";
 
+import { env } from "@/env";
 import type { AppRouter } from "@/trpc/api/root";
 
 export const transformer = superjson;
 
 function getBaseUrl() {
   if (typeof window !== "undefined") return "";
-  return process.env.NEXT_PUBLIC_BASE_URL;
+  return env.NEXT_PUBLIC_BASE_URL;
 }
 
 export function getUrl() {