PSE2_FF
/
pse2_ff
0
0
Fork 0
Code Issues Pull Requests Packages Projects 1 Releases Wiki Activity

#60-Added dynamic changing host logic. #73

Merged
3025495 merged 2 commits from #60-Dynamisches-angeben-des-Hostes-für-das-frontend into main 2025-06-15 18:15:07 +02:00
Conversation 1 Commits 2 Files Changed 10
10 changed files with 61 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
project/docker-compose.yml
View File

@ -4,6 +4,9 @@ services:
context: frontend
ports:
- 8080:80
environment:
- API_HOST=http://localhost:5050
db:
image: postgres:17-alpine
env_file:

13
project/frontend/Dockerfile
View File

@ -8,8 +8,21 @@ RUN bun install --frozen-lockfile
COPY . .
# dummy environment variable for build - DONT CHANGE!!!
ENV VITE_API_HOST=SECRET_HOST
RUN bun run build
FROM nginx:1.28.0-alpine3.21
# default environment variable that will be replaced at runtime
ENV API_HOST=http://localhost:5050
COPY docker/nginx.conf /etc/nginx/conf.d/default.conf
COPY --from=base /usr/src/app/dist /usr/share/nginx/html
# entrypoint script
COPY docker/docker-entrypoint.sh /docker-entrypoint.sh
RUN chmod +x /docker-entrypoint.sh
CMD ["/docker-entrypoint.sh"]

23
project/frontend/docker/docker-entrypoint.sh 100644
View File

