{"id":21589011,"url":"https://github.com/0prashantyadav0/python-javascript","last_synced_at":"2026-04-14T06:04:07.075Z","repository":{"id":227281066,"uuid":"770980724","full_name":"0PrashantYadav0/Python-Javascript","owner":"0PrashantYadav0","description":"This repo is base of how to connect python backend and javascript frontend.","archived":false,"fork":false,"pushed_at":"2024-03-12T17:34:28.000Z","size":50,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-18T09:47:19.758Z","etag":null,"topics":["base-project","connectivity","flask","js","python","react"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/0PrashantYadav0.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-03-12T13:34:38.000Z","updated_at":"2024-12-19T03:55:31.000Z","dependencies_parsed_at":"2024-11-24T16:12:16.787Z","dependency_job_id":"56b38fab-874e-4cd9-86ca-b76a28aa77d2","html_url":"https://github.com/0PrashantYadav0/Python-Javascript","commit_stats":null,"previous_names":["0prashantyadav0/python-javascript"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/0PrashantYadav0/Python-Javascript","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0PrashantYadav0%2FPython-Javascript","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0PrashantYadav0%2FPython-Javascript/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0PrashantYadav0%2FPython-Javascript/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0PrashantYadav0%2FPython-Javascript/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/0PrashantYadav0","download_url":"https://codeload.github.com/0PrashantYadav0/Python-Javascript/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0PrashantYadav0%2FPython-Javascript/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264780672,"owners_count":23662700,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["base-project","connectivity","flask","js","python","react"],"created_at":"2024-11-24T16:12:15.063Z","updated_at":"2026-04-14T06:04:07.037Z","avatar_url":"https://github.com/0PrashantYadav0.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Project Readme - Connecting Python Backend to JavaScript Frontend\n\nWelcome to this project! This readme will guide you through the basic steps to connect a Python backend to a JavaScript frontend using API calls. This project is designed to help you understand the fundamentals of integrating these two technologies.\n\n## Objective\nThe main goal of this project is to demonstrate how to create a simple API in Python using Flask, and then how to consume this API in a JavaScript frontend using fetch requests.\n\n### Prerequisites\nBefore you begin, make sure you have the following installed:\n\n- Python (3.x recommended)\n- Flask (Python library for building APIs)\n- Any text editor or IDE (like VSCode, Sublime Text, etc.)\n- Basic knowledge of Python and JavaScript\n\n### Getting Started\n1. **Clone the Repository**:\n   Clone this repository to your local machine:\n   ```bash\n   git clone https://github.com/0PrashantYadav0/Python-Javascript.git\n   ```\n\n2. **Navigate to the Project Directory**:\n   ```bash\n   cd your-repo\n   ```\n\n3. **Setup Python Virtual Environment** (optional but recommended):\n   It's a good practice to use virtual environments to manage dependencies.\n   ```bash\n   python3 -m venv venv\n   source venv/bin/activate  # For Linux/Mac\n   # Or for Windows\n   venv\\Scripts\\activate\n   ```\n\n4. **Install Flask**:\n   If you haven't installed Flask, you can do so using pip.\n   ```bash\n   pip install flask Flask-SQLAlchemy flask-cors\n   ```\n\n5. **Run the Python Backend**:\n   In the project directory, navigate to the `backend` folder:\n   ```bash\n   cd backend\n   ```\n\n   Run the Flask app:\n   ```bash\n   python app.py\n   ```\n   This will start the backend server at `http://localhost:5000`.\n\n6. **Understand the Backend**:\n   - The Flask app (`app.py`) has a simple API with one endpoint (`/api/data`) that returns some sample data in JSON format.\n   - This API endpoint is accessed using the URL `http://localhost:5000/api/data`.\n\n7. **Navigate to the Frontend**:\n   Now, let's switch to the frontend part of the project.\n   ```bash\n   cd ../frontend\n   ```\n\n8. **Open `index.html`**:\n   You'll see an `index.html` file which contains basic HTML and JavaScript.\n\n9. **Understand the Frontend**:\n   - In the JavaScript section of `index.html`, there is a function called `getData()` that makes a fetch request to the backend API (`http://localhost:5000/api/data`).\n   - When you open `index.html` in your browser, it will automatically trigger this function and display the data received from the backend.\n\n10. **Run the Frontend**:\n    You can simply open `index.html` in your browser:\n    ```\n    ./index.html\n    ```\n    This will load the frontend page and you should see the data fetched from the backend displayed on the page.\n\n### Important Notes\n- **CORS**: If you encounter CORS (Cross-Origin Resource Sharing) issues, you might need to handle it in the backend. For this basic setup, it's not a concern, but in real applications, you would need to address CORS.\n- **Security**: This is a basic example for learning purposes. In a production environment, you should implement proper security measures such as input validation, authentication, and authorization.\n- **Error Handling**: Error handling is minimal in this example. In a real-world scenario, you would want to handle errors gracefully both in the backend and frontend.\n\n### Conclusion\nCongratulations! You have successfully connected a Python backend to a JavaScript frontend using API calls. This project serves as a basic introduction to this concept, and there is much more to explore in both Flask and frontend frameworks like React, Angular, or Vue.js.\n\nIf you have any questions or feedback, feel free to reach out. Happy coding! 🚀","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F0prashantyadav0%2Fpython-javascript","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F0prashantyadav0%2Fpython-javascript","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F0prashantyadav0%2Fpython-javascript/lists"}