diff --git a/.github/VERCEL_SETUP.md b/.github/VERCEL_SETUP.md new file mode 100644 index 0000000..746e56f --- /dev/null +++ b/.github/VERCEL_SETUP.md @@ -0,0 +1,114 @@ +# Vercel Deployment Setup + +This repository is configured to automatically deploy to Vercel using GitHub Actions. + +## Features + +- **Production Deployments**: Automatically deploys to production when pushing to the `main` branch +- **Preview Deployments**: Creates preview deployments for all pull requests +- **PR Comments**: Automatically comments on PRs with the preview deployment URL + +## Setup Instructions + +### 1. Create a Vercel Project + +1. Go to [Vercel](https://vercel.com) and sign in +2. Create a new project and link it to this repository (or create it manually) +3. Note down your project settings + +### 2. Get Your Vercel Credentials + +You'll need three pieces of information: + +#### Get your Vercel Token: +1. Go to https://vercel.com/account/tokens +2. Create a new token with a descriptive name (e.g., "GitHub Actions") +3. Copy the token (you won't be able to see it again) + +#### Get your Organization ID: +1. Go to your Vercel dashboard +2. Go to Settings → General +3. Copy your "Organization ID" (or "Team ID") + +#### Get your Project ID: +1. Go to your project in Vercel +2. Go to Settings → General +3. Copy your "Project ID" + +### 3. Add GitHub Secrets + +Add the following secrets to your GitHub repository: + +1. Go to your repository on GitHub +2. Navigate to Settings → Secrets and variables → Actions +3. Click "New repository secret" and add each of the following: + +| Secret Name | Description | +|------------|-------------| +| `VERCEL_TOKEN` | Your Vercel authentication token | +| `VERCEL_ORG_ID` | Your Vercel organization/team ID | +| `VERCEL_PROJECT_ID` | Your Vercel project ID | + +### 4. Configure Vercel Project Settings (Optional) + +In your Vercel project settings, you may want to: + +- Set the **Framework Preset** to "Vite" +- Set **Build Command** to `npm run build` (or leave as default) +- Set **Output Directory** to `dist` (default for Vite) +- Set **Install Command** to `npm install` (or leave as default) + +### 5. Test the Workflow + +1. Create a new branch and make a change +2. Open a pull request +3. The workflow will automatically create a preview deployment +4. Check the PR comments for the preview URL + +## Workflow Details + +The workflow (`vercel-deploy.yml`) runs on: + +- **Push to main**: Creates a production deployment +- **Pull request**: Creates a preview deployment and comments with the URL + +## Troubleshooting + +### Deployment fails with "Project not found" + +- Verify that `VERCEL_PROJECT_ID` is correct +- Ensure the project exists in your Vercel account + +### Authentication errors + +- Verify that `VERCEL_TOKEN` is valid and not expired +- Check that the token has the necessary permissions + +### Build errors + +- Test the build locally with `npm run build` +- Check Vercel logs for detailed error messages + +## Manual Deployment + +You can also deploy manually using the Vercel CLI: + +```bash +# Install Vercel CLI +npm install -g vercel + +# Login +vercel login + +# Deploy preview +vercel + +# Deploy production +vercel --prod +``` + +## Additional Resources + +- [Vercel Documentation](https://vercel.com/docs) +- [GitHub Actions Documentation](https://docs.github.com/en/actions) +- [Vite Documentation](https://vitejs.dev/) diff --git a/.github/workflows/vercel-deploy.yml b/.github/workflows/vercel-deploy.yml new file mode 100644 index 0000000..7e111f2 --- /dev/null +++ b/.github/workflows/vercel-deploy.yml @@ -0,0 +1,60 @@ +name: Vercel Deploy + +on: + push: + branches: + - main + pull_request: + types: [opened, synchronize, reopened] + +env: + VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }} + VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }} + +jobs: + deploy: + runs-on: ubuntu-latest + steps: + - name: Checkout code + uses: actions/checkout@v4 + + - name: Setup Node.js + uses: actions/setup-node@v4 + with: + node-version: '20' + cache: 'npm' + + - name: Install Vercel CLI + run: npm install -g vercel@latest + + - name: Pull Vercel Environment Information + run: vercel pull --yes --environment=${{ github.event_name == 'push' && 'production' || 'preview' }} --token=${{ secrets.VERCEL_TOKEN }} + + - name: Build Project Artifacts + run: vercel build ${{ github.event_name == 'push' && '--prod' || '' }} --token=${{ secrets.VERCEL_TOKEN }} + + - name: Deploy to Vercel + id: deploy + run: | + if [ "${{ github.event_name }}" == "push" ]; then + vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }} > deployment-url.txt + else + vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }} > deployment-url.txt + fi + echo "url=$(cat deployment-url.txt)" >> $GITHUB_OUTPUT + + - name: Comment PR with Preview URL + if: github.event_name == 'pull_request' + uses: actions/github-script@v7 + with: + github-token: ${{ secrets.GITHUB_TOKEN }} + script: | + const fs = require('fs'); + const deploymentUrl = fs.readFileSync('deployment-url.txt', 'utf8').trim(); + + github.rest.issues.createComment({ + issue_number: context.issue.number, + owner: context.repo.owner, + repo: context.repo.repo, + body: `## šŸš€ Preview Deployment\n\nYour preview deployment is ready!\n\nšŸ”— **Preview URL:** ${deploymentUrl}\n\n---\n*Deployed via Vercel*` + }); diff --git a/README.md b/README.md index dc87f10..fd780f4 100644 --- a/README.md +++ b/README.md @@ -8,4 +8,13 @@ Run `npm i` to install the dependencies. Run `npm run dev` to start the development server. + + ## Deployment + + This project is configured to automatically deploy to Vercel using GitHub Actions. + + - **Production deployments**: Automatically deploy when pushing to the `main` branch + - **Preview deployments**: Automatically created for all pull requests + + For setup instructions, see [.github/VERCEL_SETUP.md](.github/VERCEL_SETUP.md). \ No newline at end of file