feat: configure ports, db url and api url with env variables

backend/src/main.ts

@@ -30,6 +30,6 @@ async function bootstrap() {
     SwaggerModule.setup("api/swagger", app, document);
   }
 
-  await app.listen(8080);
+  await app.listen(process.env.PORT || 8080);
 }
 bootstrap();

backend/src/prisma/prisma.service.ts

@@ -7,7 +7,9 @@ export class PrismaService extends PrismaClient {
     super({
       datasources: {
         db: {
-          url: "file:../data/pingvin-share.db?connection_limit=1",
+          url:
+            process.env.DATABASE_URL ||
+            "file:../data/pingvin-share.db?connection_limit=1",
         },
       },
     });

frontend/next.config.js

@@ -19,4 +19,7 @@ module.exports = withPWA({
   output: "standalone", env: {
     VERSION: version,
   },
+  serverRuntimeConfig: {
+    apiURL: process.env.API_URL ?? 'http://localhost:8080',
+  },
 });

frontend/src/middleware.ts

@@ -22,7 +22,7 @@ export async function middleware(request: NextRequest) {
 
   // Get config from backend
   const config = await (
-    await fetch("http://localhost:8080/api/configs")
+    await fetch(`${request.nextUrl.origin}/api/configs`)
   ).json();
 
   const getConfig = (key: string) => {

frontend/src/pages/_app.tsx

@@ -11,6 +11,7 @@ import axios from "axios";
 import { getCookie, setCookie } from "cookies-next";
 import { GetServerSidePropsContext } from "next";
 import type { AppProps } from "next/app";
+import getConfig from "next/config";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 import Header from "../components/header/Header";
@@ -117,6 +118,8 @@ function App({ Component, pageProps }: AppProps) {
 // Fetch user and config variables on server side when the first request is made
 // These will get passed as a page prop to the App component and stored in the contexts
 App.getInitialProps = async ({ ctx }: { ctx: GetServerSidePropsContext }) => {
+  const { apiURL } = getConfig().serverRuntimeConfig;
+
   let pageProps: {
     user?: CurrentUser;
     configVariables?: Config[];
@@ -130,15 +133,13 @@ App.getInitialProps = async ({ ctx }: { ctx: GetServerSidePropsContext }) => {
   if (ctx.req) {
     const cookieHeader = ctx.req.headers.cookie;
 
-    pageProps.user = await axios(`http://localhost:8080/api/users/me`, {
+    pageProps.user = await axios(`${apiURL}/api/users/me`, {
       headers: { cookie: cookieHeader },
     })
       .then((res) => res.data)
       .catch(() => null);
 
-    pageProps.configVariables = (
+    pageProps.configVariables = (await axios(`${apiURL}/api/configs`)).data;
-      await axios(`http://localhost:8080/api/configs`)
-    ).data;
 
     pageProps.route = ctx.req.url;
   }

frontend/src/pages/api/[...all].tsx

@@ -1,5 +1,6 @@
 import { NextApiRequest, NextApiResponse } from "next";
 import httpProxyMiddleware from "next-http-proxy-middleware";
+import getConfig from "next/config";
 
 export const config = {
   api: {
@@ -8,11 +9,13 @@ export const config = {
   },
 };
 
+const { apiURL } = getConfig().serverRuntimeConfig;
+
 export default (req: NextApiRequest, res: NextApiResponse) => {
   return httpProxyMiddleware(req, res, {
     headers: {
       "X-Forwarded-For": req.socket?.remoteAddress ?? "",
     },
-    target: "http://localhost:8080",
+    target: apiURL,
   });
 };