If you are not using Next.js but are using Vercel to host your site, you can deploy the Tina Backend as a Vercel Function. This function will be responsible for handling all TinaCMS requests. This includes the GraphQL API, authentication, and authorization.

If you want to see Vercel Functions in action, check out the demo repo

Configuration

Create a file called api/tina/backend.{ts,js} and add the following code:

// `api/tina/backend.{ts,js}`

import { TinaNodeBackend, LocalBackendAuthentication } from '@tinacms/datalayer'
import { TinaAuthJSOptions, AuthJsBackendAuthentication } from 'tinacms-authjs'

import databaseClient from '../../../tina/__generated__/databaseClient'

const isLocal = process.env.TINA_PUBLIC_IS_LOCAL === 'true'

const handler = TinaNodeBackend({
  authentication: isLocal
    ? LocalBackendAuthentication()
    : AuthJsBackendAuthentication({
        authOptions: TinaAuthJSOptions({
          databaseClient: databaseClient,
          secret: process.env.NEXTAUTH_SECRET,
        }),
      }),
  databaseClient,
})

export default (req, res) => {
  // Modify the request here if you need to
  return handler(req, res)
}

Since Vercel Functions do not support catch all routes, you will need to add the following to your vercel.json file.

{
  "rewrites": [
    {
      "source": "/api/tina/:path*",
      "destination": "/api/tina/backend"
    }
  ]
}

Next make sure to update your TinaCMS config to use the new endpoint.

// tina/config.{js,ts}
export default defineConfig({
  // This is the url to your graphql endpoint
  contentApiUrlOverride: '/api/tina/gql',
  //...
})

Next make sure to update your dev command to pass in the correct port so that both the backend and frontend are running on the same port.

{
  "scripts": {
    "dev": "TINA_PUBLIC_IS_LOCAL=true tinacms dev -c \" <Your Dev Command> --port $PORT\""
  }
}

Now you can run your site locally with the vercel dev command