Docs

v.Latest
Introduction
Core Concepts
Querying Content
Editing
Customizing Tina
Going To Production
Media
Drafts
Guides
Further Reference
Config Reference

# 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

| Property             | Description                                                                                                          |
| -------------------- | -------------------------------------------------------------------------------------------------------------------- |
| `branch`             | The branch that will be used to query content on TinaCloud (Not used in local mode)                                  |
| `clientId`           | The ClientId [generated on TinaCloud](/docs/tina-cloud/dashboard/) (Not used in local mode)                          |
| `token`              | A read only token [generated on TinaCloud](/docs/tina-cloud/dashboard/projects/#api-tokens) (Not used in local mode) |
| `build`              | Build configuration for storing Tina as a static asset                                                               |
| `build.publicFolder` | The public asset folder for your framework                                                                           |
| `build.outputFolder` | Within the public asset folder, the desired output location                                                          |
| `build.basePath`     | If your site will be served at a sub-path like `my-domain.com/my-site`, provide `"my-site"`                          |
| `media`              | [Media configuration](/docs/reference/media/overview/) for external and git backed media                             |
| `schema`             | The [schema](/docs/reference/schema/) defines the shape of your content.                                             |
| `search`             | [Search configuration](/docs/reference/search/overview/#configuration)                                               |

## Example

```ts
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](/docs/schema/).


## 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:

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

Figure: Your defined `tsconfig.json`

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

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

export default defineConfig({
  ....
})
```

Figure: Using aliases in `tina/config.{ts,js,tsx}`
Last Edited: September 29, 2022