Expose chat-app container to localhost for development

Author: Leo7Deng

backend/docker-compose.yml

@@ -108,6 +108,8 @@ services:
     container_name: chat-app
     networks:
       - backend-net
+    ports:
+      - "8000:8000"
     depends_on:
       - cassandra-node1
 

backend/main.go

@@ -112,8 +112,8 @@ func main() {
 	mux.HandleFunc("/refresh", middleware.AddCorsHeaders(auth.RefreshAccessTokenHandler))
 
 	go func() {
-		log.Println("Starting HTTPS server on https://127.0.0.1:8000")
-		log.Fatal(srv.ListenAndServeTLS("full-cert.crt", "private-key.key"))
+		// log.Fatal(srv.ListenAndServeTLS("full-cert.crt", "private-key.key"))
+		log.Fatal(srv.ListenAndServe())
 	}()
 
 	wg.Wait()

frontend/app/components/CreateCircleModal.tsx

@@ -23,7 +23,7 @@ function CreateCircleModal({ isOpen, setOpen }: CreateCircleModalProps) {
             name: circleName
         };
         const token = await getAccessToken();
-        fetch('https://127.0.0.1:8000/api/circles', {
+        fetch('http://localhost:8000/api/circles', {
             method: 'POST',
             headers: {
                 'Authorization': `Bearer ${token}`,

frontend/app/components/InviteModal.tsx

@@ -26,7 +26,7 @@ function InviteModal({ isOpen, setOpen, circleId }: InviteModalProps) {
             const body = {
                 circle_id: circleId,
             };
-            fetch('https://127.0.0.1:8000/api/circles/invite', {
+            fetch('http://localhost:8000/api/circles/invite', {
                 method: 'POST',
                 headers: headers,
                 body: JSON.stringify(body),
@@ -76,7 +76,7 @@ function InviteModal({ isOpen, setOpen, circleId }: InviteModalProps) {
             users: invitedUsers,
         };
         console.log(body);
-        fetch('https://127.0.0.1:8000/api/circles/invite/add', {
+        fetch('http://localhost:8000/api/circles/invite/add', {
             method: 'POST',
             headers: headers,
             body: JSON.stringify(body),

frontend/app/components/Login.tsx

@@ -18,11 +18,12 @@ export default function Login() {
         if (validator.isEmail(loginData.email) &&
             loginData.password !== ""
         ) {
-            fetch('https://127.0.0.1:8000/api/login', {
+            fetch('http://localhost:8000/api/login', {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json'
                 },
+                credentials: 'include',
                 body: JSON.stringify(loginData),
             })
                 .then(response => response.json())

frontend/app/components/Register.tsx

@@ -37,11 +37,12 @@ export default function Register() {
             validator.isEmail(registerData.email) &&
             passwordMatch == false
         ) {
-            fetch('https://127.0.0.1:8000/api/register', {
+            fetch('http://localhost:8000/api/register', {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json'
                 },
+                credentials: 'include',
                 body: JSON.stringify(registerData),
             })
                 .then(async (response) => {

frontend/app/context/authContext.tsx

@@ -29,7 +29,7 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
 
     async function refreshAccessToken(): Promise<string> {
         try {
-            const response = await fetch("https://127.0.0.1:8000/refresh", {
+            const response = await fetch("http://localhost:8000/refresh", {
                 method: "POST",
                 credentials: "include",
             });

frontend/app/hooks/useFetchDashboard.tsx

@@ -18,7 +18,7 @@ export function useFetchDashboard(setCircles: React.Dispatch<React.SetStateActio
         const headers = {
             "Authorization": `Bearer ${token}`,
         };
-        fetch('https://127.0.0.1:8000/api/user', {
+        fetch('http://localhost:8000/api/user', {
             method: 'GET',
             headers: headers,
         })
@@ -44,7 +44,7 @@ export function useFetchDashboard(setCircles: React.Dispatch<React.SetStateActio
         const headers = {
             "Authorization": `Bearer ${token}`,
         };
-        fetch('https://127.0.0.1:8000/api/circles', {
+        fetch('http://localhost:8000/api/circles', {
             method: 'GET',
             headers: headers,
         })
@@ -77,7 +77,7 @@ export function useFetchDashboard(setCircles: React.Dispatch<React.SetStateActio
     async function handleDelete(circleID: string) {
         const token = await getAccessToken();
         try {
-            const response = await fetch(`https://127.0.0.1:8000/api/circles/delete/${circleID}`, {
+            const response = await fetch(`http://localhost:8000/api/circles/delete/${circleID}`, {
                 method: 'DELETE',
                 headers: {
                     "Authorization": `Bearer ${token}`,