use a proxy simulate a local server and test the api, expose client production settings (not sensitive)

Author: jifalops

.devcontainer/Dockerfile

@@ -6,4 +6,8 @@ RUN sudo npx playwright install-deps &&\
 
 # Install additional packages
 RUN sudo apt-get update && sudo apt-get install -y --no-install-recommends \
-  trash-cli
+  trash-cli
+
+# Install global npm packages
+RUN npm install --global \
+  local-cors-proxy

.devcontainer/docker-compose.yml

@@ -10,6 +10,4 @@ services:
     environment:
       TZ: ${TZ} # Timezone
       GITHUB_TOKEN: ${GITHUB_TOKEN} # GitHub CLI
-      API_URL: 'https://dummyjson.com'
-      GA_MEAUSREMENT_ID: 'G-XXXXXXXXXX'
-      ADSENSE_CLIENT_ID: 'ca-pub-XXXXXXXXXX'
+      API_URL: 'http://localhost:3000/proxy'

.env

@@ -0,0 +1 @@
+VITE_API_URL="${API_URL}"

.env.example

@@ -0,0 +1,4 @@
+# Production environment variables. Do not put sensitive information here!
+VITE_API_URL="https://dummyjson.com"
+VITE_GA_MEASUREMENT_ID="" # G-XXXXXXXXXX
+VITE_ADSENSE_CLIENT_ID="" # ca-pub-XXXXXXXXXX

.env.production

@@ -12,8 +12,8 @@ node_modules
 Thumbs.db
 
 # Env
-.env
-.env.*
+# .env
+# .env.*
 !.env.example
 !.env.test
 

.gitignore

@@ -17,6 +17,18 @@
 		"*.css": "tailwindcss"
 	},
 	"restoreTerminals.terminals": [
+		{
+			"splitTerminals": [
+				{
+					"name": "mock api",
+					"commands": [
+						"echo 'Pretending you have a local server running...'",
+						"echo 'You can delete this in your .vscode/settings.json.'",
+						"npx local-cors-proxy --proxyUrl https://dummyjson.com --port 3000"
+					]
+				},
+			]
+		},
 		{
 			"splitTerminals": [
 				{

.vscode/settings.json

@@ -3,6 +3,7 @@
 @import 'tailwindcss/utilities';
 
 @layer base {
+	/* Toogle light/dark mode on your OS to see changes. */
 	body {
 		@apply font-sans antialiased;
 		@apply bg-white text-neutral-900;

src/app.css

@@ -1,5 +1,6 @@
 /** See https://vite.dev/guide/env-and-mode#modes */
-export const IS_PRODUCTION_BUILD = import.meta.env.MODE === 'production';
+export const BUILD_MODE = import.meta.env.MODE;
+export const IS_PRODUCTION_BUILD = BUILD_MODE === 'production';
 
 /** Check if running on localhost or a local network. */
 export const IS_LOCAL_ENVIRONMENT =

src/lib/config.ts

@@ -6,6 +6,7 @@ import { App } from './app';
 import {
 	ADSENSE_CLIENT_ID,
 	API_URL,
+	BUILD_MODE,
 	GA_MEASUREMENT_ID,
 	IS_LOCAL_ENVIRONMENT,
 	IS_PRODUCTION_BUILD
@@ -20,6 +21,7 @@ export const log = new Log(IS_PRODUCTION_BUILD ? Log.INFO : Log.TRACE);
 
 log.debug(init_start, 'Initializing...');
 log.debug('Config:', {
+	BUILD_MODE,
 	API_URL,
 	IS_PRODUCTION_BUILD,
 	IS_LOCAL_ENVIRONMENT,

src/lib/index.ts

@@ -8,4 +8,6 @@
 	});
 </script>
 
-<slot />
+<main>
+	<slot />
+</main>

src/routes/+layout.svelte

@@ -1,18 +1,29 @@
 <script lang="ts">
 	import { app } from '$lib';
+	import { API_URL } from '$lib/config';
 	import { onMount } from 'svelte';
 	import SvelteLogo from 'virtual:icons/logos/svelte-icon';
+
 	let ad: HTMLElement;
+	let testResult = $state('');
+
 	onMount(() => {
 		app.advertising.loadAd(ad, 'adunit', 'auto');
+		testApi();
 	});
+
+	async function testApi() {
+		const res = await fetch(`${API_URL}/test`);
+		testResult = JSON.stringify(await res.json());
+	}
 </script>
 
 <article class="p-2">
 	<h1>Welcome to SvelteKit <SvelteLogo class="m-2 inline w-8" /></h1>
 	<p>
 		Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation.
 	</p>
+	<p>API test: {testResult}</p>
 	<footer>
 		<ins bind:this={ad} class="block h-16 w-64"></ins>
 	</footer>