Frontend -> vite

Dockerfile

@@ -1,11 +1,11 @@
-FROM node:20-bullseye-slim AS frontend
+FROM node:18 AS frontend
 RUN mkdir /app
 WORKDIR /app
 ADD ./frontend/package.json .
 ADD ./frontend/yarn.lock .
 RUN yarn install --network-timeout 300000
 COPY ./frontend/ .
-RUN yarn build --production=true
+RUN yarn build
 
 
 #Building main conteiner

backend/app.py

@@ -10,6 +10,7 @@ from utils.sqlite import SQLite
 from utils import API_VERSION, FIREGEX_PORT, JWT_ALGORITHM, get_interfaces, refresh_frontend, DEBUG, SysctlManager
 from utils.loader import frontend_deploy, load_routers
 from utils.models import ChangePasswordModel, IpInterface, PasswordChangeForm, PasswordForm, ResetRequest, StatusModel, StatusMessageModel
+from fastapi.middleware.cors import CORSMiddleware
 
 # DB init
 db = SQLite('db/firegex.db')
@@ -155,6 +156,6 @@ if __name__ == '__main__':
         port=FIREGEX_PORT,
         reload=DEBUG,
         access_log=True,
-        workers=1 # Multiple workers will cause a crash due to the creation
+        workers=1, # Multiple workers will cause a crash due to the creation
                   # of multiple processes with separated memory
     )

backend/utils/loader.py

@@ -8,6 +8,7 @@ from starlette.responses import StreamingResponse
 from fastapi.responses import FileResponse
 from utils import DEBUG, ON_DOCKER, ROUTERS_DIR, list_files, run_func
 from utils.models import ResetRequest
+from fastapi.middleware.cors import CORSMiddleware
 
 REACT_BUILD_DIR: str = "../frontend/build/" if not ON_DOCKER else "frontend/"
 REACT_HTML_PATH: str = os.path.join(REACT_BUILD_DIR,"index.html")
@@ -27,21 +28,13 @@ async def react_deploy(path):
 
 def frontend_deploy(app):
     if DEBUG:
-        async def forward_websocket(ws_a, ws_b):
+        app.add_middleware(
-            while True:
+            CORSMiddleware,
-                data = await ws_a.receive_bytes()
+            allow_origins=["*"],
-                await ws_b.send(data)
+            allow_credentials=True,
-        async def reverse_websocket(ws_a, ws_b):
+            allow_methods=["*"],
-            while True:
+            allow_headers=["*"],
-                data = await ws_b.recv()
+        )
-                await ws_a.send_text(data)
-        @app.websocket("/")
-        async def websocket_debug_proxy(ws: WebSocket):
-            await ws.accept()
-            async with websockets.connect(f"ws://127.0.0.1:{os.getenv('F_PORT','5173')}/") as ws_b_client:
-                fwd_task = asyncio.create_task(forward_websocket(ws, ws_b_client))
-                rev_task = asyncio.create_task(reverse_websocket(ws, ws_b_client))
-                await asyncio.gather(fwd_task, rev_task)
 
     @app.get("/{full_path:path}", include_in_schema=False)
     async def catch_all(full_path:str):

frontend/src/App.tsx

@@ -5,7 +5,7 @@ import { ImCross } from 'react-icons/im';
 import { Outlet, Route, Routes } from 'react-router-dom';
 import MainLayout from './components/MainLayout';
 import { PasswordSend, ServerStatusResponse } from './js/models';
-import { errorNotify, fireUpdateRequest, getstatus, HomeRedirector, login, setpassword } from './js/utils';
+import { errorNotify, fireUpdateRequest, getstatus, HomeRedirector, IS_DEV, login, setpassword } from './js/utils';
 import NFRegex from './pages/NFRegex';
 import io from 'socket.io-client';
 import RegexProxy from './pages/RegexProxy';
@@ -13,7 +13,7 @@ import ServiceDetailsNFRegex from './pages/NFRegex/ServiceDetails';
 import ServiceDetailsProxyRegex from './pages/RegexProxy/ServiceDetails';
 import PortHijack from './pages/PortHijack';
 
-const socket = io({transports: ["websocket", "polling"], path:"/sock" });
+const socket = io({transports: ["websocket", "polling"], path:"/sock", host:IS_DEV?"127.0.0.1:4444":undefined });
 
 function App() {
 

frontend/src/js/utils.tsx

@@ -7,6 +7,7 @@ import { regexproxy } from "../components/RegexProxy/utils";
 import { ChangePassword, IpInterface, LoginResponse, PasswordSend, ServerResponse, ServerResponseToken, ServerStatusResponse } from "./models";
 import { Buffer } from "buffer"
 
+export const IS_DEV = import.meta.env.DEV
 
 export const eventUpdateName = "update-info"
 
@@ -18,7 +19,7 @@ export const regex_ipv4_no_cidr = "^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[
 export async function getapi(path:string):Promise<any>{
 
     return await new Promise((resolve, reject) => {
-        fetch(`/api/${path}`,{
+        fetch(`${IS_DEV?"http://127.0.0.1:4444":""}/api/${path}`,{
             credentials: "same-origin",
             headers: { "Authorization" : "Bearer " + window.localStorage.getItem("access_token")}
         }).then(res => {
@@ -34,7 +35,7 @@ export async function getapi(path:string):Promise<any>{
 
 export async function postapi(path:string,data:any,is_form:boolean=false):Promise<any>{
     return await new Promise((resolve, reject) => {
-        fetch(`/api/${path}`, {
+        fetch(`${IS_DEV?"http://127.0.0.1:4444":""}/api/${path}`, {
             method: 'POST',
             credentials: "same-origin",
             cache: 'no-cache',