@ -0,0 +1,23 @@
#!/bin/sh
# Replace API host in built JavaScript files
echo "Replacing SECRET_HOST with ${API_HOST}"
# Replace in main JS files
for i in /usr/share/nginx/html/*.js; do
if [ -f "$i" ]; then
sed -i "s|SECRET_HOST|${API_HOST}|g" "$i"
fi
done
# Replace in assets folder JS files
for i in /usr/share/nginx/html/assets/*.js; do
if [ -f "$i" ]; then
sed -i "s|SECRET_HOST|${API_HOST}|g" "$i"
fi
done
echo "Replacement completed. Starting nginx..."
# Start nginx and replace the shell process
exec nginx -g 'daemon off;'

5
project/frontend/src/components/ConfigTable.tsx
View File

@ -5,6 +5,7 @@ import { useEffect, useState } from "react";
import type { Kennzahl } from "../types/kpi";
import { getDisplayType } from "../types/kpi";
import { fetchKennzahlen as fetchK } from "../util/api";
import { API_HOST } from "../util/api";
export function ConfigTable() {
const navigate = useNavigate();
@ -42,7 +43,7 @@ export function ConfigTable() {
try {
const response = await fetch(
`http://localhost:5050/api/kpi_setting/${id}`,
`${API_HOST}/api/kpi_setting/${id}`,
{
method: "PUT",
headers: {
@ -79,7 +80,7 @@ export function ConfigTable() {
}));
const response = await fetch(
`http://localhost:5050/api/kpi_setting/update-kpi-positions`,
`${API_HOST}/api/kpi_setting/update-kpi-positions`,
{
method: "PUT",
headers: {

3
project/frontend/src/components/UploadPage.tsx
View File

@ -5,6 +5,7 @@ import { useCallback, useEffect, useState } from "react";
import FileUpload from "react-material-file-upload";
import { socket } from "../socket";
import { CircularProgressWithLabel } from "./CircularProgressWithLabel";
import { API_HOST } from "../util/api";
const PROGRESS = true;
@ -18,7 +19,7 @@ export default function UploadPage() {
const uploadFile = useCallback(async () => {
const formData = new FormData();
formData.append("file", files[0]);
const response = await fetch("http://localhost:5050/api/pitch_book", {
const response = await fetch(`${API_HOST}/api/pitch_book`, {
method: "POST",
body: formData,
});

3
project/frontend/src/components/pdfViewer.tsx
View File

@ -11,6 +11,7 @@ import type {
} from "node_modules/react-pdf/dist/esm/shared/types";
import { socket } from "../socket";
import { highlightPattern } from "../util/highlighting";
import { API_HOST } from "../util/api";
interface PDFViewerProps {
pitchBookId: string;
@ -172,7 +173,7 @@ export default function PDFViewer({
>
<Document
key={pdfKey}
file={`http://localhost:5050/api/pitch_book/${pitchBookId}/download`}
file={`${API_HOST}/api/pitch_book/${pitchBookId}/download`}
onLoadSuccess={onDocumentLoadSuccess}
onLoadError={(error) =>
console.error("Es gab ein Fehler beim Laden des PDFs:", error)

5
project/frontend/src/routes/config-add.tsx
View File

@ -3,6 +3,7 @@ import { Box, Typography, IconButton } from "@mui/material";
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
import { KPIForm } from "../components/KPIForm";
import type { Kennzahl } from "../types/kpi";
import { API_HOST } from "../util/api";
export const Route = createFileRoute("/config-add")({
component: ConfigAddPage,
@ -13,7 +14,7 @@ function ConfigAddPage() {
const handleSave = async (formData: Partial<Kennzahl>) => {
try {
const existingKPIsResponse = await fetch('http://localhost:5050/api/kpi_setting/');
const existingKPIsResponse = await fetch(`${API_HOST}/api/kpi_setting/`);
const existingKPIs = await existingKPIsResponse.json();
const maxPosition = existingKPIs.length > 0
? Math.max(...existingKPIs.map((kpi: Kennzahl) => kpi.position))
@ -25,7 +26,7 @@ function ConfigAddPage() {
active: formData.active !== false
};
const response = await fetch('http://localhost:5050/api/kpi_setting/', {
const response = await fetch(`${API_HOST}/api/kpi_setting/`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',

5
project/frontend/src/routes/config-detail.$kpiId.tsx
View File

@ -6,6 +6,7 @@ import { useEffect, useState } from "react";
import type { Kennzahl } from "../types/kpi";
import { KPIForm } from "../components/KPIForm";
import { typeDisplayMapping } from "../types/kpi";
import { API_HOST } from "../util/api";
export const Route = createFileRoute("/config-detail/$kpiId")({
component: KPIDetailPage,
@ -23,7 +24,7 @@ function KPIDetailPage() {
const fetchKennzahl = async () => {
try {
setLoading(true);
const response = await fetch(`http://localhost:5050/api/kpi_setting/${kpiId}`);
const response = await fetch(`${API_HOST}/api/kpi_setting/${kpiId}`);
if (!response.ok) {
if (response.status === 404) {
setError('KPI not found');
@ -47,7 +48,7 @@ function KPIDetailPage() {
const handleSave = async (formData: Partial<Kennzahl>) => {
try {
const response = await fetch(`http://localhost:5050/api/kpi_setting/${kpiId}`, {
const response = await fetch(`${API_HOST}/api/kpi_setting/${kpiId}`, {
method: 'PUT',
headers: {
'Content-Type': 'application/json',

3
project/frontend/src/socket.ts
View File

@ -1,6 +1,7 @@
import { io } from "socket.io-client";
import { API_HOST } from "./util/api";
// "undefined" means the URL will be computed from the `window.location` object
// const URL = process.env.NODE_ENV === 'production' ? undefined : 'http://localhost:4000';
export const socket = io("http://localhost:5050");
export const socket = io(`${API_HOST}`);

10
project/frontend/src/util/api.ts
View File

@ -1,5 +1,9 @@
import type { Kennzahl } from "@/types/kpi";
const API_HOST = import.meta.env.VITE_API_HOST || 'http://localhost:5050';
export { API_HOST };
export const fetchKPI = async (
pitchBookId: string,
): Promise<{
@ -12,7 +16,7 @@ export const fetchKPI = async (
}[];
}> => {
const response = await fetch(
`http://localhost:5050/api/pitch_book/${pitchBookId}`,
`${API_HOST}/api/pitch_book/${pitchBookId}`,
);
const data = await response.json();
@ -43,7 +47,7 @@ export const fetchPutKPI = async (
formData.append("kpi", JSON.stringify(flattenKPIArray(kpi)));
const response = await fetch(
`http://localhost:5050/api/pitch_book/${pitchBookId}`,
`${API_HOST}/api/pitch_book/${pitchBookId}`,
{
method: "PUT",
body: formData,
@ -99,7 +103,7 @@ export const flattenKPIArray = (kpi: {
};
export const fetchKennzahlen = async (): Promise<Kennzahl[]> => {
const response = await fetch("http://localhost:5050/api/kpi_setting/");
const response = await fetch(`${API_HOST}/api/kpi_setting/`);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}