fix(frontend): separate server and browser base url (#15)

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

* style: format

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=

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}

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',
 };

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,
   });
 

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">

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>
 

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 />