diff --git a/.github/workflows/frontend-deploy.yml b/.github/workflows/frontend-deploy.yml new file mode 100644 index 0000000..81830ba --- /dev/null +++ b/.github/workflows/frontend-deploy.yml @@ -0,0 +1,66 @@ +name: Frontend CI/CD Pipeline + +on: + push: + branches: [ main, develop ] + paths: + - 'frontend/**' + pull_request: + branches: [ main, develop ] + paths: + - 'frontend/**' + +jobs: + test: + runs-on: ubuntu-latest + + steps: + - name: Checkout code + uses: actions/checkout@v4 + + - name: Setup Node.js + uses: actions/setup-node@v4 + with: + node-version: '18' + + - name: Install dependencies + working-directory: ./frontend + run: npm ci + + - name: Run linting + working-directory: ./frontend + run: npm run lint:check + + - name: Run tests + working-directory: ./frontend + run: npm test + + - name: Build application + working-directory: ./frontend + run: npm run build + + deploy: + needs: test + runs-on: ubuntu-latest + if: github.ref == 'refs/heads/main' + + steps: + - name: Checkout code + uses: actions/checkout@v4 + + - name: Setup Node.js + uses: actions/setup-node@v4 + with: + node-version: '18' + + - name: Install Vercel CLI + run: npm install --global vercel@latest + + - name: Deploy to Vercel + working-directory: ./frontend + env: + VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }} + VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }} + VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }} + run: | + vercel --prod --token=$VERCEL_TOKEN --confirm diff --git a/.github/workflows/frontend-preview.yml b/.github/workflows/frontend-preview.yml new file mode 100644 index 0000000..5156972 --- /dev/null +++ b/.github/workflows/frontend-preview.yml @@ -0,0 +1,44 @@ +name: Frontend Preview Deployment + +on: + pull_request: + branches: [ main, develop ] + paths: + - 'frontend/**' + +jobs: + preview: + runs-on: ubuntu-latest + + steps: + - name: Checkout code + uses: actions/checkout@v4 + + - name: Setup Node.js + uses: actions/setup-node@v4 + with: + node-version: '18' + + - name: Install dependencies + working-directory: ./frontend + run: npm ci + + - name: Run linting + working-directory: ./frontend + run: npm run lint:check + + - name: Build application + working-directory: ./frontend + run: npm run build + + - name: Install Vercel CLI + run: npm install --global vercel@latest + + - name: Deploy Preview to Vercel + working-directory: ./frontend + env: + VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }} + VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }} + VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }} + run: | + vercel --token=$VERCEL_TOKEN --confirm diff --git a/docs/deployment/vercel-setup.md b/docs/deployment/vercel-setup.md new file mode 100644 index 0000000..1a74f20 --- /dev/null +++ b/docs/deployment/vercel-setup.md @@ -0,0 +1,136 @@ +# Vercel Frontend Deployment Setup + +This guide will help you set up automatic deployment of your PolyNode frontend to Vercel using GitHub Actions CI/CD pipeline. + +## Prerequisites + +1. **Vercel Account**: Sign up at [vercel.com](https://vercel.com) +2. **GitHub Repository**: Your code should be in a GitHub repository +3. **Node.js 18+**: Ensure your local environment has Node.js 18 or higher + +## Step 1: Connect Vercel to Your Repository + +1. Go to [vercel.com/dashboard](https://vercel.com/dashboard) +2. Click "New Project" +3. Import your GitHub repository +4. Select the `frontend` folder as the root directory +5. Configure your project settings: + - Framework Preset: Next.js + - Build Command: `npm run build` + - Output Directory: `.next` + - Install Command: `npm ci` + +## Step 2: Get Vercel Configuration + +After creating your project, you'll need these values: + +1. **Vercel Token**: + - Go to [vercel.com/account/tokens](https://vercel.com/account/tokens) + - Create a new token with appropriate permissions + +2. **Organization ID**: + - Found in your project settings or dashboard + +3. **Project ID**: + - Found in your project settings or dashboard + +## Step 3: Configure GitHub Secrets + +In your GitHub repository: + +1. Go to **Settings** → **Secrets and variables** → **Actions** +2. Add the following repository secrets: + - `VERCEL_TOKEN`: Your Vercel API token + - `VERCEL_ORG_ID`: Your Vercel organization ID + - `VERCEL_PROJECT_ID`: Your Vercel project ID + +## Step 4: Configure Branch Protection (Recommended) + +1. Go to **Settings** → **Branches** +2. Add rule for `main` branch: + - Require status checks to pass before merging + - Require branches to be up to date before merging + - Select the status checks from your workflow + +## Step 5: Test Your Pipeline + +1. Make a change to your frontend code +2. Push to a feature branch +3. Create a pull request to `main` +4. The pipeline will automatically: + - Run tests and linting + - Deploy a preview to Vercel + - Show deployment status in the PR + +## Step 6: Production Deployment + +When you merge to `main`: +1. The pipeline automatically deploys to production +2. Vercel will build and deploy your application +3. You'll get a production URL (e.g., `your-app.vercel.app`) + +## Workflow Files + +This setup includes two GitHub Actions workflows: + +- **`frontend-deploy.yml`**: Main CI/CD pipeline for production deployment +- **`frontend-preview.yml`**: Preview deployments for pull requests + +## Environment Variables + +If your frontend needs environment variables: + +1. Add them in your Vercel project settings +2. Or create a `.env.local` file (don't commit this to git) +3. For production, use Vercel's environment variable management + +## Custom Domain (Optional) + +1. In Vercel dashboard, go to your project settings +2. Navigate to "Domains" +3. Add your custom domain +4. Configure DNS records as instructed + +## Monitoring and Analytics + +Vercel provides: +- Real-time performance metrics +- Function execution logs +- Error tracking +- Analytics dashboard + +## Troubleshooting + +### Common Issues: + +1. **Build Failures**: Check the build logs in Vercel dashboard +2. **Missing Dependencies**: Ensure all dependencies are in `package.json` +3. **Environment Variables**: Verify all required env vars are set in Vercel +4. **GitHub Actions Failures**: Check the Actions tab in your repository + +### Debug Commands: + +```bash +# Test build locally +cd frontend +npm run build + +# Test Vercel deployment locally +npx vercel + +# Check Vercel status +npx vercel ls +``` + +## Next Steps + +1. Set up monitoring and alerting +2. Configure automatic rollbacks +3. Set up staging environments +4. Implement blue-green deployments if needed + +## Support + +- [Vercel Documentation](https://vercel.com/docs) +- [GitHub Actions Documentation](https://docs.github.com/en/actions) +- [Next.js Deployment Guide](https://nextjs.org/docs/deployment) diff --git a/frontend/.eslintrc.json b/frontend/.eslintrc.json new file mode 100644 index 0000000..f634dff --- /dev/null +++ b/frontend/.eslintrc.json @@ -0,0 +1,7 @@ +{ + "extends": ["next/core-web-vitals"], + "rules": { + "no-unused-vars": "warn", + "no-console": "warn" + } +} diff --git a/frontend/.gitignore b/frontend/.gitignore index 1808077..3fa832c 100644 --- a/frontend/.gitignore +++ b/frontend/.gitignore @@ -4,4 +4,5 @@ out/ dist/ build/ .env -*.log \ No newline at end of file +*.log +.vercel diff --git a/frontend/package.json b/frontend/package.json index 1716316..6c613ab 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -7,8 +7,10 @@ "dev": "next dev", "build": "next build", "start": "next start", - "lint": "next lint", - "test": "echo \"Error: no test specified\" && exit 1" + "lint": "next lint --fix", + "lint:check": "next lint", + "test": "npm run lint:check && npm run build", + "test:ci": "npm run lint:check && npm run build" }, "keywords": ["polynode", "frontend", "nextjs", "learning-platform"], "author": "", diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx index 6e271e7..13dd4f9 100644 --- a/frontend/src/app/page.tsx +++ b/frontend/src/app/page.tsx @@ -38,7 +38,7 @@ export default function Home() {

