auto reload

Author: gildesmarais

bin/dev-with-frontend

@@ -15,7 +15,8 @@ export RACK_ENV=${RACK_ENV:-development}
 echo "Starting html2rss-web development environment..."
 echo "Environment: $RACK_ENV"
 echo "Ruby server: http://localhost:3000"
-echo "Astro dev server: http://localhost:4321"
+echo "Astro dev server: http://localhost:4321 (with live reload)"
+echo "Main development URL: http://localhost:4321"
 echo ""
 
 # Function to cleanup background processes
@@ -24,8 +25,10 @@ cleanup() {
   echo "Shutting down servers..."
   kill $RUBY_PID 2>/dev/null || true
   kill $ASTRO_PID 2>/dev/null || true
+  kill $WATCHER_PID 2>/dev/null || true
   wait $RUBY_PID 2>/dev/null || true
   wait $ASTRO_PID 2>/dev/null || true
+  wait $WATCHER_PID 2>/dev/null || true
   echo "Servers stopped."
   exit 0
 }
@@ -41,9 +44,11 @@ RUBY_PID=$!
 # Wait a moment for Ruby server to start
 sleep 3
 
-# Start Astro dev server
-echo "Starting Astro dev server..."
+# Start Astro dev server with API proxy
+echo "Starting Astro dev server with API proxy..."
 cd frontend
+
+# Start Astro dev server (it will proxy API calls to Ruby server)
 npm run dev &
 ASTRO_PID=$!
 

frontend/astro.config.mjs

@@ -11,6 +11,20 @@ export default defineConfig({
       watch: {
         usePolling: true,
       },
+      proxy: {
+        '/api': {
+          target: 'http://localhost:3000',
+          changeOrigin: true,
+        },
+        '/auto_source': {
+          target: 'http://localhost:3000',
+          changeOrigin: true,
+        },
+        '/health_check.txt': {
+          target: 'http://localhost:3000',
+          changeOrigin: true,
+        },
+      },
     },
   },
 })

frontend/src/pages/auto-source.astro

@@ -99,7 +99,7 @@ import Layout from "../layouts/Layout.astro"
     try {
       // Encode URL for API
       const encodedUrl = btoa(url)
-      const apiUrl = `http://localhost:3000/auto_source/${encodedUrl}?strategy=${strategy}`
+      const apiUrl = `/auto_source/${encodedUrl}?strategy=${strategy}`
 
       // Show result area
       const resultArea = document.getElementById("result")

frontend/src/pages/gallery.astro

@@ -4,8 +4,7 @@ import Layout from "../layouts/Layout.astro"
 // Fetch available feeds from API
 let feeds = []
 try {
-  const baseUrl = Astro.url.origin
-  const response = await fetch(`${baseUrl}/api/feeds.json`)
+  const response = await fetch('/api/feeds.json')
   if (response.ok) {
     feeds = await response.json()
   }

frontend/src/pages/index.astro

@@ -4,8 +4,7 @@ import Layout from "../layouts/Layout.astro"
 // Fetch available feeds from Ruby backend
 let feeds = []
 try {
-  const backendUrl = "http://localhost:3000"
-  const response = await fetch(`${backendUrl}/api/feeds.json`)
+  const response = await fetch('/api/feeds.json')
   if (response.ok) {
     feeds = await response.json()
   }
@@ -18,7 +17,7 @@ try {
   <div class="hero">
     <h2>Convert websites to RSS feeds</h2>
     <p>Transform any website into a structured RSS feed instantly</p>
-    <a href="http://localhost:3000/api/example" class="btn" aria-describedby="example-desc"
+    <a href="/api/example" class="btn" aria-describedby="example-desc"
       >Try Example Feed</a
     >
     <p id="example-desc" class="sr-only">Opens the example RSS feed in a new tab</p>
@@ -49,11 +48,11 @@ try {
             <div class="feed-item" role="listitem">
               <h4>{feed.name}</h4>
               <p>{feed.description}</p>
-              <a
-                href={`http://localhost:3000${feed.url}`}
-                class="feed-link"
-                aria-label={`Subscribe to ${feed.name} RSS feed`}
-              >
+               <a
+                 href={feed.url}
+                 class="feed-link"
+                 aria-label={`Subscribe to ${feed.name} RSS feed`}
+               >
                 Subscribe
               </a>
             </div>