1. Choose a Git provider, database adapter, and auth provider

You will need to choose a Git provider, database adapter, and auth provider. You can use any of the providers we have created, or you can create your own. In the example below we will use GitHub, Vercel KV, and the TinaCMS Auth.js provider.

If the Git provider, Database adapter, or Authentication provider you require is not available, you have the option to create your own. For assistance in this process, please refer to the documentation for self-hosted solutions, which provides detailed guidance.

2. Install the dependencies

yarn add tinacms @tinacms/datalayer

yarn add --dev @tinacms/cli

Install any dependencies for your chosen git provider, database adapter, and auth provider (This may very to depending on what you have chosen)

yarn add tinacms-gitprovider-github tinacms-authjs upstash-redis-level @upstash/redis

3. Create a database file

Create a file called database.{js,ts} in the tina folder of your project. This file will be used to create the database.

tina/database.{ts,js}

import { createDatabase, createLocalDatabase } from '@tinacms/datalayer'

// Change this to your chosen git provider
import { GitHubProvider } from 'tinacms-gitprovider-github'

// Change this to your chosen database adapter
import { Redis } from '@upstash/redis'
import { RedisLevel } from 'upstash-redis-level'

// Manage this flag in your CI/CD pipeline and make sure it is set to false in production
const isLocal = process.env.TINA_PUBLIC_IS_LOCAL === 'true'

const branch =
  process.env.GITHUB_BRANCH || process.env.VERCEL_GIT_COMMIT_REF || 'main'

if (!branch) {
  throw new Error(
    'No branch found. Make sure that you have set the GITHUB_BRANCH or process.env.VERCEL_GIT_COMMIT_REF environment variable.'
  )
}

export default isLocal
  ? // If we are running locally, use a local database that stores data in memory and writes to the locac filesystem on save
    createLocalDatabase()
  : // If we are not running locally, use a database that stores data in redis and Saves data to github
    createDatabase({
      // May very depending on your git provider
      gitProvider: new GitHubProvider({
        repo: process.env.GITHUB_REPO || process.env.VERCEL_GIT_REPO_SLUG,
        owner: process.env.GITHUB_OWNER || process.env.VERCEL_GIT_REPO_OWNER,
        token: process.env.GITHUB_PERSONAL_ACCESS_TOKEN,
        branch,
      }),
      // May very depending on your database adapter
      databaseAdapter: new RedisLevel<string, Record<string, any>>({
        redis: new Redis({
          url:
            (process.env.KV_REST_API_URL as string) || 'http://localhost:8079',
          token: (process.env.KV_REST_API_TOKEN as string) || 'example_token',
        }),
        debug: process.env.DEBUG === 'true' || false,
        namespace: branch,
      }),
    })

4. Host the Tina Backend

You will need a backend endpoint that hosts the GraphQL and auth api endpoints.

In this example we will show how to host the GraphQL API on Vercel. You can use any hosting provider you want (code may need to be adjusted to suit your chosen framework).

// pages/api/tina/[...routes].{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)
}

For more info see Backend Host

5. Update the TinaCMS config

Update the TinaCMS config to use the GraphQL API you created in the previous step.

// tina/config.{js,ts}

export default defineConfig({
  // Make sure to set this to the url of your GraphQL API
  contentApiUrlOverride: '/api/tina/gql',
  authProvider:  // Add your authentication provider. Please refer to the docs for your chosen authentication provider.
  //...
})

Now you should be able to run your site and use TinaCMS to edit your content. See the docs on the configuration components for more info on how to self-host TinaCMS.

Next Steps

• Querying Data
• If you want to change your Git provider, database adapter, or auth provider, check out the reference.
• Got questions? Feel ask in our Discord

Last Edited: November 19, 2024