https://github.com/0prashantyadav0/python-javascript
This repo is base of how to connect python backend and javascript frontend.
https://github.com/0prashantyadav0/python-javascript
base-project connectivity flask js python react
Last synced: 2 months ago
JSON representation
This repo is base of how to connect python backend and javascript frontend.
- Host: GitHub
- URL: https://github.com/0prashantyadav0/python-javascript
- Owner: 0PrashantYadav0
- Created: 2024-03-12T13:34:38.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-03-12T17:34:28.000Z (over 2 years ago)
- Last Synced: 2025-03-18T09:47:19.758Z (over 1 year ago)
- Topics: base-project, connectivity, flask, js, python, react
- Language: JavaScript
- Homepage:
- Size: 48.8 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Project Readme - Connecting Python Backend to JavaScript Frontend
Welcome 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.
## Objective
The 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.
### Prerequisites
Before you begin, make sure you have the following installed:
- Python (3.x recommended)
- Flask (Python library for building APIs)
- Any text editor or IDE (like VSCode, Sublime Text, etc.)
- Basic knowledge of Python and JavaScript
### Getting Started
1. **Clone the Repository**:
Clone this repository to your local machine:
```bash
git clone https://github.com/0PrashantYadav0/Python-Javascript.git
```
2. **Navigate to the Project Directory**:
```bash
cd your-repo
```
3. **Setup Python Virtual Environment** (optional but recommended):
It's a good practice to use virtual environments to manage dependencies.
```bash
python3 -m venv venv
source venv/bin/activate # For Linux/Mac
# Or for Windows
venv\Scripts\activate
```
4. **Install Flask**:
If you haven't installed Flask, you can do so using pip.
```bash
pip install flask Flask-SQLAlchemy flask-cors
```
5. **Run the Python Backend**:
In the project directory, navigate to the `backend` folder:
```bash
cd backend
```
Run the Flask app:
```bash
python app.py
```
This will start the backend server at `http://localhost:5000`.
6. **Understand the Backend**:
- The Flask app (`app.py`) has a simple API with one endpoint (`/api/data`) that returns some sample data in JSON format.
- This API endpoint is accessed using the URL `http://localhost:5000/api/data`.
7. **Navigate to the Frontend**:
Now, let's switch to the frontend part of the project.
```bash
cd ../frontend
```
8. **Open `index.html`**:
You'll see an `index.html` file which contains basic HTML and JavaScript.
9. **Understand the Frontend**:
- 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`).
- When you open `index.html` in your browser, it will automatically trigger this function and display the data received from the backend.
10. **Run the Frontend**:
You can simply open `index.html` in your browser:
```
./index.html
```
This will load the frontend page and you should see the data fetched from the backend displayed on the page.
### Important Notes
- **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.
- **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.
- **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.
### Conclusion
Congratulations! 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.
If you have any questions or feedback, feel free to reach out. Happy coding! 🚀