GitHub Action for automatically deploying a Remix app to Vercel

!RemixVercelGitHubAction.markdown

Things to note to make this work:

1. you'll need to have your remix registry token available in your shell under REMIX_TOKEN
2. you'll need to add secrets to your GitHub repo for the following items:
   • REMIX_TOKEN
   • VERCEL_TOKEN (https://vercel.com/account/tokens)
   • VERCEL_ORG_ID
   • VERCEL_PROJECT_ID
3. you'll need to have your REMIX_TOKEN available in your vercel repo as an environment variable

VERCEL_ORG_ID and VERCEL_PROJECT_ID can be found in the .vercel/project.json file where you ran vercel link

.npmrc

@remix-run:registry=https://npm.remix.run
//npm.remix.run/:_authToken=${REMIX_TOKEN}

vercel.yml

name: Deploy to Vercel

on: [push]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Cancel Previous Runs
        uses: styfle/[email protected]
        with:
          access_token: ${{ github.token }}

      - name: Install and cache dependencies
        uses: actions/checkout@v2
      - uses: actions/cache@v1
        with:
          path: ~/.npm
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-node-
      - name: Build Remix App
        run: |
          npm ci
          npm run build
        env:
          REMIX_TOKEN: ${{ secrets.REMIX_TOKEN }}

      - name: Deploy Preview
        uses: amondnet/vercel-action@v20
        id: vercel-deploy-preview
        if: github.event_name == 'push' && github.ref != 'refs/heads/main'
        with:
          github-token: ${{ secrets.GITHUB_TOKEN }}
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
          vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
          working-directory: .

      - name: Deploy Production
        uses: amondnet/vercel-action@v20
        id: vercel-deploy-production
        if: github.event_name == 'push' && github.ref == 'refs/heads/main'
        with:
          github-token: ${{ secrets.GITHUB_TOKEN }}
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
          vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
          working-directory: .
          vercel-args: "--prod"