WEB DEV

Appearance

🚀 Fullstack JS + React + Flask Setup Guide 2025 ​

Welcome to your full-stack development journey! This guide walks you through setting up a complete environment for JavaScript, React 19, SQL, Python, and Flask development across Windows, Linux, and macOS.

💻 Minimum Hardware Requirements ​

WARNING

Purpose: Ensure smooth coding, running local servers, and tooling.

  • 🖥️ Processor: Intel Core i5/AMD Ryzen 5/Apple M1 or better
  • 🧠 RAM: Minimum 8GB (16GB recommended)
  • 💾 Storage: SSD with at least 256GB free
  • 🖼️ Display: Full HD (1920x1080) or higher
  • 🌐 Internet: Required for package installations, Git operations, and documentation access

🍫 Windows Setup: Chocolatey + Git Bash + Tools ​

Install Chocolatey from: https://chocolatey.org/install

powershell
choco install git -y
choco install nodejs-lts -y
choco install python -y
choco install docker-desktop -y
choco install postgresql -y
  • Set Git Bash as default terminal in VS Code
  • Restart and verify installations

🪛 Optional: WSL2 + Ubuntu Setup (Windows Only) ​

For advanced CLI workflows:

powershell
wsl --install -d Ubuntu

🌐 Git + GitHub Setup ​

SSH Key Setup ​

bash
# Generate the SSH key
ssh-keygen -t ed25519 -C "your.email@example.com"

# Start the SSH agent
eval "$(ssh-agent -s)"

# Add the key to the agent
ssh-add ~/.ssh/id_ed25519

# Copy the public key to clipboard
cat ~/.ssh/id_ed25519.pub | clip
bash
# Generate the SSH key
ssh-keygen -t ed25519 -C "your.email@example.com"

# Start the SSH agent
eval "$(ssh-agent -s)"

# Add the key to the agent
ssh-add ~/.ssh/id_ed25519

# Copy the public key to clipboard
cat ~/.ssh/id_ed25519.pub | pbcopy
bash
# Generate the SSH key
ssh-keygen -t ed25519 -C "your.email@example.com"

# Start the SSH agent
eval "$(ssh-agent -s)"

# Add the key to the agent
ssh-add ~/.ssh/id_ed25519

# Copy the public key to clipboard (requires xclip)
cat ~/.ssh/id_ed25519.pub | xclip -selection clipboard

Adding SSH Key to GitHub ​

  1. Go to GitHub Settings > SSH and GPG keys
  2. Click "New SSH key"
  3. Add a descriptive title (e.g., "Personal Laptop")
  4. Paste your copied public key into the "Key" field
  5. Click "Add SSH key"
  6. Verify with your GitHub password if prompted

🖋️ Optional: Fira Code Font ​

🧩 VS Code Installation & Extensions ​

Download: https://code.visualstudio.com/

Install these extensions:

bash
code --install-extension esbenp.prettier-vscode \
     --install-extension ms-python.python \
     --install-extension eamodio.gitlens \
     --install-extension ms-toolsai.jupyter \
     --install-extension humao.rest-client \
     --install-extension ms-azuretools.vscode-docker \
     --install-extension mtxr.sqltools \
     --install-extension charliermarsh.ruff

⚙️ VS Code Optional Settings (.vscode/settings.json) ​

json
{
  "editor.fontFamily": "Fira Code, Consolas, 'Courier New', monospace",
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[python]": {
    "editor.defaultFormatter": "charliermarsh.ruff"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "terminal.integrated.defaultProfile.windows": "Git Bash",
  "python.formatting.provider": "none"
}

📦 Node.js Setup ​

powershell
choco install nodejs-lts -y
bash
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash
nvm install --lts
bash
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash
nvm install --lts

🛠️ React + Vite Project Setup ​

bash
npm create vite@latest my-app --template react
cd my-app
npm install
npm run dev
bash
npm create vite@latest my-app --template react
cd my-app
npm install
npm run dev
bash
npm create vite@latest my-app --template react
cd my-app
npm install
npm run dev

The React app will be available at http://localhost:5173

🐍 Python + uv Setup ​

Install uv:

powershell
irm https://astral.sh/uv/install.ps1 | iex
bash
curl -LsSf https://astral.sh/uv/install.sh | sh
bash
curl -LsSf https://astral.sh/uv/install.sh | sh

Create environment:

bash
uv venv
.venv\Scripts\activate
uv pip install flask flask-cors flask-sqlalchemy flask-restful marshmallow flask-jwt-extended python-dotenv ruff
bash
uv venv
source .venv/bin/activate
uv pip install flask flask-cors flask-sqlalchemy flask-restful marshmallow flask-jwt-extended python-dotenv ruff
bash
uv venv
source .venv/bin/activate
uv pip install flask flask-cors flask-sqlalchemy flask-restful marshmallow flask-jwt-extended python-dotenv ruff

🐘 PostgreSQL Setup ​

powershell
choco install postgresql -y
bash
brew install postgresql
bash
sudo apt update && sudo apt install postgresql postgresql-contrib

Or via Docker:

bash
docker run --name pg-local -e POSTGRES_PASSWORD=devpass -p 5432:5432 -d postgres

🐳 Docker Setup ​

powershell
# Docker Desktop: https://www.docker.com/products/docker-desktop
bash
# Docker Desktop: https://www.docker.com/products/docker-desktop
bash
sudo apt install docker-ce docker-ce-cli containerd.io

🧪 Postman Setup ​

🛠️ Project Bootstrap ​

Flask Backend ​

bash
mkdir flask-backend && cd flask-backend
uv venv
.venv\Scripts\activate
uv pip install flask flask-cors flask-sqlalchemy flask-restful marshmallow flask-jwt-extended python-dotenv ruff
bash
mkdir flask-backend && cd flask-backend
uv venv
source .venv/bin/activate
uv pip install flask flask-cors flask-sqlalchemy flask-restful marshmallow flask-jwt-extended python-dotenv ruff
bash
mkdir flask-backend && cd flask-backend
uv venv
source .venv/bin/activate
uv pip install flask flask-cors flask-sqlalchemy flask-restful marshmallow flask-jwt-extended python-dotenv ruff

✅ Final Checks ​

bash
git --version
node -v && npm -v
python --version
uv --version
psql --version
docker --version
bash
git --version
node -v && npm -v
python --version
uv --version
psql --version
docker --version
bash
git --version
node -v && npm -v
python --version
uv --version
psql --version
docker --version

Run servers:

bash
# React
cd my-app
npm run dev

# Flask
set FLASK_APP=app.py
set FLASK_ENV=development
flask run
bash
# React
cd my-app
npm run dev

# Flask
export FLASK_APP=app.py
export FLASK_ENV=development
flask run
bash
# React
cd my-app
npm run dev

# Flask
export FLASK_APP=app.py
export FLASK_ENV=development
flask run

🎓 You're Ready! ​

You now have a fully configured environment for modern full-stack development — happy shipping! 🚀

Copyright © 2024-present Ragav Kumar V. All rights reserved.