Starting a project

Exploring the boiler plate and setup differences between JavaScript and Python projects.

Starting a JavaScript project versus a Python project involves completely different workflows, ecosystems, and environments.The primary difference is where the code runs: JavaScript is built natively for the web browser, while Python is designed to run directly on your computer's operating system. The syntax and libraries used are also different, with JavaScript being more commonly used for web development while Python is more popular in data science and machine learning applications.

Project Initialization & Setup

The Best Order for a Python Project with UV

1. uv init [projectName] () (Create the project directory .gitignore file and pyproject.toml (similar to package.json) and readme.md)
2. cd [projectName] (Change to the project directory)
3. code . (Open in VS Code NOW)
4. uv run python (create the project's virtual environment if it doesn't already exist and lets you type python code and run it in the virtual environment)
5. exit() exits interactive Python session
6. uv add[package-name]similar to npm install - adds a package as a dependency to your project : Find your pyproject.toml, Create .venv if needed, Install requests into that project's virtual environment,Update your project's dependency definitions
7. uv add[package-name] --dev adds package to development dependencies instead of regular dependencies
8. uv remove[package-name] removes a package from the project
9. uv run pythonmain.py runs the main Python file
10. uv add --dev ruff adds the ruff linter to the project
11. uv run ruff check main.py runs the linter on the main Python file and shows any errors it finds any
12. uv run ruff format main.py runs the linter on the main Python file and formats it according to PEP 8 standards.
13. uv run ruff check --fix main.py fixes any errors it finds

The Best Order for a Python Project without UV

1. mkdir [projectName] () (Create the project directory)
2. cd [projectName] (Change to the project directory)
3. python3 -m venv .venv (Create the virtual environment)
4. code . (Open in VS Code NOW)
5. touch main.py requirements.txt README.md (Create boilerplate)
6. source .venv/bin/activate (Activate environment)

The VS Code Trick

you open VS Code immediately after creating the .venv folder, VS Code's Python extension will automatically notice the environment.It will pop up a small notification in the bottom right corner asking: "We noticed a new virtual environment. Would you like to select it for the workspace?"If you click Yes:VS Code will configure itself to use that environment automatically.Every time you open a new integrated terminal inside VS Code, it will automatically run source .venv/bin/activate for you. You won't have to type it manually anymore.

Manual setup

If you miss the popup, you can manually point VS Code to your environment in two seconds:Open a Python file (like app.py).Look at the bottom right corner of the VS Code window status bar. You will see the Python version (e.g., 3.11.x).Click on that version number.A menu will drop down at the top of the screen. Select the option that says .venv (venv).Once selected, VS Code handles the activation in the background every time you open the editor workspace.

Flask

If you know Express.js from the Node.js world, Flask is exactly the same thing. Out of the box, it does not include database systems, form validation, or authentication. It gives you the bare minimum tools to route incoming web requests, parse JSON data, and return HTTP responses.

//app.py
    
from flask import Flask, jsonify

# 1. Initialize the Flask application
app = Flask(__name__)

# 2. Define a basic route (Like app.get() in Express)
@app.route("/api/hello", methods=["GET"])
def hello_world():
    # Returns a JSON response (Like res.json() in Express)
    return jsonify({
        "message": "Hello from the Python Flask backend!",
        "status": "success"
    })

# 3. Start the local server
if __name__ == "__main__":
    # Runs the app on http://127.0.0
    # debug=True automatically restarts the server when you change files (like nodemon)
    app.run(port=5000, debug=True)

How to Run It

Make sure your virtual environment is active in your VS Code terminal ((.venv) should be visible).

1. Install Flask inside your environment:pip install flask
2. Run your application script:python app.py

CORS package and why you need it

If you try to fetch this data from your React app right now, your browser will block it. Remember fighting the cors error in your React app? Well this package is used to solve this problem, right before you even have to thin about it!

1. Make sure your virtual environment is active in your terminal, then run. To install it, run this command: pip install flask-cors
2. in app.py Import the package and wrap your app with it. Here is your updated boilerplate code:

   from flask import Flask, jsonify
   from flask_cors import CORS  # 1. Import CORS
   
   app = Flask(__name__)
   CORS(app)  # 2. Allow all origins (Like app.use(cors()) in Express)
   
   # Alternatively, restrict it to just your React app port:
   # CORS(app, resources={r"/api/*": {"origins": "http://localhost:5173"}})
   
   @app.route("/api/hello", methods=["GET"])
   def hello_world():
       return jsonify({
           "message": "Hello from the Python Flask backend!",
           "status": "success"
       })
   
   if __name__ == "__main__":
       app.run(port=5000, debug=True)
   

How to fetch it in React

    // Inside a React component useEffect or event handler
const response = await fetch('http://127.0.0');
const data = await response.json();
console.log(data.message); // "Hello from the Python Flask backend!"

Save installed packages to a requirements.txt file

    pip freeze > requirements.txt

How to install all the packages from a requirements.txt file

    pip install -r requirements.txt

The React Project Workflow in Order

1. mkdir [projectName] (Create your project root folder)
2. cd [projectName] (Change directory into it)
3. npm create vite@latest . -- --template react => What this does: This command creates a new React project with Vite as the build tool. It also sets up a basic configuration for VS Code to work with it.
4. code . (Open the folder in VS Code now)
5. npm install (Run this inside your VS Code terminal) => What this does: This reads the newly created package.json file and downloads the core React packages into a local node_modules folder.
6. npm run dev (Start your local frontend development server)