Join thousands of learners worldwide and unlock your potential with our cutting-edge - microservices-based learning platform. From coding to design, we've got you covered. + microservices-based learning platform. From coding to design, we've got you covered.

diff --git a/frontend/vercel.json b/frontend/vercel.json new file mode 100644 index 0000000..1c885f3 --- /dev/null +++ b/frontend/vercel.json @@ -0,0 +1,17 @@ +{ + "version": 2, + "builds": [ + { + "src": "package.json", + "use": "@vercel/next" + } + ], + "buildCommand": "npm run build", + "outputDirectory": ".next", + "installCommand": "npm ci", + "framework": "nextjs", + "regions": ["iad1"], + "env": { + "NODE_ENV": "production" + } +} diff --git a/scripts/setup-vercel.bat b/scripts/setup-vercel.bat new file mode 100644 index 0000000..2d2d968 --- /dev/null +++ b/scripts/setup-vercel.bat @@ -0,0 +1,52 @@ +@echo off +REM Vercel Setup Script for PolyNode Frontend (Windows Batch) +REM This script helps set up the initial Vercel configuration + +echo 🚀 Setting up Vercel deployment for PolyNode Frontend... + +REM Check if we're in the right directory +if not exist "frontend\package.json" ( + echo ❌ Error: Please run this script from the project root directory + pause + exit /b 1 +) + +REM Check if Vercel CLI is installed +vercel --version >nul 2>&1 +if %errorlevel% neq 0 ( + echo 📦 Installing Vercel CLI... + npm install -g vercel@latest +) else ( + echo ✅ Vercel CLI already installed +) + +REM Navigate to frontend directory +cd frontend + +echo 🔧 Initializing Vercel project... +echo Please follow the prompts to configure your Vercel project: +echo - Select 'Link to existing project' if you already have one +echo - Or create a new project +echo - Make sure to select the correct framework (Next.js) + +vercel + +echo. +echo 🎉 Vercel setup complete! +echo. +echo Next steps: +echo 1. Copy your Vercel project ID from the output above +echo 2. Go to https://vercel.com/account/tokens to create an API token +echo 3. Add these as GitHub secrets: +echo - VERCEL_TOKEN +echo - VERCEL_PROJECT_ID +echo - VERCEL_ORG_ID +echo. +echo 4. Push your changes to trigger the CI/CD pipeline +echo. +echo For detailed setup instructions, see: docs/deployment/vercel-setup.md + +REM Return to root directory +cd .. + +pause diff --git a/scripts/setup-vercel.ps1 b/scripts/setup-vercel.ps1 new file mode 100644 index 0000000..c5684af --- /dev/null +++ b/scripts/setup-vercel.ps1 @@ -0,0 +1,50 @@ +# Vercel Setup Script for PolyNode Frontend (Windows PowerShell) +# This script helps set up the initial Vercel configuration + +Write-Host "🚀 Setting up Vercel deployment for PolyNode Frontend..." -ForegroundColor Green + +# Check if we're in the right directory +if (-not (Test-Path "frontend/package.json")) { + Write-Host "❌ Error: Please run this script from the project root directory" -ForegroundColor Red + exit 1 +} + +# Check if Vercel CLI is installed +try { + $vercelVersion = vercel --version 2>$null + if ($vercelVersion) { + Write-Host "✅ Vercel CLI already installed" -ForegroundColor Green + } +} catch { + Write-Host "📦 Installing Vercel CLI..." -ForegroundColor Yellow + npm install -g vercel@latest +} + +# Navigate to frontend directory +Set-Location frontend + +Write-Host "🔧 Initializing Vercel project..." -ForegroundColor Yellow +Write-Host "Please follow the prompts to configure your Vercel project:" -ForegroundColor Cyan +Write-Host "- Select 'Link to existing project' if you already have one" -ForegroundColor Cyan +Write-Host "- Or create a new project" -ForegroundColor Cyan +Write-Host "- Make sure to select the correct framework (Next.js)" -ForegroundColor Cyan + +vercel + +Write-Host "" +Write-Host "🎉 Vercel setup complete!" -ForegroundColor Green +Write-Host "" +Write-Host "Next steps:" -ForegroundColor Cyan +Write-Host "1. Copy your Vercel project ID from the output above" -ForegroundColor White +Write-Host "2. Go to https://vercel.com/account/tokens to create an API token" -ForegroundColor White +Write-Host "3. Add these as GitHub secrets:" -ForegroundColor White +Write-Host " - VERCEL_TOKEN" -ForegroundColor White +Write-Host " - VERCEL_PROJECT_ID" -ForegroundColor White +Write-Host " - VERCEL_ORG_ID" -ForegroundColor White +Write-Host "" +Write-Host "4. Push your changes to trigger the CI/CD pipeline" -ForegroundColor White +Write-Host "" +Write-Host "For detailed setup instructions, see: docs/deployment/vercel-setup.md" -ForegroundColor Cyan + +# Return to root directory +Set-Location .. diff --git a/scripts/setup-vercel.sh b/scripts/setup-vercel.sh new file mode 100644 index 0000000..cf84ba0 --- /dev/null +++ b/scripts/setup-vercel.sh @@ -0,0 +1,46 @@ +#!/bin/bash + +# Vercel Setup Script for PolyNode Frontend +# This script helps set up the initial Vercel configuration + +echo "🚀 Setting up Vercel deployment for PolyNode Frontend..." + +# Check if we're in the right directory +if [ ! -f "frontend/package.json" ]; then + echo "❌ Error: Please run this script from the project root directory" + exit 1 +fi + +# Check if Vercel CLI is installed +if ! command -v vercel &> /dev/null; then + echo "📦 Installing Vercel CLI..." + npm install -g vercel@latest +else + echo "✅ Vercel CLI already installed" +fi + +# Navigate to frontend directory +cd frontend + +echo "🔧 Initializing Vercel project..." +echo "Please follow the prompts to configure your Vercel project:" +echo "- Select 'Link to existing project' if you already have one" +echo "- Or create a new project" +echo "- Make sure to select the correct framework (Next.js)" + +vercel + +echo "" +echo "🎉 Vercel setup complete!" +echo "" +echo "Next steps:" +echo "1. Copy your Vercel project ID from the output above" +echo "2. Go to https://vercel.com/account/tokens to create an API token" +echo "3. Add these as GitHub secrets:" +echo " - VERCEL_TOKEN" +echo " - VERCEL_PROJECT_ID" +echo " - VERCEL_ORG_ID" +echo "" +echo "4. Push your changes to trigger the CI/CD pipeline" +echo "" +echo "For detailed setup instructions, see: docs/deployment/vercel-setup.md"