fix(shared): correct env load

Author: eriandev

.github/workflows/deploy.yml

@@ -12,6 +12,9 @@ jobs:
   deploy:
     runs-on: ubuntu-22.04
 
+    env:
+      PUBLIC_API_URL: ${{ secrets.PUBLIC_API_URL }}
+
     steps:
       - name: Checkout 🛎️
         uses: actions/checkout@v3
@@ -33,8 +36,6 @@ jobs:
 
       - name: Build 🛠️
         run: pnpm build:prod
-        env:
-          API_PROJECTS_URL: ${{ secrets.API_PROJECTS_URL }}
 
       - name: Deploy 🚀
         uses: JamesIves/github-pages-deploy-action@v4

astro.config.mjs

@@ -1,7 +1,10 @@
+import { loadEnv } from 'vite'
 import { defineConfig } from 'astro/config'
 import { getAstroConfig } from 'shared/config/astro'
 
-const config = getAstroConfig()
+const { PUBLIC_API_URL } = loadEnv('', '', 'PUBLIC')
+const { hostname } = new URL(PUBLIC_API_URL)
+const config = getAstroConfig({ hostname })
 
 // https://astro.build/config
 export default defineConfig(config)

packages/shared/config/astro.ts

@@ -2,15 +2,13 @@ import icon from 'astro-icon'
 import tailwind from '@astrojs/tailwind'
 import type { AstroUserConfig } from 'astro/config'
 
-import { API_URL } from '../consts'
-
 export interface GetAstroConfig {
   project?: string
+  hostname?: string
 }
 
-export function getAstroConfig ({ project }: GetAstroConfig = {}): AstroUserConfig {
+export function getAstroConfig ({ project, hostname }: GetAstroConfig = {}): AstroUserConfig {
   const assets = 'assets'
-  const { hostname } = new URL(API_URL)
   const hasProjectName = typeof project === 'string'
   const outDir = hasProjectName ? `../../dist/${project}` : undefined
   const base = hasProjectName ? `/frontendmentor/${project}` : '/frontendmentor'
@@ -22,8 +20,6 @@ export function getAstroConfig ({ project }: GetAstroConfig = {}): AstroUserConf
     build: {
       assets
     },
-    image: {
-      domains: [hostname]
-    }
+    image: hostname ? { domains: [hostname] } : undefined
   }
 }

packages/shared/consts.ts

@@ -1,6 +1,5 @@
 ---
 import { get } from 'shared/utils/http'
-import { API_URL } from 'shared/consts'
 import MetaTags from 'shared/components/MetaTags.astro'
 
 import Header from '@/components/Header.astro'
@@ -35,7 +34,7 @@ interface Landing {
   }
 }
 
-const { footer, header } = await get<Landing>(API_URL + '/landing/')
+const { footer, header } = await get<Landing>(import.meta.env.PUBLIC_API_URL + '/landing/')
 const { designedBy, developedBy } = footer
 const { navigation, profile } = header
 ---

src/layouts/Layout.astro

@@ -1,6 +1,5 @@
 ---
 import { get } from 'shared/utils/http'
-import { API_URL } from 'shared/consts'
 
 import Card from '@/components/Card.astro'
 import Layout from '@/layouts/Layout.astro'
@@ -17,7 +16,7 @@ interface Projects {
   title: string
 }
 
-const { results } = await get<{ results: Projects[] }>(API_URL + '/projects/')
+const { results } = await get<{ results: Projects[] }>(import.meta.env.PUBLIC_API_URL + '/projects/')
 const hasProjects = results.length > 0
 ---