143 lines
3.7 KiB
Markdown
143 lines
3.7 KiB
Markdown
# interactive_map
|
|
|
|
Interactive Map, upload a image of a map. Add points to it and draw to it. Have information about the object in a table.
|
|
|
|
# Flask + React Hello World Application
|
|
|
|
This is a simple Hello World application that demonstrates how to set up a Flask backend with a React frontend.
|
|
|
|
## Prerequisites
|
|
|
|
Before you begin, ensure you have the following installed:
|
|
- Python 3.7 or higher
|
|
- Node.js and npm (Node Package Manager)
|
|
- Git
|
|
|
|
## Project Structure
|
|
|
|
```
|
|
flask-react-hello/
|
|
├── backend/
|
|
│ ├── venv/
|
|
│ ├── app.py
|
|
│ └── requirements.txt
|
|
└── frontend/
|
|
├── node_modules/
|
|
├── public/
|
|
├── src/
|
|
└── package.json
|
|
```
|
|
|
|
## Setting Up the Backend (Flask)
|
|
|
|
1. Create and activate a virtual environment:
|
|
```bash
|
|
# Windows
|
|
cd backend
|
|
python -m venv venv
|
|
.\venv\Scripts\activate
|
|
|
|
# macOS/Linux
|
|
cd backend
|
|
python -m venv venv
|
|
source venv/bin/activate
|
|
```
|
|
|
|
> **Note**: A virtual environment (venv) is a tool that helps you create an isolated environment for Python projects. This means each project can have its own dependencies, regardless of what dependencies every other project has.
|
|
|
|
2. Install the required dependencies:
|
|
```bash
|
|
pip install -r requirements.txt
|
|
```
|
|
|
|
> **Note**: requirements.txt contains all the Python packages needed for the backend. If you're setting up the project for the first time, you can create this file using `pip freeze > requirements.txt` after installing the dependencies.
|
|
|
|
3. Start the Flask server:
|
|
```bash
|
|
python app.py
|
|
```
|
|
|
|
The backend will be available at `http://localhost:5000`
|
|
|
|
## Setting Up the Frontend (React)
|
|
|
|
1. Install dependencies:
|
|
```bash
|
|
cd frontend
|
|
npm install
|
|
```
|
|
|
|
> **Note**: This will install all dependencies listed in package.json. The node_modules/ directory will be created containing all required packages.
|
|
|
|
2. Start the React development server:
|
|
```bash
|
|
npm start
|
|
```
|
|
|
|
The frontend will be available at `http://localhost:3000`
|
|
|
|
## Running the Complete Application
|
|
|
|
1. Start the backend server (in one terminal):
|
|
```bash
|
|
cd backend
|
|
# Windows
|
|
.\venv\Scripts\activate
|
|
# macOS/Linux
|
|
source venv/bin/activate
|
|
python app.py
|
|
```
|
|
|
|
2. Start the frontend development server (in another terminal):
|
|
```bash
|
|
cd frontend
|
|
npm start
|
|
```
|
|
|
|
3. Visit `http://localhost:3000` in your browser to see the application running.
|
|
|
|
## Common Issues and Solutions
|
|
|
|
### Backend Issues
|
|
|
|
- **Missing requirements.txt**: If the file is missing, you can recreate it:
|
|
```bash
|
|
pip freeze > requirements.txt
|
|
```
|
|
|
|
- **Port already in use**: If port 5000 is busy, modify the port in `app.py`:
|
|
```python
|
|
if __name__ == '__main__':
|
|
app.run(debug=True, port=5001) # Change to any available port
|
|
```
|
|
|
|
### Frontend Issues
|
|
|
|
- **Node modules missing**: If node_modules is missing or corrupted:
|
|
```bash
|
|
rm -rf node_modules # Delete existing node_modules
|
|
npm install # Reinstall dependencies
|
|
```
|
|
|
|
- **Port conflict**: If port 3000 is in use, React will automatically suggest using a different port.
|
|
|
|
## Development Notes
|
|
|
|
- The backend uses Flask-CORS to handle Cross-Origin Resource Sharing, allowing the frontend to make requests to the backend.
|
|
- The frontend uses the Fetch API to make requests to the backend.
|
|
- Both servers need to be running simultaneously for the application to work.
|
|
|
|
## Environment Variables
|
|
|
|
Create a `.env` file in both the backend and frontend directories if you need to add any environment variables. Remember to never commit these files to version control.
|
|
|
|
Example backend/.env:
|
|
```
|
|
FLASK_ENV=development
|
|
DEBUG=True
|
|
```
|
|
|
|
Example frontend/.env:
|
|
```
|
|
REACT_APP_API_URL=http://localhost:5000
|
|
``` |