Bart Dorsey

Setting Up a Workspace

Step 1: Organize Your Monorepo Structure

Your monorepo should be organized with clear separation between projects:

my-fullstack-app/
├── .git/              # Single Git repository
├── README.md          # Project documentation
├── .gitignore         # Shared gitignore
├── frontend/          # React Vite project
│   ├── src/
│   ├── public/
│   ├── package.json
│   └── vite.config.js
└── backend/           # FastAPI project
    ├── main.py
    ├── requirements.txt
    └── app/

Step 2: Create the Workspace

Method 1: Using the File Menu

  1. Open VSCode
  2. Go to File → Add Folder to Workspace...
  3. Select your frontend folder
  4. Repeat: File → Add Folder to Workspace...
  5. Select your backend folder
  6. (Optional) Add the monorepo root: File → Add Folder to Workspace... and select the parent my-fullstack-app folder
  7. Save the workspace: File → Save Workspace As...
  8. Save it in your monorepo root as project.code-workspace

Method 2: Create the Workspace File Manually

Create a file called project.code-workspace in your monorepo root with this content:

{
    "folders": [
        {
            "name": "Monorepo Root",
            "path": "."
        },
        {
            "name": "Frontend (React)",
            "path": "./frontend"
        },
        {
            "name": "Backend (FastAPI)",
            "path": "./backend"
        }
    ]
}

Including the monorepo root gives you easy access to:

Opening Your Workspace

Once you’ve created your workspace file, you can: