Added .env for a baseUrl and applied that to all calls to the backend

Author: Daan0709

src/main/frontend/.env

@@ -0,0 +1 @@
+VITE_API_BASE_URL=/

src/main/frontend/.env.development

@@ -0,0 +1 @@
+VITE_API_BASE_URL=/

src/main/frontend/.env.production

@@ -0,0 +1,2 @@
+# Change to actual production API URL
+VITE_API_BASE_URL=https://api.wearefrank.com/

src/main/frontend/app/routes/configurations/add-configuration-modal.tsx

@@ -19,10 +19,12 @@ export default function AddConfigurationModal({
   const [error, setError] = useState<string | null>(null)
   const [filename, setFilename] = useState<string>('')
   const setProject = useProjectStore((s) => s.setProject)
+  const baseUrl = import.meta.env.VITE_API_BASE_URL
 
   const handleAdd = async () => {
     setLoading(true)
     setError(null)
+
     try {
       let configname = filename.trim()
       if (!configname) {
@@ -35,7 +37,10 @@ export default function AddConfigurationModal({
         configname = `${configname}.xml`
       }
 
-      const url = `http://localhost:8080/projects/${encodeURIComponent(currentProject.name)}/configurations/${encodeURIComponent(configname)}`
+      const url = `${baseUrl}projects/${encodeURIComponent(
+        currentProject.name,
+      )}/configurations/${encodeURIComponent(configname)}`
+
       const response = await fetch(url, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
@@ -66,9 +71,12 @@ export default function AddConfigurationModal({
         <p className="mb-4">Add a new configuration file.</p>
 
         <div className="mb-4 flex items-center gap-2">
-          <label className="text-sm font-medium">Filename</label>
+          <label className="text-sm font-medium" htmlFor="configuration-filename-input">
+            Filename
+          </label>
           <div className="ml-2 flex w-full items-center">
             <input
+              id="configuration-filename-input"
               value={filename}
               onChange={(event) => setFilename(event.target.value)}
               className="border-border bg-background focus:border-foreground-active focus:ring-foreground-active w-full rounded border px-2 py-1 text-sm transition focus:ring-2 focus:outline-none"

src/main/frontend/app/routes/configurations/add-configuration-tile.tsx

@@ -7,9 +7,8 @@ export default function AddConfigurationTile({ onClick }: Readonly<AddConfigurat
     <div
       className="border-border hover:bg-backdrop hover:text-foreground-active relative m-2 h-50 w-40 cursor-pointer rounded border p-4"
       onClick={onClick}
+      title="New Configuration"
     >
-      {/* top-left label */}
-
       {/* big plus centered */}
       <div className="absolute inset-0 flex items-center justify-center">
         <span className="text-4xl leading-none font-extrabold">+</span>

src/main/frontend/app/routes/editor/editor.tsx

@@ -25,6 +25,7 @@ export default function CodeEditor() {
   const editorReference = useRef<Parameters<OnMount>[0] | null>(null)
   const decorationIdsReference = useRef<string[]>([])
   const [isSaving, setIsSaving] = useState(false)
+  const baseUrl = import.meta.env.VITE_API_BASE_URL
 
   const handleEditorMount: OnMount = (editor, monacoInstance) => {
     editorReference.current = editor
@@ -237,7 +238,8 @@ export default function CodeEditor() {
     setIsSaving(true)
 
     try {
-      const response = await fetch(`/projects/${project.name}/${configName}`, {
+      const url = `${baseUrl}projects/${project.name}/${configName}`
+      const response = await fetch(url, {
         method: 'PUT',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ xmlContent: updatedXml }),

src/main/frontend/app/routes/projectlanding/project-landing.tsx

@@ -22,11 +22,12 @@ export default function ProjectLanding() {
   const [showModal, setShowModal] = useState(false)
   const setProject = useProjectStore((state) => state.setProject)
   const location = useLocation()
+  const baseUrl = import.meta.env.VITE_API_BASE_URL
 
   useEffect(() => {
     const fetchProjects = async () => {
       try {
-        const response = await fetch('http://localhost:8080/projects')
+        const response = await fetch(`${baseUrl}projects`)
         if (!response.ok) {
           throw new Error(`HTTP error! Status: ${response.status}`)
         }
@@ -49,7 +50,7 @@ export default function ProjectLanding() {
 
   const createProject = async (projectName: string) => {
     try {
-      const response = await fetch(`http://localhost:8080/projects/${projectName}`, {
+      const response = await fetch(`${baseUrl}projects/${projectName}`, {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',

src/main/frontend/app/routes/studio/canvas/flow.tsx

@@ -30,6 +30,7 @@ import CreateNodeModal from '~/components/flow/create-node-modal'
 import { useProjectStore } from '~/stores/project-store'
 import { toast, ToastContainer } from 'react-toastify'
 import { useTheme } from '~/hooks/use-theme'
+const baseUrl = import.meta.env.VITE_API_BASE_URL
 
 export type FlowNode = FrankNode | ExitNode | StickyNote | GroupNode | Node
 
@@ -513,20 +514,18 @@ function FlowCanvas({ showNodeContextMenu }: Readonly<{ showNodeContextMenu: (b:
 
     try {
       if (!project) return
-      const response = await fetch(
-      `/projects/${encodeURIComponent(project.name)}/${encodeURIComponent(configName)}/adapters/${encodeURIComponent(activeTabName)}`,
-      {
+      const url = `/projects/${encodeURIComponent(project.name)}/${encodeURIComponent(configName)}/adapters/${encodeURIComponent(activeTabName)}`
+      const response = await fetch(url, {
         method: 'PUT',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ adapterXml: xmlString }),
-      }
-    )
+      })
 
-    if (!response.ok) {
-      throw new Error(`HTTP error! Status: ${response.status}`)
-    }
+      if (!response.ok) {
+        throw new Error(`HTTP error! Status: ${response.status}`)
+      }
 
-    toast.success('Flow saved successfully!')
+      toast.success('Flow saved successfully!')
     } catch (error) {
       console.error('Failed to save XML:', error)
       toast.error(`Failed to save XML: ${error}`)