Skip to content

SETUP_GUIDE.md

Latest commit

 

History

History
154 lines (115 loc) · 4.66 KB

SETUP_GUIDE.md

File metadata and controls

154 lines (115 loc) · 4.66 KB
Raw

Quick Setup Guide

What Has Been Done ✅

  1. Root Monorepo Configuration

    • Created package.json with workspaces for both frontend and backend
    • Installed convex and concurrently packages
    • Configured dev script to run all services with colored output

  2. Convex Backend Setup

    • Created convex/ folder at monorepo root
    • Added schema.ts with tasks table definition
    • Added tasks.ts with a query function to get all tasks
    • Created sampleData.jsonl with sample tasks
    • Created .env.local placeholder (needs configuration)

  3. React Frontend (dillydally-frontend)

    • Installed Convex package
    • Updated vite.config.ts with convex alias
    • Updated main.tsx to include ConvexProvider
    • Updated App.tsx to display tasks using useQuery hook
    • Configured TypeScript paths in tsconfig.app.json

  4. Express Backend (dillydally-express)

    • Created complete Express.js server structure
    • Installed all dependencies (express, convex, dotenv, cors, tsx)
    • Created src/index.ts with:
      • Health check endpoint at /
      • Tasks endpoint at /api/tasks
      • ConvexHttpClient integration
    • Configured TypeScript with paths to shared convex folder

  5. Documentation

    • Created comprehensive README.md
    • Created this setup guide

What You Need to Do Next 🚀

Step 1: Initialize Convex (Required)

Run this command from the monorepo root:

npx convex dev

This will:

  • Prompt you to log in with GitHub
  • Create a new Convex project
  • Update the .env.local file with your actual CONVEX_URL
  • Generate type definitions in convex/_generated/

Keep this terminal running - it watches for changes to your Convex functions.

Step 2: Configure Frontend Environment

Copy the CONVEX_URL from the root .env.local file and create:

dillydally-frontend/.env.local:

VITE_CONVEX_URL=https://your-deployment-url.convex.cloud

(Replace with your actual URL from root .env.local)

Step 3: Start All Services

In a new terminal window, run:

npm install
npm run dev

This will start:

Verify Everything Works

  1. Frontend: Open http://localhost:5173
    • You should see "DillyDally Tasks" with a list of tasks
  2. Backend Health Check: Open http://localhost:3001
    • Should return JSON with status "ok"
  3. Backend API: Open http://localhost:3001/api/tasks
    • Should return the list of tasks from Convex

Directory Structure Created

DillyDally/
├── package.json                    # Root workspace config
├── README.md                       # Full documentation
├── SETUP_GUIDE.md                 # This file
├── sampleData.jsonl               # Sample data
├── .env.local                     # Convex URL (generated by convex dev)
├── .gitignore                     # Ignore node_modules, .env, etc.
├── convex/                        # Shared Convex backend
│   ├── schema.ts
│   ├── tasks.ts
│   └── tsconfig.json
├── dillydally-frontend/           # React app
│   ├── src/
│   │   ├── App.tsx               # Updated with Convex
│   │   └── main.tsx              # Updated with ConvexProvider
│   └── vite.config.ts            # Updated with alias
└── dillydally-express/            # Express API (NEW)
    ├── src/
    │   └── index.ts              # Express server with Convex
    ├── package.json
    └── tsconfig.json

Common Commands

# Start all services (after convex dev is running)
npm run dev

# Start individual services
npm run dev --workspace=dillydally-frontend
npm run dev --workspace=dillydally-express

# Build for production
npm run build --workspace=dillydally-frontend
npm run build --workspace=dillydally-express

# Deploy Convex to production
npx convex deploy

Next Steps for Development

  1. Add more Convex functions (queries, mutations) in convex/
  2. Extend the frontend UI in dillydally-frontend/src/
  3. Add more API endpoints in dillydally-express/src/index.ts
  4. Update the schema in convex/schema.ts as needed

Need Help?

  • Check the main README.md for detailed documentation
  • Visit Convex Docs for Convex-specific questions
  • All services have hot reload enabled for rapid development

Important: Make sure to run npx convex dev first before starting the other services, as it generates the necessary type definitions that both the frontend and backend depend on.