feat: get rid of NEXT_PUBLIC_SITE_URL

README.md

@@ -20,7 +20,7 @@ $ npm install
 
 You'll need a PostgreSQL instance, either local (see https://www.postgresql.org/download/) or in the cloud (for example, you can spin one up on https://www.digitalocean.com/products/managed-databases-postgresql or https://supabase.com/).
 
-Environment can be set up with an `.env` file. You'll need to configure at least `DIGITALOCEAN_POSTGRES` for the fetching to work, and `NEXT_PUBLIC_SITE_URL` for the frontend.
+Environment can be set up with an `.env` file. You'll need to configure at least `DIGITALOCEAN_POSTGRES`.
 
 See [./docs/configuration.md](./docs/configuration.md) for details.
 

docs/configuration.md

@@ -5,14 +5,12 @@ All configuration is done through environment variables.
 Not all of these are necessary to run the code. The most important ones are:
 
 - `DIGITALOCEAN_POSTGRES` pointing to the working Postgres database
-- `NEXT_PUBLIC_SITE_URL` for the frontend to work properly
 
 There's also a template configuration file in `../env.example`.
 
 ## Database endpoints
 
 - `DIGITALOCEAN_POSTGRES`, of the form `postgres://username:password@domain.com:port/configvars`. (Disregard `DIGITALOCEAN_` prefix, you can use any endpoint you like).
-- `DIGITALOCEAN_POSTGRES_PUBLIC`
 - `ALGOLIA_MASTER_API_KEY`, a string of 32 hexidecimal characters, like `19b6c2234e50c98d30668659a39e3127` (not an actual key).
 - `NEXT_PUBLIC_ALGOLIA_APP_ID`,
 - `NEXT_PUBLIC_ALGOLIA_SEARCH_KEY`
@@ -37,7 +35,5 @@ Note that not all of these cookies are needed to use all parts of the source cod
 
 ## Others
 
-- `NEXT_PUBLIC_SITE_URL`, e.g., `http://localhost:3000` if you're running a local instance
-- `REBUIDNETLIFYHOOKURL`
 - `BACKUP_PROXY_IP`
 - `BACKUP_PROXY_PORT`

env.example

@@ -8,8 +8,6 @@
 # DIGITALOCEAN_POSTGRES=postgresql://...@localhost:5432/...?schema=public
 # POSTGRES_NO_SSL=1
 
-# NEXT_PUBLIC_SITE_URL=http://localhost:3000
-
 # DEBUG_MODE=off
 
 # INFER_COOKIE=...

src/pages/dashboards/index.tsx

@@ -8,6 +8,7 @@ import { DashboardCreator } from "../../web/display/DashboardCreator";
 import { Layout } from "../../web/display/Layout";
 import { LineHeader } from "../../web/display/LineHeader";
 import { addLabelsToForecasts, FrontendForecast } from "../../web/platforms";
+import { reqToBasePath } from "../../web/utils";
 import { getDashboardForecastsByDashboardId } from "../../web/worker/getDashboardForecasts";
 
 interface Props {
@@ -40,6 +41,7 @@ export const getServerSideProps: GetServerSideProps<Props> = async (
   const { dashboardForecasts, dashboardItem } =
     await getDashboardForecastsByDashboardId({
       dashboardId,
+      basePath: reqToBasePath(context.req), // required on server side to find the API endpoint
     });
   const frontendDashboardForecasts = addLabelsToForecasts(
     dashboardForecasts,

src/pages/dashboards/view/[id].tsx

@@ -9,6 +9,7 @@ import { InfoBox } from "../../../web/display/InfoBox";
 import { Layout } from "../../../web/display/Layout";
 import { LineHeader } from "../../../web/display/LineHeader";
 import { addLabelsToForecasts, FrontendForecast } from "../../../web/platforms";
+import { reqToBasePath } from "../../../web/utils";
 import { getDashboardForecastsByDashboardId } from "../../../web/worker/getDashboardForecasts";
 
 interface Props {
@@ -27,6 +28,7 @@ export const getServerSideProps: GetServerSideProps<Props> = async (
   const { dashboardForecasts, dashboardItem } =
     await getDashboardForecastsByDashboardId({
       dashboardId,
+      basePath: reqToBasePath(context.req), // required on server side to find the API endpoint
     });
   const frontendDashboardForecasts = addLabelsToForecasts(
     dashboardForecasts,

src/web/utils.ts

@@ -0,0 +1,10 @@
+import { IncomingMessage } from "http";
+
+export const reqToBasePath = (req: IncomingMessage) => {
+  if (process.env.NEXT_PUBLIC_VERCEL_URL) {
+    return `https://${process.env.NEXT_PUBLIC_VERCEL_URL}`;
+  }
+
+  // we could just hardcode http://localhost:3000 here, but then `next dev -p <CUSTOM_PORT>` would break
+  return "http://" + req.headers.host;
+};

src/web/worker/getDashboardForecasts.ts

@@ -5,16 +5,24 @@ import { Forecast } from "../../backend/platforms";
 
 export async function getDashboardForecastsByDashboardId({
   dashboardId,
+  basePath,
+}: {
+  dashboardId: string;
+  basePath?: string;
 }): Promise<{
   dashboardForecasts: Forecast[];
   dashboardItem: DashboardItem;
 }> {
   console.log("getDashboardForecastsByDashboardId: ");
+  if (window === undefined && !basePath) {
+    throw new Error("`basePath` option is required on server side");
+  }
+
   let dashboardContents: Forecast[] = [];
   let dashboardItem: DashboardItem | any = null;
   try {
     let { data } = await axios({
-      url: `${process.env.NEXT_PUBLIC_SITE_URL}/api/dashboard-by-id`,
+      url: `${basePath || ""}/api/dashboard-by-id`,
       method: "post",
       data: {
         id: dashboardId,