March 23, 2025

Setting Up a Private GitHub Repository for a Flask-VueJS Project

Version control is essential for managing software projects efficiently. In this guide, we will walk through setting up a private GitHub repository, initializing a Flask-VueJS project, adding essential files, and defining an issue tracker for milestone tracking.

Step 1: Create a Private GitHub Repository

  1. Go to GitHub and log in.
  2. Click on the + (New) button in the top-right and select New repository.
  3. Enter a repository name (e.g., household-service-v2).
  4. Set visibility to Private.
  5. Click Create repository.

To clone it locally:

git clone https://github.com/YOUR_USERNAME/household-service-v2.git
cd household-service-v2

Step 2: Add a README.md File

A README file helps document your project. Create one:

echo "# Household Service v2\nA Flask-VueJS application for managing household services." > README.md

Commit and push:

git add README.md
git commit -m "Added README"
git push origin main

Step 3: Create a .gitignore File

The .gitignore file prevents unnecessary files from being tracked.

echo "# Python
__pycache__/
*.pyc
venv/
.env

# Node
node_modules/
dist/" > .gitignore

Commit the file:

git add .gitignore
git commit -m "Added .gitignore"
git push origin main

Step 4: Set Up Flask-VueJS Project Skeleton

Flask (Backend)

  1. Navigate to your project directory: 
    mkdir backend && cd backend
  2. Create a virtual environment: 
    python3 -m venv venv
source venv/bin/activate  # For macOS/Linux
# OR
venv\Scripts\activate  # For Windows
  3. Install Flask: 
    pip install flask
  4. Create an app.py file: 
    from flask import Flask
app = Flask(__name__)
@app.route('/')
def home():
    return 'Hello from Flask!'
if __name__ == '__main__':
    app.run(debug=True)
  5. Run the Flask app: 
    flask run

VueJS (Frontend)

  1. Navigate back to the root folder: 
    cd ..
  2. Create a VueJS project: 
    npx create-vue frontend
cd frontend
npm install
npm run dev  # Start the Vue app

Commit the project structure:

git add backend frontend
git commit -m "Initialized Flask-VueJS project"
git push origin main

Step 5: Define an Issue Tracker for Milestone Progress

To track project milestones, create a Git tracker document:

touch git-tracker.md
echo "# Git Tracker for Household Service v2\n\n## Milestones:\n- [ ] Set up Flask backend\n- [ ] Initialize Vue frontend\n- [ ] Connect Flask API with Vue\n\n## Commits & Progress:\n- **$(date +%Y-%m-%d)** - Initialized Flask-Vue project (Commit SHA: XYZ)" > git-tracker.md

Commit and push:

git add git-tracker.md
git commit -m "Added Git tracker document"
git push origin main

Step 6: Add Collaborators (MADII-cs2006)

Using GitHub CLI

Ensure GitHub CLI is installed and authenticated:

gh auth login

Run the following command to add MADII-cs2006 as a collaborator:

gh api -X PUT "/repos/YOUR_USERNAME/household-service-v2/collaborators/MADII-cs2006"

Verify the collaborator list:

gh api "/repos/YOUR_USERNAME/household-service-v2/collaborators"

Using GitHub Web Interface

  1. Go to GitHub Repository → Settings.
  2. Click Manage Access.
  3. Click Invite Collaborator.
  4. Enter MADII-cs2006 and send the invite.

Bonus: GitHub Adding Collaborator Video

To learn how to add a collaborator using VSCode and WSL, refer to this tutorial:

Conclusion

By following these steps, you now have a fully initialized Flask-VueJS project with:

  • A private GitHub repository
  • A README.md for project documentation
  • A .gitignore to prevent unnecessary files
  • A working Flask backend and Vue frontend
  • A Git tracker document for milestone tracking
  • A collaborator added for project contributions

This setup ensures smooth collaboration and effective version control. 🚀 Happy coding! 🎯

By
Labels: