From 2fd9bafaa25837bd0fcd62435032fcbc7fc99915 Mon Sep 17 00:00:00 2001
From: Reinaldy Rafli <aldy505@proton.me>
Date: Sat, 1 Oct 2022 21:51:13 +0700
Subject: [PATCH] fix(frontend): separate server and browser base url (#15)

* fix(frontend): separate server and browser base url

* style: format
---
 client/.env.example                  | 3 ++-
 client/Dockerfile                    | 5 +++++
 client/src/lib/env.ts                | 7 ++++---
 client/src/routes/+page.server.ts    | 2 +-
 client/src/routes/+page.svelte       | 2 +-
 client/src/routes/api/+page.svelte   | 8 ++++----
 client/src/routes/guide/+page.svelte | 5 +++--
 7 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/client/.env.example b/client/.env.example
index 2df7165..cb8a932 100644
--- a/client/.env.example
+++ b/client/.env.example
@@ -1,3 +1,4 @@
 VITE_NODE_ENV=development
-VITE_API_ENDPOINT=
+VITE_SERVER_API_ENDPOINT=
+VITE_BROWSER_API_ENDPOINT=
 VITE_SENTRY_DSN=
\ No newline at end of file
diff --git a/client/Dockerfile b/client/Dockerfile
index 64e5ca0..e2e24cd 100644
--- a/client/Dockerfile
+++ b/client/Dockerfile
@@ -8,6 +8,11 @@ WORKDIR /app
 
 COPY . .
 
+ENV VITE_NODE_ENV="development"
+ENV VITE_SERVER_API_ENDPOINT="https://jokesbapak2.reinaldyrafli.com/api/"
+ENV VITE_BROWSER_API_ENDPOINT="http://api:5000/"
+ENV VITE_SENTRY_DSN=""
+
 RUN npm ci && npm run build && rm -rf node_modules && npm ci --omit=dev
 
 EXPOSE ${PORT}
diff --git a/client/src/lib/env.ts b/client/src/lib/env.ts
index c533b9c..c7f66e4 100644
--- a/client/src/lib/env.ts
+++ b/client/src/lib/env.ts
@@ -1,5 +1,6 @@
 export default {
-  API_ENDPOINT: import.meta.env.VITE_API_ENDPOINT,
-  SENTRY_DSN: import.meta.env.VITE_SENTRY_DSN,
-  NODE_ENV: import.meta.env.VITE_NODE_ENV,
+  SERVER_API_ENDPOINT: import.meta.env.VITE_SERVER_API_ENDPOINT || 'http://localhost:5000',
+  BROWSER_API_ENDPOINT: import.meta.env.VITE_BROWSER_API_ENDPOINT || 'https://jokesbapak2.reinaldyrafli.com',
+  SENTRY_DSN: import.meta.env.VITE_SENTRY_DSN || '',
+  NODE_ENV: import.meta.env.VITE_NODE_ENV || 'development',
 };
diff --git a/client/src/routes/+page.server.ts b/client/src/routes/+page.server.ts
index 7c38366..06e28af 100644
--- a/client/src/routes/+page.server.ts
+++ b/client/src/routes/+page.server.ts
@@ -9,7 +9,7 @@ interface TotalResponse {
 export async function load() {
   const response = await $fetch<TotalResponse>('total', {
     method: 'GET',
-    baseURL: env.API_ENDPOINT,
+    baseURL: env.SERVER_API_ENDPOINT,
     parseResponse: JSON.parse,
   });
 
diff --git a/client/src/routes/+page.svelte b/client/src/routes/+page.svelte
index 2b3be77..811e7f3 100644
--- a/client/src/routes/+page.svelte
+++ b/client/src/routes/+page.svelte
@@ -29,7 +29,7 @@
     </div>
     <div class="flex-1 md:px-6 w-full">
       <div class="max-w-xs mx-auto">
-        <img src={env.API_ENDPOINT + `/today`} alt="Sample joke" class="py-6 shadow-2xl" />
+        <img src={env.BROWSER_API_ENDPOINT + `/today`} alt="Sample joke" class="py-6 shadow-2xl" />
       </div>
       <Codeblock>$ curl -XGET 'https://jokesbapak2.reinaldyrafli.com/api/'</Codeblock>
       <p class="text-sm text-center py-4 opacity-70 hover:opacity-100 transition duration-300 ease-in-out">
diff --git a/client/src/routes/api/+page.svelte b/client/src/routes/api/+page.svelte
index deb4a8e..0480c01 100644
--- a/client/src/routes/api/+page.svelte
+++ b/client/src/routes/api/+page.svelte
@@ -45,22 +45,22 @@
   <h2>{$_('api.get.random.title')}</h2>
   <p>{$_('api.get.random.body')}</p>
   <Codeblock>
-    GET {env.API_ENDPOINT}/
+    GET {env.BROWSER_API_ENDPOINT}/
   </Codeblock>
   <h2>{$_('api.get.today.title')}</h2>
   <p>{$_('api.get.today.body')}</p>
   <Codeblock>
-    GET {env.API_ENDPOINT}/today
+    GET {env.BROWSER_API_ENDPOINT}/today
   </Codeblock>
   <h2>{$_('api.get.id.title')}</h2>
   <p>{$_('api.get.id.body', { values: { total } })}</p>
   <Codeblock>
-    GET {env.API_ENDPOINT}/id/&lcub;id&rcub;
+    GET {env.BROWSER_API_ENDPOINT}/id/&lcub;id&rcub;
   </Codeblock>
   <h2>{$_('api.get.total.title')}</h2>
   <p>{$_('api.get.total.body')}</p>
   <Codeblock>
-    GET {env.API_ENDPOINT}/total
+    GET {env.BROWSER_API_ENDPOINT}/total
   </Codeblock>
 </section>
 
diff --git a/client/src/routes/guide/+page.svelte b/client/src/routes/guide/+page.svelte
index cc6634f..4710b2b 100644
--- a/client/src/routes/guide/+page.svelte
+++ b/client/src/routes/guide/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import Codeblock from '../../components/codeblock.svelte';
   import { _ } from 'svelte-i18n';
+  import env from '$lib/env';
   // This page is meant to guide people on how to use the API.
 </script>
 
@@ -25,14 +26,14 @@
 
 <section class="guide_page">
   <h2>{$_('guide.direct.1')} <code>&lt;img&gt;</code> {$_('guide.direct.2')}</h2>
-  <Codeblock>&lt;img src="https://jokesbapak2.reinaldyrafli.com/api/" /&gt;</Codeblock>
+  <Codeblock>&lt;img src="{env.BROWSER_API_ENDPOINT}/" /&gt;</Codeblock>
 </section>
 
 <section class="guide_page">
   <h2>{$_('guide.fetch.1')}</h2>
   <p>{$_('guide.fetch.2')}</p>
   <Codeblock>
-    const response = await fetch(&quot;https://jokesbapak2.reinaldyrafli.com/api/&quot;);<br />
+    const response = await fetch(&quot;{env.BROWSER_API_ENDPOINT}/&quot;);<br />
     <br />
     if (!response.ok) &#123;<br />
     &nbsp;&nbsp;// {$_('guide.fetch.3')}<br />