Merge pull request #88 from EETagent/vite_api_url

frontend/package.json

@@ -36,6 +36,7 @@
 	"type": "module",
 	"dependencies": {
 		"axios": "^1.2.1",
+		"dotenv": "^16.0.3",
 		"filedrop-svelte": "^0.1.2",
 		"fuse.js": "^6.6.2",
 		"isomorphic-dompurify": "^0.24.0",

frontend/pnpm-lock.yaml

@@ -7,6 +7,7 @@ specifiers:
   '@typescript-eslint/eslint-plugin': ^5.46.1
   '@typescript-eslint/parser': ^5.46.1
   axios: ^1.2.1
+  dotenv: ^16.0.3
   eslint: ^8.29.0
   eslint-config-prettier: ^8.5.0
   eslint-plugin-svelte3: ^4.0.0
@@ -31,6 +32,7 @@ specifiers:
 
 dependencies:
   axios: 1.2.1
+  dotenv: 16.0.3
   filedrop-svelte: 0.1.2
   fuse.js: 6.6.2
   isomorphic-dompurify: 0.24.0
@@ -977,6 +979,11 @@ packages:
     resolution: {integrity: sha512-ewwFzHzrrneRjxzmK6oVz/rZn9VWspGFRDb4/rRtIsM1n36t9AKma/ye8syCpcw+XJ25kOK/hOG7t1j2I2yBqA==}
     dev: false
 
+  /dotenv/16.0.3:
+    resolution: {integrity: sha512-7GO6HghkA5fYG9TYnNxi14/7K9f5occMlp3zXAuSxn7CKCxt9xbNWG7yF8hTCSUchlfWSe3uLmlPfigevRItzQ==}
+    engines: {node: '>=12'}
+    dev: false
+
   /entities/4.4.0:
     resolution: {integrity: sha512-oYp7156SP8LkeGD0GF85ad1X9Ai79WtRsZ2gxJqtBuzH+98YUV6jkHEKlZkMbcrjJjIVJNIDP/3WL9wQkoPbWA==}
     engines: {node: '>=0.12'}

frontend/src/hooks.server.ts

@@ -1,7 +1,9 @@
-import { API_URL } from '$lib/@api';
 import type { HandleFetch } from '@sveltejs/kit';
+import * as dotenv from 'dotenv';
 
 export const handleFetch: HandleFetch = async ({ request, fetch, event }) => {
+	dotenv.config();
+
 	console.log(`SSR: handleFetch() BEFORE: ${request.method} ${request.url}`);
 
 	const cookie = event.request.headers.get('cookie') || '';
@@ -10,7 +12,13 @@ export const handleFetch: HandleFetch = async ({ request, fetch, event }) => {
 
 	request.headers.set('cookie', cookie);
 
-	request = new Request(request.url.replace(API_URL, 'http://127.0.0.1:8000'), request);
+	const url = new URL(request.url);
+
+	url.host = process.env.PORTFOLIO_API_HOST ?? '127.0.0.1:8000';
+
+	url.pathname = url.pathname.replace(/^\/api/, '');
+
+	request = new Request(url, request);
 
 	console.log(`SSR: handleFetch() AFTER:  ${request.method} ${request.url}`);
 

frontend/src/lib/@api/index.ts

@@ -2,7 +2,7 @@ import type { AxiosError } from 'axios';
 
 export type Fetch = (input: RequestInfo, init?: RequestInit) => Promise<Response>;
 
-export const API_URL = 'http://localhost:8000';
+export const API_URL = '/api';
 
 export interface ApiError {
 	error: AxiosError | unknown;

frontend/vite.config.ts

@@ -2,7 +2,16 @@ import { sveltekit } from '@sveltejs/kit/vite';
 import type { UserConfig } from 'vite';
 
 const config: UserConfig = {
-	plugins: [sveltekit()]
+	plugins: [sveltekit()],
+	server: {
+		proxy: {
+			'/api': {
+				target: 'http://127.0.0.1:8000',
+				changeOrigin: true,
+				rewrite: (path) => path.replace(/^\/api/, '')
+			}
+		}
+	}
 };
 
 export default config;