From 8614a0f76a3c7fd450054ea94e20ed9ff39350b8 Mon Sep 17 00:00:00 2001
From: Aryanta Putra <290991705+ARPL-F2@users.noreply.github.com>
Date: Thu, 11 Jun 2026 23:53:08 +0700
Subject: [PATCH] Update deployment configuration

---
 .gitignore     |  1 +
 backend/app.py |  6 +++++-
 src/App.jsx    | 18 ++++++++++--------
 src/user.jsx   |  9 +++++----
 4 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/.gitignore b/.gitignore
index a547bf3..f44318f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,6 +8,7 @@ pnpm-debug.log*
 lerna-debug.log*
 
 node_modules
+.env 
 dist
 dist-ssr
 *.local
diff --git a/backend/app.py b/backend/app.py
index d9e6a1c..e9be12f 100644
--- a/backend/app.py
+++ b/backend/app.py
@@ -318,4 +318,8 @@ def create_area():
     return jsonify(response)
 
 if __name__ == '__main__':
-    app.run(debug=True, port=5000)
\ No newline at end of file
+    app.run(
+        host='0.0.0.0',
+        port=5000,
+        debug=False
+    )
\ No newline at end of file
diff --git a/src/App.jsx b/src/App.jsx
index c1fe645..4006a0f 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -5,6 +5,8 @@ import 'leaflet/dist/leaflet.css';
 import markerIconPng from "leaflet/dist/images/marker-icon.png";
 import markerShadowPng from "leaflet/dist/images/marker-shadow.png";
 
+const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:5000';
+
 // Pengaturan Default Marker Objek
 const DefaultIcon = L.icon({
   iconUrl: markerIconPng,
@@ -105,7 +107,7 @@ function PendudukMiskinForm({ selectedLat, selectedLng, onSaveSuccess, onClose }
     };
 
     try {
-      const response = await fetch('http://localhost:5000/api/miskin/create', {
+      const response = await fetch(`${API_URL}/api/miskin/create`, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify(payload)
@@ -235,10 +237,10 @@ function App() {
   const [formIbadah, setFormIbadah] = useState({ nama: '', jenis: 'masjid', kontak: '', radius: 300 });
 
   const loadAllData = () => {
-    fetch('http://localhost:5000/api/jalan').then(res => res.json()).then(data => setDataJalan(data));
-    fetch('http://localhost:5000/api/area').then(res => res.json()).then(data => setDataArea(data));
-    fetch('http://localhost:5000/api/ibadah').then(res => res.json()).then(data => setDataIbadah(data));
-    fetch('http://localhost:5000/api/miskin').then(res => res.json()).then(data => setDataMiskin(data));
+    fetch(`${API_URL}/api/jalan`).then(res => res.json()).then(data => setDataJalan(data));
+    fetch(`${API_URL}/api/area`).then(res => res.json()).then(data => setDataArea(data));
+    fetch(`${API_URL}/api/ibadah`).then(res => res.json()).then(data => setDataIbadah(data));
+    fetch(`${API_URL}/api/miskin`).then(res => res.json()).then(data => setDataMiskin(data));
   };
 
   useEffect(() => { loadAllData(); }, []);
@@ -301,7 +303,7 @@ function App() {
 
   const submitJalanForm = (e) => {
     e.preventDefault();
-    fetch('http://localhost:5000/api/jalan/create', {
+    fetch(`${API_URL}/api/jalan/create`, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({ ...formJalan, coords: drawCoords })
@@ -316,7 +318,7 @@ function App() {
 
   const submitAreaForm = (e) => {
     e.preventDefault();
-    fetch('http://localhost:5000/api/area/create', {
+    fetch(`${API_URL}/api/area/create`, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({ ...formArea, coords: drawCoords })
@@ -331,7 +333,7 @@ function App() {
 
   const submitIbadahForm = (e) => {
     e.preventDefault();
-    fetch('http://localhost:5000/api/ibadah/create', {
+    fetch(`${API_URL}/api/ibadah/create`, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({ ...formIbadah, lat: drawCoords[0][0], lng: drawCoords[0][1] })
diff --git a/src/user.jsx b/src/user.jsx
index 3d8c988..c3ff4ca 100644
--- a/src/user.jsx
+++ b/src/user.jsx
@@ -4,6 +4,7 @@ import L from 'leaflet';
 import 'leaflet/dist/leaflet.css';
 import markerIconPng from "leaflet/dist/images/marker-icon.png";
 import markerShadowPng from "leaflet/dist/images/marker-shadow.png";
+const API_URL = import.meta.env.VITE_API_URL;
 
 // Setup Icons
 const DefaultIcon = L.icon({ iconUrl: markerIconPng, shadowUrl: markerShadowPng, iconSize: [25, 41], iconAnchor: [12, 41], popupAnchor: [1, -34] });
@@ -95,10 +96,10 @@ function User() {
   const [dataMiskin, setDataMiskin] = useState([]);
 
   useEffect(() => {
-    fetch('http://localhost:5000/api/jalan').then(res => res.json()).then(setDataJalan);
-    fetch('http://localhost:5000/api/area').then(res => res.json()).then(setDataArea);
-    fetch('http://localhost:5000/api/ibadah').then(res => res.json()).then(setDataIbadah);
-    fetch('http://localhost:5000/api/miskin').then(res => res.json()).then(setDataMiskin);
+    fetch(`${API_URL}/api/jalan`).then(res => res.json()).then(setDataJalan);
+    fetch(`${API_URL}/api/area`).then(res => res.json()).then(setDataArea);
+    fetch(`${API_URL}/api/ibadah`).then(res => res.json()).then(setDataIbadah);
+    fetch(`${API_URL}/api/miskin`).then(res => res.json()).then(setDataMiskin);
   }, []);
 
   return (