The config file

When you provide a file at tina/config.{ts,tsx,js,jsx} that exports a defineConfig function, Tina will automatically generate TinaCMS as a static asset. Note that it must be the default export of this file.

The location for the config file was previously at .tina/config.{ts,tsx,js,jsx}

Definition

Example

const branch =
  process.env.NEXT_PUBLIC_TINA_BRANCH ||
  process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_REF ||
  process.env.HEAD ||
  'main'

export default defineConfig({
  branch,
  token: '<Your Read Only Token>' // generated on app.tina.io
  clientId: '<Your Client ID>', // generated on app.tina.io
  build: {
    publicFolder: 'public', // The public asset folder for your framework
    outputFolder: 'admin'  // within the public folder
  }
  // See https://tina.io/docs/reference/schema/ for more information
  schema: {
    collections: [
      //..Array of collections
    ],
  }
})

In this example, the TinaCMS admin will be viewable at <my-site-url>/admin/index.html. For more information check out the content modeling section.

Typescript Path Alias

TinaCMS supports TypeScript path aliases in the tina/config.{ts,js,tsx} file and collections, making it easier to organize and maintain your code.

Use alias in tina/config.ts,js,tsx

Ensure that tsconfig.json exists at the root of your project. Define your aliases in the compilerOptions section:

{
  "compilerOptions": {
    "baseUrl": ".",
      "paths": {
      "@/*": ["src/*"]
    }
  }
}

Figure: Your defined tsconfig.json

You can now import utilities or other modules using the aliases:

import { someUtility } from '@/lib/utils';

export default defineConfig({
  ....
})

Figure: Using aliases in tina/config.{ts,js,tsx}