• Further Reference
• Config

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.js file and collections, making it easier to organize and maintain your code.

Use alias in config.ts

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