fix: Make API_URL env available in browsers

manifests/base/deployment.yaml

@@ -84,7 +84,7 @@ spec:
                 secretKeyRef:
                   name: secrets-web
                   key: google-secret
-            - name: API_URL
+            - name: NEXT_PUBLIC_API_URL
               valueFrom:
                 configMapKeyRef:
                   name: config-web

next.config.js

@@ -32,7 +32,7 @@ const moduleExports = {
   },
   publicRuntimeConfig: {
     APP_ENV: process.env.APP_ENV,
-    API_URL: process.env.API_URL,
+    API_URL: process.env.NEXT_PUBLIC_API_URL,
     APP_URL: process.env.APP_URL,
     GTM_ID: process.env.GTM_ID ?? 'GTM-TWQBXM6',
     PAYPAL_CLIENT_ID: process.env.PAYPAL_CLIENT_ID,
@@ -54,7 +54,7 @@ const moduleExports = {
     return [
       {
         source: '/api/v1/:slug*',
-        destination: `${process.env.API_URL ?? 'http://localhost:5010/api/v1'}/:slug*`, // Proxy to API
+        destination: `${process.env.NEXT_PUBLIC_API_URL ?? 'http://localhost:5010/api/v1'}/:slug*`, // Proxy to API
       },
       {
         source: '/robots.txt',

src/common/util/campaignImageUrls.ts

@@ -1,11 +1,10 @@
 import getConfig from 'next/config'
 import { CampaignFile, CampaignResponse } from 'gql/campaigns'
 import { CampaignFileRole, ImageSlider } from 'components/common/campaign-file/roles'
-
-const { publicRuntimeConfig } = getConfig()
+import { API_URL } from 'service/apiClient'
 
 export function fileUrl(file: CampaignFile) {
-  return `${publicRuntimeConfig.API_URL}/campaign-file/${file.id}`
+  return `${API_URL}/campaign-file/${file.id}`
 }
 
 /**
@@ -29,7 +28,7 @@ export function campaignSliderUrls(campaign: CampaignResponse): ImageSlider[] {
   return files.map((file) => {
     return {
       id: file.id,
-      src: `${publicRuntimeConfig.API_URL}/campaign-file/${file.id}`,
+      src: `${API_URL}/campaign-file/${file.id}`,
       fileName: file.filename.replace(fileExtensionRemoverRegex, ''),
     }
   })

src/common/util/expenseFileUrls.ts

@@ -1,7 +1,5 @@
-import getConfig from 'next/config'
-
-const { publicRuntimeConfig } = getConfig()
+import { API_URL } from 'service/apiClient'
 
 export function expenseFileUrl(fileId: string) {
-  return `${publicRuntimeConfig.API_URL}/expenses/download-file/${fileId}`
+  return `${API_URL}/expenses/download-file/${fileId}`
 }

src/common/util/newsFilesUrls.ts

@@ -1,6 +1,7 @@
 import { CampaignNewsFile } from 'gql/campaign-news'
 import { CampaignFileRole } from 'components/common/campaign-file/roles'
 import getConfig from 'next/config'
+import { API_URL } from 'service/apiClient'
 
 const { publicRuntimeConfig } = getConfig()
 
@@ -13,7 +14,7 @@ export function GetArticleDocuments(files: CampaignNewsFile[]) {
     .map((file) => {
       return {
         id: file.id,
-        fileUrl: `${publicRuntimeConfig.API_URL}/campaign-news-file/${file.id}`,
+        fileUrl: `${API_URL}/campaign-news-file/${file.id}`,
         fileName: file.filename.replace(fileExtensionRemoverRegex, ''),
       }
     })
@@ -26,7 +27,7 @@ export function GetArticleGalleryPhotos(files: CampaignNewsFile[]) {
     .map((file) => {
       return {
         id: file.id,
-        src: `${publicRuntimeConfig.API_URL}/campaign-news-file/${file.id}`,
+        src: `${API_URL}/campaign-news-file/${file.id}`,
         fileName: file.filename.replace(fileExtensionRemoverRegex, ''),
       }
     })

src/service/apiClient.ts

@@ -1,11 +1,8 @@
 import Axios from 'axios'
 import LRU from 'lru-cache'
-import getConfig from 'next/config'
 import { makeUseAxios } from 'axios-hooks'
 
-const {
-  publicRuntimeConfig: { API_URL },
-} = getConfig()
+export const API_URL = process.env.NEXT_PUBLIC_API_URL
 
 const cache = new LRU({ max: 10 })
 export const apiClient = Axios.create({ baseURL: `${API_URL}` })