feat: configure CORS and environment variables

- Added support for dynamic CORS origin configuration based on FRONTEND_URL from .env - Configured axios to use REACT_APP_BASE_URL from environment for API calls - Updated .gitignore to exclude .env files - Added .env.example template for environment variable documentation
mazzyy · Oct 26, 2024 · be1f9d3 · be1f9d3
1 parent 7290c6c
commit be1f9d3
Show file tree

Hide file tree

Showing 7 changed files with 33 additions and 10 deletions.
diff --git a/.github/workflows/GCP_Deploy.yml b/.github/workflows/GCP_Deploy.yml
@@ -67,8 +67,16 @@ jobs:
 
       - name: Deploy frontend to Cloud Run
         run: |
-          gcloud run deploy personal-gpt-gemini-toolkit \
+          gcloud run deploy devopsgeni-frontend \
             --image us-east1-docker.pkg.dev/${{ secrets.GCP_PROJECT_ID }}/devopsgeni/frontend:latest \
             --platform managed \
             --region us-central1 \
-            --allow-unauthenticated
+            --allow-unauthenticated
+
+      - name: Deploy frontend to Cloud Run
+        run: |
+          gcloud run deploy devopsgeni-baackend \
+            --image us-east1-docker.pkg.dev/${{ secrets.GCP_PROJECT_ID }}/devopsgeni/backend:latest \
+            --platform managed \
+            --region us-central1 \
+            --allow-unauthenticated    
diff --git a/backend/app/gitrepo.py b/backend/app/gitrepo.py
@@ -42,6 +42,7 @@ def fetch_folder_structure(owner: str, repo: str, path=""):
 @router.get("/analyze_repo", response_model=RepoAnalysis)
 async def analyze_repo(owner: str, repo: str):
     try:
+        print("testing")
         repo_url = f"https://api.github.com/repos/{owner}/{repo}"
         languages_url = f"{repo_url}/languages"
 

diff --git a/backend/app/main.py b/backend/app/main.py
@@ -12,11 +12,12 @@
 app = FastAPI()
 
 # print(os.getenv("GITHUB_PERSONAL_ACCESS_TOKEN"))
-
+# Allow origins, using environment variable
+origins = [os.getenv("FRONTEND_URL"), "http://localhost:3000"]
 app.add_middleware(
     CORSMiddleware,
     # allow_origins=["http://localhost:3000"],  # Adjust this if necessary
-    allow_origins=["https://frontend-184359031908.us-central1.run.app", "http://localhost:3000"],  # Adjust this if necessary
+    allow_origins=origins,  # Adjust this if necessary
     allow_credentials=True,
     allow_methods=["*"],
     allow_headers=["*"],
@@ -27,6 +28,12 @@
 app.include_router(ai_router)
 app.include_router(gitrepo_router)
 
+# if __name__ == "__main__":
+#     import uvicorn
+#     uvicorn.run(app, host="127.0.0.1", port=8000, log_level="info")
 if __name__ == "__main__":
-    import uvicorn
-    uvicorn.run(app, host="127.0.0.1", port=8000, log_level="info")
+    env = os.getenv("ENVIRONMENT", "development")
+    if env == "production":
+        uvicorn.run("main:app", host="0.0.0.0", port=8000, log_level="info")
+    else:
+        uvicorn.run("main:app", host="127.0.0.1", port=8000, log_level="debug", reload=True)
diff --git a/frontend/src/components/ConfigForm.js b/frontend/src/components/ConfigForm.js
@@ -103,7 +103,7 @@ const ConfigForm = () => {
   const handleSubmit = async (e) => {
     e.preventDefault();
     try {
-      const response = await axios.post('http://localhost:8000/generate', {
+      const response = await axios.post(`${process.env.REACT_APP_BASE_URL}/generate`, {
         repo_url: repoUrl,
         language,
         language_version: useCustomVersion ? customLanguageVersion : languageVersion,

diff --git a/frontend/src/components/GitHubCallback.js b/frontend/src/components/GitHubCallback.js
@@ -14,7 +14,7 @@ function GitHubCallback() {
   useEffect(() => {
     const code = query.get('code');
     if (code) {
-      axios.get(`https://backend-184359031908.us-central1.run.app/github/callback?code=${code}`)
+      axios.get(`${process.env.REACT_APP_BASE_URL}/github/callback?code=${code}`)
         .then(response => {
           setUserInfo(response.data.user_info);
         })

diff --git a/frontend/src/components/GitRepo.js b/frontend/src/components/GitRepo.js
@@ -18,12 +18,17 @@ function GitRepo() {
     // Debounced fetch function
     const fetchAnalysis = useCallback(
         debounce(async (owner, repo) => {
+
             if (owner && repo) {
                 setLoading(true); // Start loading
+                let url = `${process.env.REACT_APP_BASE_URL}/analyze_repo?owner=${owner}&repo=${repo}`;
+                console.log(url);
                 try {
+                    // console.log(process.env.REACT_APP_BASE_URL   /* .env.REACT_APP_BASE_URL */);
                     setError(null); // Reset previous errors
-                    const response = await axios.get(`https://backend-184359031908.us-central1.run.app/analyze_repo?owner=${owner}&repo=${repo}`);
+                    const response = await axios.get(`${process.env.REACT_APP_BASE_URL}/analyze_repo?owner=${owner}&repo=${repo}`);
                     setAnalysis(response.data);
+                    // console.log(url);
                 } catch (error) {
                     setAnalysis(null);
                     setError(error.response ? error.response.data.detail : 'Error analyzing repo');

diff --git a/frontend/src/components/Navbar.js b/frontend/src/components/Navbar.js
@@ -3,8 +3,9 @@ import '../styles/Navbar.css';
 
 const Navbar = () => {
   const handleLogin = () => {
-      window.location.href = 'http://localhost:8000/login';
+      window.location.href = '${process.env.REACT_APP_BASE_URL}/login';
     };
+
 
 
   return (
@@ -19,6 +20,7 @@ const Navbar = () => {
         <a href="#docker-automation">Docker Automation</a>
         <a href="#devops-options">Other DevOps Options</a>
         <a className='Float:right' href="/login" >login</a>
+        <a href="devops-options">Other DevOps Options</a>
         {/* <a className='Float:right' href="#devops-options" onClick={handleLogin}>login</a> */}
       </nav>
     </div>