DN-4: Testing API connection.

client/next.config.mjs

@@ -2,16 +2,7 @@
 
 const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3001';
 
-// only used with dynamic rendering, not compatible with output: 'export' | 'standalone'
-// used locally for rewriting api calls to X server
-async function rewrites() {
-    return [
-        {
-            source: '/api/:path*',
-            destination: `${API_URL}/api/:path*`
-        }
-    ];
-}
+console.log(`Proxying API requests to ${API_URL}`);
 
 const nextConfig = {
     // output: 'export',
@@ -20,6 +11,17 @@ const nextConfig = {
     // },
     // output: 'standalone',
     // assetPrefix: process.env.NEXT_PUBLIC_APP_URL || '', // if standalone
+    // ---
+    // only used with dynamic rendering, not compatible with output: 'export' | 'standalone'
+    // used locally for rewriting api calls to X server
+    async rewrites() {
+        return [
+            {
+                source: '/api/:path*',
+                destination: `${API_URL}/:path*`
+            }
+        ];
+    },
     compiler: {
         styledComponents: true
     }

client/package.json

@@ -2,7 +2,7 @@
   "name": "client",
   "private": true,
   "scripts": {
-    "dev": "next dev -p 6969",
+    "dev": "next dev",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"
@@ -19,6 +19,7 @@
     }
   },
   "dependencies": {
+    "axios": "^1.7.2",
     "gray-matter": "^4.0.3",
     "mdast-util-toc": "6.0.0",
     "next": "^14.2.4",

client/src/app/test-api/page.tsx

@@ -0,0 +1,46 @@
+'use client';
+import { useEffect, useState } from 'react';
+import { api } from '@components/utils/api/api';
+
+function Page() {
+    const [data, setData] = useState(null);
+    const [error, setError] = useState(null);
+
+    useEffect(() => {
+        async function fetchData() {
+            try {
+                console.log('Attempting to fetch from:', '/api');
+                const response = await api.get('/');
+                console.log('Response:', response.data);
+                setData(response.data);
+            } catch (error: any) {
+                console.error('Error fetching data:', error);
+                setError(error.message);
+            }
+        }
+
+        fetchData();
+    }, []);
+
+    if (error) {
+        return (
+            <>
+                <h1>Error</h1>
+                <p>Failed to fetch data: {error}</p>
+            </>
+        );
+    }
+
+    if (!data) {
+        return <h1>Loading...</h1>;
+    }
+
+    return (
+        <>
+            <h1>Hello world!</h1>
+            <p>{JSON.stringify(data)}</p>
+        </>
+    );
+}
+
+export default Page;

client/src/utils/api/api.ts

@@ -0,0 +1,7 @@
+import axios from 'axios';
+
+const api = axios.create({
+    baseURL: '/api'
+});
+
+export { api };

server/src/index.ts

@@ -19,7 +19,23 @@ const VERSION: string = JSON.parse(
 const app = express();
 
 app.use(express.json());
-app.use(cors());
+app.use(
+    cors({
+        origin: function (origin, callback) {
+            const allowedOrigins = [
+                'http://localhost:3000',
+                'https://derecksnotes.com',
+                'https://dev.derecksnotes.com'
+            ];
+            if (!origin || allowedOrigins.indexOf(origin) !== -1) {
+                callback(null, true);
+            } else {
+                callback(new Error('Not allowed by CORS'));
+            }
+        },
+        credentials: true
+    })
+);
 
 const redisClient = new Redis(env.REDIS_URI);
 
@@ -43,6 +59,7 @@ app.use(
 const buildTime = new Date().toISOString();
 
 app.get('/', (req: Request, res: Response) => {
+    console.log('Consoling - GET /');
     res.json({
         name: "Dereck's Notes API",
         ok: true,

server/src/utils/env.ts

@@ -11,7 +11,7 @@ const env = (name: string): string => {
 export const BUILD_ENV = env('BUILD_ENV');
 export const BUILD_ENV_BOOL = BUILD_ENV === 'PROD' ? true : false;
 export const API_URL = env('API_URL');
-export const EXPRESS_PORT: string = '3000';
+export const EXPRESS_PORT: string = process.env.EXPRESS_PORT || '3000';
 export const SESSION_SECRET = env('SESSION_SECRET');
 
 // MONGO DB