RepoView

This VS Code web extension allows browsing GitHub repositories. After user authorization, repo files appear in sidebar; individual files can be clicked to view contents in a panel. Includes caching and rate limiting.

Stack

• Frontend
  • VS Code web extension: initialized with vscode-generator-code
    • Webview: vscode-webview-ui-toolkit, Vite, React
• Backend
  • Docs: oauth.md, repos.md
  • Framework: Flask
  • Secrets: AWS
  • Cache: Redis (dev), Upstash (prod)
  • Rate limit: Upstash (prod)
  • Deployable to Vercel Serverless Functions
• Build: Turborepo

Local development

Prerequisites

Item	Version
Node.js	>= 16.17.0
Python	>= 3.11.4
Docker	latest
PNPM	latest

Setup

1. Get environment variables
   1. Copy the file ./apps/backend/.env.example to ./apps/backend/.env
   2. Register a new OAuth application on GitHub with these parameters:

      Key	Value	Example
      Application name	any	repoview
      Homepage URL	any	https://github.com/kosta7/RepoView
      Authorization callback URL	http://localhost:8080
      Enable Device Flow	false

   3. Copy generated Client ID and Client Secret and paste them into ./apps/backend/.env as GITHUB_CLIENT_ID and GITHUB_CLIENT_SECRET
   4. Run python -c 'import secrets; print(secrets.token_hex())' and paste the result into ./apps/backend/.env as SECRET_KEY
2. Activate a new Python environment (e.g. using python -m venv)
   1. python -m venv apps/backend/venv
   2. source apps/backend/venv/bin/activate
3. Install dependencies:
   1. pnpm install
   2. pip install -r apps/backend/requirements.txt
4. Start Docker (to be able to run VS Code development server, Redis, and AWS)

Running

pnpm run dev

Contribution

The purpose of this project is to explore VS Code capabilities. Feel free to open an issue if you have a question or suggestion.